/* =====================================================================
   PICHANGUEO · Overrides propios del codebase
   ---------------------------------------------------------------------
   Ajustes específicos de NUESTRA app que el export del design system no
   puede conocer (markup de Dason, páginas con estilos propios, etc.).
   Se carga DESPUÉS de pichangueo-theme/typography/components.css.
   Mantener el export intacto para poder re-exportarlo sin perder esto.
   ===================================================================== */

/* ---------- Topbar · caja de marca ----------
   Dason le pone fondo blanco propio a .navbar-brand-box (pensado para el
   tema claro). En dark-only queda como un bloque blanco. La transparentamos
   y alineamos el logo + wordmark. */
.navbar-brand-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Se estira a la altura del topbar (flex item) y centra la marca dentro.
       Antes traía height:100% inline, que colapsaba la caja a la altura del
       contenido y dejaba el logo pegado arriba. */
    display: flex;
    align-items: center;
    align-self: stretch;
    height: auto !important;
    /* Dason le fija width:250px (ancho del sidebar). En el layout launchpad no hay
       sidebar, así que ese ancho fijo descuadra y el buscador tapa el wordmark. */
    width: auto !important;
    /* min-width:max-content evita que la caja colapse (quedaba en 70px) y la marca
       se desbordara por debajo del link "Inicio". */
    min-width: max-content !important;
    padding: 0 !important;
    margin-right: 16px;
    flex: 0 0 auto;
}
/* Marca única (.sf-brand). OJO: no tocar `.logo` de Dason con display:flex —
   des-oculta las variantes .logo-dark/.logo-light y se enciman las dos. */
.sf-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 0 12px;
    white-space: nowrap;
}
.sf-brand img {
    height: 26px;
    width: auto;
    display: block;
}
/* El wordmark ya trae Audiowide + la "w" neón desde squadflow-typography.css */
.sf-brand .sk-wordmark {
    font-size: 18px;
    line-height: 1;
}

/* ---------- .list-group-item (Bootstrap) ----------
   Bootstrap pinta `.list-group-item` con `--bs-list-group-bg`/`--bs-list-group-color`,
   que el export del design system no tocó (solo cubrió componentes propios como
   .sk-badge/.sk-kpi). Por eso cualquier `<li class="list-group-item">` -listas de
   convocatoria, invitaciones, plantel, etc.- se ve con un fondo claro/gris que no
   calza con las cards oscuras. Override global: una sola vez, para todos los usos. */
