/* kol-modal.css — cabecera con color para TODOS los modales.
 *
 * Cada página nombró su modal a su manera (.create-shell, .message-shell,
 * .apply-shell, .publish-shell, .applicants-shell, .modal-head…), así que la
 * cabecera se estaba resolviendo quince veces por separado y sólo dos la
 * tenían con color. Esto es la única definición; se carga LA ÚLTIMA en cada
 * página para ganarle a la hoja propia sin necesidad de !important en el
 * grueso de las reglas.
 *
 * Regla de contraste: sobre el ámbar el texto va en blanco y el botón de
 * cerrar se invierte (fondo claro, aspa oscura); si no, el aspa gris sobre
 * naranja no se ve.
 */
.create-shell > header,
.message-shell > header,
.apply-shell > header,
.publish-shell > header,
.applicants-shell > header,
.pick-shell > header,
.conn-modal > header,
.modal-card > header,
.gm-shell > header,
.modal-head {
    padding: 18px 22px;
    border-bottom: 0;
    background: linear-gradient(120deg, var(--brand-76), color-mix(in oklab, var(--brand-83), #c7c7c7 7%));
    color: #fff;
}
.create-shell > header h2,
.message-shell > header h2,
.apply-shell > header h2,
.publish-shell > header h2,
.applicants-shell > header h2,
.pick-shell > header h2,
.conn-modal > header h2,
.modal-card > header h2,
.gm-shell > header h2,
.modal-head h2 { color: #fff; letter-spacing: -.015em; }

/* El antetítulo ("NUEVO GRUPO") iba en ámbar sobre blanco: sobre el ámbar
   desaparecía. */
.create-shell > header span,
.message-shell > header span,
.apply-shell > header span,
.publish-shell > header span,
.applicants-shell > header span,
.pick-shell > header span,
.modal-card > header span,
.modal-head span,
/* El subtitulo del modal ("Lo que ve el comprador en la tienda") se pintaba
   con el gris de texto secundario de cada pagina, y sobre el color de la
   cabecera ese gris casi no se lee. */
.create-shell > header p,
.message-shell > header p,
.apply-shell > header p,
.publish-shell > header p,
.applicants-shell > header p,
.pick-shell > header p,
.modal-card > header p,
.modal-head p { color: rgba(255,255,255,.92); }

.create-close,
.modal-head button,
.message-close,
.apply-close,
.publish-close,
.applicants-close,
.pick-close,
.conn-close,
.gm-close,
.modal-close {
    background: rgba(255,255,255,.92);
    color: var(--brand-47);
    border: 0;
}
.create-close:hover,
.modal-head button:hover,
.message-close:hover,
.apply-close:hover,
.publish-close:hover,
.applicants-close:hover,
.pick-close:hover,
.conn-close:hover,
.gm-close:hover,
.modal-close:hover { background: #fff; }
.create-close svg, .modal-head button svg { color: var(--brand-47); }

/* La cabecera pinta hasta el borde: sin esto el ámbar desborda la esquina
   redondeada del modal. */
.create-shell, .message-shell, .apply-shell,
.publish-shell, .applicants-shell, .pick-shell, .modal-card { overflow: hidden; }

/* Un modal tiene que tapar TODO, y la barra superior está en z-index 180.
   Cada página se puso su propio valor (80, 100…) y en varias la barra le
   pisaba la cabecera al modal, dejándola fuera de alcance. Aquí se fija una
   vez, con el 300 que admin.css y brands.css ya habían elegido, para no
   BAJAR el de nadie.
   El velo NO se toca: en varias páginas es hijo del modal y hermano anterior
   de la tarjeta, así que darle un z-index propio lo pone por ENCIMA del
   formulario — atenuado y sin recibir clics. Su orden natural ya es el
   correcto. */
.create-modal, .pick-modal, .modal, .modal-backdrop { z-index: 300; }