/* Sprint 2.8.43.115 — La piel comun de los modales.
 *
 * Habia tres maneras de vestir un modal en el proyecto: la moderna (`cs-chat-modal`,
 * `cs2724-professional-modal`), la antigua de `.modal-classicspark` —botones de radio 24 a ancho
 * completo y un `padding:16px` en el `.modal-content` que se suma al del cuerpo— y una tercera
 * hecha a medida para el boton de enlace, con cabecera propia y degradado.
 *
 * Esta es una sola, con los numeros que ya estaban en produccion en el chat. Se aplica poniendo
 * `cs-modal` en el `.modal`, y el marcado de dentro es el estandar de Bootstrap:
 * `modal-header` / `modal-body` / `modal-footer`.
 *
 * Las tres primeras reglas existen para deshacer lo que hereda de `.modal-classicspark`
 * (`main.css` 3989-4004). Sin ellas, el `padding` se suma dos veces y los botones del pie se
 * apilan a ancho completo.
 */

.cs-modal .modal-dialog{width:min(94vw,540px);max-width:540px}
.cs-modal .modal-content{overflow:hidden;padding:0!important;border:0!important;border-radius:18px!important;background:#fff;box-shadow:0 24px 60px rgba(35,24,29,.22)}
.cs-modal .modal-footer .btn{width:auto;margin-bottom:0}

.cs-modal .modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin:0!important;padding:20px 22px!important;border-bottom:1px solid #efe6e9}
.cs-modal .modal-header>div{min-width:0}
.cs-modal .modal-header span{display:block;color:#c90035;font-family:gilroy-semibold,Arial,sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em}
.cs-modal .modal-header h2{margin:4px 0 0;color:#2f2c41;font-family:gilroy-semibold,Arial,sans-serif;font-size:22px;line-height:1.2}
.cs-modal .modal-header .close{margin:0;padding:7px;border:0;background:none;color:#696370;font-size:16px;opacity:1}
.cs-modal .modal-header .close:hover{color:#c90035}

.cs-modal .modal-body{margin:0!important;padding:20px 22px!important}
.cs-modal .modal-body>label,.cs-modal .modal-body label{display:block;margin-bottom:7px;color:#302d40;font-family:gilroy-semibold,Arial,sans-serif;font-size:13px}
.cs-modal .modal-body label span{color:#c90035}
.cs-modal__intro{margin:0 0 18px;color:#5f5968;font-size:13px}
.cs-modal__field{margin-bottom:16px}
.cs-modal__field:last-child{margin-bottom:0}
.cs-modal .form-control{border:1px solid #ddd3d6;border-radius:11px;font-size:13px;box-shadow:none!important}
.cs-modal input.form-control{height:44px}
.cs-modal textarea.form-control{min-height:150px;padding:11px 13px;line-height:1.5;resize:vertical}
.cs-modal .form-control:focus{border-color:#c90035;box-shadow:0 0 0 3px rgba(201,0,53,.1)!important;outline:0}
.cs-modal__count{display:block;margin-top:7px;color:#8a8390;font-size:11px;text-align:right}

/* El icono dentro del campo del enlace. */
.cs-modal__input{position:relative}
.cs-modal__input>i{position:absolute;z-index:2;top:15px;left:14px;color:#c90035;font-size:13px}
.cs-modal__input .form-control{padding-left:37px}

/* La vista previa del boton de enlace: lo unico propio que se conserva, porque dice algo. */
.cs-modal__preview{margin-top:18px;padding:14px;border:1px solid #eadde1;border-radius:14px;background:#fff9fb}
.cs-modal__preview>span{display:block;margin-bottom:9px;color:#77707c;font-family:gilroy-semibold,Arial,sans-serif;font-size:11px}
.cs-modal__preview>a{display:flex;width:100%;min-height:44px;align-items:center;justify-content:center;gap:9px;border-radius:11px;background:#c90035;color:#fff!important;font-family:gilroy-semibold,Arial,sans-serif;font-size:13px;text-decoration:none}

.cs-modal .modal-footer{display:flex;margin:0!important;padding:14px 22px 20px!important;gap:9px;justify-content:flex-end;border-top:1px solid #efe6e9}
.cs-modal .modal-footer button,.cs-modal .modal-footer .btn{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:7px;padding:0 16px;border-radius:10px;font-family:gilroy-semibold,Arial,sans-serif;font-size:12px;cursor:pointer}
.cs-modal__cancel{border:1px solid #efe6e9;background:#fff;color:#625960}
.cs-modal__cancel:hover{background:#fbf5f6;color:#625960}
.cs-modal__save{border:0;background:#c90035;color:#fff}
.cs-modal__save:hover{background:#a80430;color:#fff}

@media(max-width:575px){
	.cs-modal .modal-header{padding:17px 18px!important}
	.cs-modal .modal-header h2{font-size:19px}
	.cs-modal .modal-body{padding:17px 18px!important}
	.cs-modal .modal-footer{padding:13px 18px 18px!important}
}

/* Sprint 2.8.43.116 — el contador de los compositores.
   Vive aqui, con el `cs-modal__count` del que es hermano, para que los dos digan lo mismo
   estando uno dentro de un modal y el otro debajo de una tarjeta del muro. */
.cs-charcount{display:block;margin-top:6px;color:#8a8390;font-size:11px;text-align:right}
.cs-charcount.is-near-limit{color:#c90035}
#shareContainer .cs-charcount{padding-right:2px}
.cs2766-comment-composer{position:relative}
.cs2766-comment-composer .cs-charcount{width:100%;margin-top:4px}