.list-group-item {
    background-color: var(--sk-surface, #131740) !important;
    color: var(--sk-text, #fff) !important;
    border-color: var(--sk-border, rgba(184,87,255,.20)) !important;
}
.list-group-item.bg-light {
    background-color: var(--sk-tint, #0a0e27) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--sk-tint, #0a0e27) !important;
    color: var(--sk-text, #fff) !important;
}
.list-group-flush > .list-group-item {
    border-width: 0 0 1px;
}

/* ---------- SweetAlert2 (toasts y modales de confirmación) ----------
   Dason estiliza .swal2-popup con `background:var(--bs-secondary-bg)` (queda
   claro, Bootstrap nunca fue tocado) y el texto con `color:var(--bs-body-color)`,
   que SÍ redefinimos arriba a blanco (--sk-text) para el tema oscuro. Resultado:
   texto blanco sobre fondo blanco -> el mensaje del toast se veía "vacío"
   (solo el ícono, que tiene su propio color fijo, era visible). */
.swal2-popup {
    background: var(--sk-surface, #131740) !important;
    color: var(--sk-text, #fff) !important;
    /* Radio y borde del resto de los modales: sin esto quedaba en los 5px de
       Swal y sin el contorno neon, y una confirmacion parecia de otra app. */
    border-radius: 14px !important;
    border: 1px solid var(--sk-border-strong, rgba(184,87,255,.45)) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
}
.swal2-html-container { color: var(--sk-text-muted, #9a9fc7) !important; }
/* Los iconos vienen del tema Dason (el "?" salia cian): se llevan a la paleta.
   Hace falta !important porque app-rtl.min.css ya los pinta. */
.swal2-icon.swal2-question { border-color: var(--sk-accent, #b857ff) !important; color: var(--sk-accent, #b857ff) !important; }
.swal2-icon.swal2-info     { border-color: var(--sk-accent, #b857ff) !important; color: var(--sk-accent, #b857ff) !important; }
.swal2-icon.swal2-warning  { border-color: #f5a623 !important; color: #f5a623 !important; }
.swal2-icon.swal2-error    { border-color: #ff6b6b !important; color: #ff6b6b !important; }
.swal2-icon.swal2-success  { border-color: #2ee6a8 !important; color: #2ee6a8 !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #2ee6a8 !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(46,230,168,.35) !important; }
.swal2-actions { gap: 10px; }

/* Botones de skConfirmar() (assets/js/utils/confirmar.js). El helper usa
   buttonsStyling:false para que el estilo salga de aca y no de la paleta de
   Swal: sin estas reglas los botones quedan sin formato. */
.sk-swal-btn {
    border-radius: 10px; padding: 10px 20px; font-weight: 600; font-size: .95rem;
    border: 1px solid transparent; cursor: pointer; min-height: 44px;
    background: linear-gradient(135deg, var(--sk-primary, #9d4edd), var(--sk-accent, #b857ff));
    color: #fff; box-shadow: 0 6px 18px rgba(157,78,221,.38);
    transition: filter .15s ease;
}
.sk-swal-btn:hover { filter: brightness(1.08); }
.sk-swal-btn--ghost {
    background: var(--sk-tint, #191d4d); color: var(--sk-text, #cdd0f0);
    border-color: var(--sk-border, rgba(184,87,255,.20)); box-shadow: none;
}
/* Destructiva: outline y separada de la primaria, como manda la jerarquia. */
.sk-swal-btn--peligro {
    background: transparent; color: #ff6b6b; border-color: rgba(255,70,70,.55);
    box-shadow: none;
}
.sk-swal-btn--peligro:hover { background: rgba(255,70,70,.12); }
.swal2-title,
.swal2-html-container,
.swal2-container .swal2-title {
    color: var(--sk-text, #fff) !important;
}
.swal2-timer-progress-bar {
    background: var(--sk-primary, #9d4edd) !important;
}
.swal2-toast .swal2-close {
    color: var(--sk-text, #fff) !important;
}
/* Inputs dentro de swal2 (ej. prompts) */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    background: var(--sk-tint, #0a0e27) !important;
    color: var(--sk-text, #fff) !important;
    border-color: var(--sk-border, rgba(184,87,255,.20)) !important;
}

/* ---------- FullCalendar v6 ----------
   FullCalendar inyecta su CSS por JS (index.global.min.js) con un look claro por
   defecto: fondo blanco, bordes grises y botones azules. Quedaba como un parche
   claro dentro de las cards oscuras en los dashboards de equipo y de jugador.

   Se tematiza por sus PROPIAS custom properties (--fc-*) en vez de pelear regla a
   regla con !important: es el punto de extensión que la librería expone, así que
   sobrevive a updates y cubre de una vez todas las vistas (mes, semana, lista). */
.fc {
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--sk-surface-2, #1a1f4b);
    --fc-neutral-text-color: var(--sk-text-muted, #9a9fc7);
    --fc-border-color: var(--sk-border, rgba(184,87,255,.20));

    --fc-button-text-color: var(--sk-text, #fff);
    --fc-button-bg-color: var(--sk-surface-2, #1a1f4b);
    --fc-button-border-color: var(--sk-border, rgba(184,87,255,.20));
    --fc-button-hover-bg-color: var(--sk-surface-3, #232a5e);
    --fc-button-hover-border-color: var(--sk-border-strong, rgba(184,87,255,.45));
    --fc-button-active-bg-color: var(--sk-primary, #9d4edd);
    --fc-button-active-border-color: var(--sk-primary, #9d4edd);

    --fc-event-bg-color: var(--sk-primary, #9d4edd);
    --fc-event-border-color: var(--sk-primary-600, #8a3fd0);
    --fc-event-text-color: #fff;

    --fc-today-bg-color: rgba(184, 87, 255, .10);
    --fc-highlight-color: rgba(184, 87, 255, .18);
    --fc-now-indicator-color: var(--sk-danger, #ff5d7a);
    --fc-list-event-hover-bg-color: var(--sk-surface-3, #232a5e);
    --fc-more-link-bg-color: var(--sk-surface-3, #232a5e);
    --fc-more-link-text-color: var(--sk-text, #fff);
    --fc-non-business-color: rgba(10, 14, 39, .35);

    color: var(--sk-text, #fff);
}
/* Título del toolbar y cabeceras de día: la librería los deja heredar y el
   contraste queda bajo sobre fondo oscuro. */
.fc .fc-toolbar-title { color: var(--sk-text, #fff); font-weight: 700; }
.fc .fc-col-header-cell-cushion { color: var(--sk-text-muted, #9a9fc7); font-weight: 600; text-decoration: none; }
.fc .fc-daygrid-day-number { color: var(--sk-text, #fff); text-decoration: none; }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--sk-text-muted, #9a9fc7); opacity: .55; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--sk-accent-soft, #d29bff); font-weight: 700; }
/* Botón activo/disabled del toolbar */
.fc .fc-button:disabled { opacity: .45; }
.fc .fc-button:focus { box-shadow: 0 0 0 .2rem rgba(157, 78, 221, .35) !important; }
/* Vista lista: filas, cabeceras de día y estado vacío */
.fc .fc-list { border-color: var(--sk-border, rgba(184,87,255,.20)); }
.fc .fc-list-day-cushion { background: var(--sk-surface-2, #1a1f4b); color: var(--sk-text, #fff); }
.fc .fc-list-event:hover td { background: var(--sk-surface-3, #232a5e); }
.fc .fc-list-event-title a { color: var(--sk-text, #fff); text-decoration: none; }
.fc .fc-list-empty { background: transparent; color: var(--sk-text-muted, #9a9fc7); }
/* Eventos: legibilidad del texto dentro del bloque */
.fc .fc-event, .fc .fc-event-main { color: #fff; }
.fc .fc-daygrid-event { border-radius: 6px; padding: 1px 4px; font-weight: 500; }

/* ---------- Marca pichangueo (lockup) ----------
   Va inline, no como <img>: el wordmark usa Audiowide y una fuente externa no
   se aplica dentro de un SVG cargado como imagen. Todo mide en `em`, así que el
   tamaño sale del font-size del contenedor (lo pone pw_lockup()). */
.pw-logo {
    display: inline-flex;
    /* gap 0: .sf-brand (topbar) mete 8px y el lockup ya maneja sus propios huecos. */
    gap: 0;
    /* baseline, no center: asi la "o" se apoya sola en la linea base del texto,
       igual que en logo.svg, sin el margin-top a ojo que habia antes. */
    align-items: baseline;
    text-decoration: none;
    white-space: nowrap;
    /* El desenfoque va en em: con 12px fijos, a 22px de fuente el halo era mas
       ancho que los trazos y el lockup se veia sucio. */
    filter: drop-shadow(0 0 .32em rgba(184, 87, 255, .38));
}
.pw-logo .pw-p {
    width: .947em; height: 1.317em; flex: 0 0 auto; overflow: visible;
    /* El asta larga de la P baja .277em bajo la linea base: es del diseno. */
    margin-bottom: -.277em; margin-right: .027em;
}
.pw-logo .pw-word {
    font-family: var(--sk-font-logo, 'Audiowide'), system-ui, sans-serif;
    font-weight: 400; font-size: 1em; line-height: 1;
    /* 0 a proposito: logo.svg no espacia, y con .02em la "o" no calzaba. */
    letter-spacing: 0; color: var(--sk-text, #fff);
}
.pw-logo .pw-o {
    width: .55em; height: .55em; flex: 0 0 auto;
    margin-left: -.083em; overflow: visible;
}
.pw-logo:hover .pw-word { color: var(--sk-text, #fff); }

/* ---------- Acciones de la convocatoria (dashboard del equipo) ----------
   El check de "confirmado" es un badge y los otros son botones: sin una caja
   comun, la X de quitar se veia mas grande que el check. */
.conv-accion {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: 8px;
    font-size: 1rem; line-height: 1; flex: 0 0 auto;
}
.conv-accion i { font-size: 1rem; line-height: 1; }