/* ============================================================================
   Sala de Juntas (SJ) - Mexicana MRO
   Identidad institucional sobre zeus-base.css (misma paleta que TAE).
   Colores de estado del calendario (decision de Gerardo, 2026-10-05):
     verde = confirmada · amarillo = pendiente de confirmar · gris = "Ocupada"
   El color nunca comunica solo: cada bloque lleva texto e icono de estado.
   ============================================================================ */

:root {
    --sj-navy:      #0b2a4a;
    --sj-navy-dark: #071d34;
    --sj-line:      #dee2e6;
    --sj-bg:        #f5f7fa;
    --sj-ok-bg:     #d6f5e0;
    --sj-ok-bd:     #1e8e3e;
    --sj-ok-tx:     #0f5223;
    --sj-pend-bg:   #fff3c4;
    --sj-pend-bd:   #c99a06;
    --sj-pend-tx:   #5c4500;
    --sj-gris-bg:   #e4e7eb;
    --sj-gris-bd:   #7b8794;
    --sj-gris-tx:   #323f4b;
    --sj-hora:      48px;          /* alto de una hora en el calendario */
}

/* La navbar es sticky: que no tape lo que recibe foco o se desplaza a la vista. */
html { scroll-padding-top: 80px; }

body {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--sj-bg);
}

/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.sj-navbar { background-color: var(--sj-navy); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.sj-navbar .navbar-brand, .sj-navbar .nav-link { color: #fff; }
.sj-navbar .nav-link:hover, .sj-navbar .nav-link:focus { color: #cfe2ff; }
.sj-navbar .navbar-toggler { border-color: rgba(255,255,255,.45); padding: .4rem .6rem; }
.sj-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.sj-navbar .dropdown-menu { --bs-dropdown-link-color: #212529; }
/* El menú no se parte en dos renglones; el nombre largo del usuario se recorta. */
.sj-navbar .nav-link { white-space: nowrap; }
.sj-usuario { display: inline-block; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sj-brand { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .95rem; }
.sj-badge { background: #ffc107; color: #212529; font-size: .7rem; border-radius: 1rem; padding: .1rem .45rem; margin-left: .3rem; font-weight: 700; }

.sj-main { padding-top: 1.25rem; padding-bottom: 2rem; }
/* Los avisos van debajo de la navbar fija, no encima del menú */
#toast-container.toast-top-right { top: 72px; }
.sj-footer { border-top: 1px solid var(--sj-line); }

.sj-page-title { font-size: 1.35rem; font-weight: 600; color: var(--sj-navy); margin-bottom: .25rem; }
.sj-sub { color: #52606d; margin-bottom: 1rem; }

.sj-card { background: #fff; border: 1px solid var(--sj-line); border-radius: .5rem; margin-bottom: 1rem; }
.sj-card-header { padding: .75rem 1rem; border-bottom: 1px solid var(--sj-line); font-weight: 600; color: var(--sj-navy); }
.sj-card-body { padding: 1rem; }

/* Targets tactiles de 44px minimo */
.btn { min-height: 2.5rem; }
.btn-sm { min-height: 2rem; }

/* ─── Chips de estado ─────────────────────────────────────────────────────── */
.sj-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; border: 1px solid; white-space: nowrap; }
.sj-chip-ok   { background: var(--sj-ok-bg);   border-color: var(--sj-ok-bd);   color: var(--sj-ok-tx); }
.sj-chip-pend { background: var(--sj-pend-bg); border-color: var(--sj-pend-bd); color: var(--sj-pend-tx); }
.sj-chip-off  { background: var(--sj-gris-bg); border-color: var(--sj-gris-bd); color: var(--sj-gris-tx); }

/* ─── Login ───────────────────────────────────────────────────────────────── */
.sj-login-body { background: var(--sj-bg); min-height: 100vh; }
.sj-login-split { min-height: 100vh; display: flex; flex-direction: column; }
.sj-login-foto {
    background: linear-gradient(rgba(7,29,52,.55), rgba(7,29,52,.75)), url('https://zeus.mxamro.com/assets/img/plane.jpg') center/cover no-repeat;
    color: #fff; padding: 2.5rem 1.5rem; min-height: 180px; display: flex; align-items: flex-end;
}
.sj-login-tagline h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.sj-login-tagline p { margin: .25rem 0 0 0; opacity: .9; }
.sj-login-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.sj-login-card, .sj-login-card-solo { background: #fff; border: 1px solid var(--sj-line); border-radius: .75rem; padding: 2rem 1.75rem; width: 100%; max-width: 420px; box-shadow: 0 6px 24px rgba(11,42,74,.08); }
.sj-login-logo { max-height: 48px; }
.sj-login-title { font-size: 1.35rem; font-weight: 700; color: var(--sj-navy); }
.sj-login-sub { color: #52606d; margin: 0; }
.sj-login-pie { color: #7b8794; font-size: .8rem; margin-top: 1.25rem; }
.sj-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
@media (min-width: 992px) {
    .sj-login-split { flex-direction: row; }
    .sj-login-foto { flex: 1.2; min-height: 100vh; align-items: flex-end; padding: 3rem; }
    .sj-login-panel { flex: 1; }
}

/* ─── Calendario ──────────────────────────────────────────────────────────── */
.sj-cal-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.sj-cal-toolbar .sj-cal-titulo { font-weight: 600; color: var(--sj-navy); font-size: 1.05rem; margin: 0 .5rem; min-width: 12rem; }
.sj-leyenda { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; margin-bottom: .5rem; }

.sj-cal { border: 1px solid var(--sj-line); border-radius: .5rem; background: #fff; overflow: auto; max-height: 72vh; position: relative; }
.sj-cal-grid { display: grid; position: relative; min-width: 100%; }
/* Los encabezados son celdas de la misma rejilla (no un contenedor): por eso
   los selectores van compuestos (.sj-cal-head.sj-col-h), no descendientes. */
.sj-cal-head { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--sj-line); }
.sj-col-h { padding: .5rem .4rem; font-weight: 600; font-size: .85rem; text-align: center; color: var(--sj-navy); border-left: 1px solid var(--sj-line); line-height: 1.25; }
.sj-col-h small { display: block; font-weight: 400; font-size: .75rem; color: #7b8794; margin-top: .1rem; }
.sj-col-h.sj-hoy { background: #eef4ff; }
.sj-gutter { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid var(--sj-line); }
.sj-cal-head.sj-gutter { z-index: 4; }
.sj-hora-et { height: var(--sj-hora); font-size: .72rem; color: #7b8794; text-align: right; padding: 0 .35rem; transform: translateY(-.5em); }
.sj-col { position: relative; border-left: 1px solid var(--sj-line); cursor: pointer;
          background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sj-hora) - 1px), var(--sj-line) calc(var(--sj-hora) - 1px), var(--sj-line) var(--sj-hora)); }
.sj-col:hover { background-color: #fafcff; }
.sj-col.sj-pasado { cursor: default; }
.sj-ahora { position: absolute; left: 0; right: 0; height: 2px; background: #d64545; z-index: 2; pointer-events: none; }
.sj-ahora::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #d64545; }

.sj-bloque { position: absolute; left: 3px; right: 3px; border-radius: .35rem; border: 1px solid; border-left-width: 4px; padding: .15rem .35rem; font-size: .76rem; line-height: 1.2; overflow: hidden; z-index: 1; text-align: left; }
.sj-bloque.sj-verde    { background: var(--sj-ok-bg);   border-color: var(--sj-ok-bd);   color: var(--sj-ok-tx); }
.sj-bloque.sj-amarillo { background: var(--sj-pend-bg); border-color: var(--sj-pend-bd); color: var(--sj-pend-tx); }
.sj-bloque.sj-gris     { background: var(--sj-gris-bg); border-color: var(--sj-gris-bd); color: var(--sj-gris-tx); cursor: default; }
.sj-bloque.sj-propuesta { border-style: dashed; }
.sj-bloque.sj-mia { box-shadow: 0 0 0 2px rgba(13,110,253,.35); }
.sj-bloque .sj-b-tema { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sj-bloque .sj-b-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
a.sj-bloque { text-decoration: none; }
a.sj-bloque:hover { filter: brightness(.97); }
.sj-cal-vacio { padding: 2rem; text-align: center; color: #52606d; }

/* ─── Formularios ─────────────────────────────────────────────────────────── */
.sj-disp { font-size: .9rem; padding: .5rem .75rem; border-radius: .4rem; display: none; }
.sj-disp.ok   { display: block; background: var(--sj-ok-bg);   color: var(--sj-ok-tx); }
.sj-disp.mal  { display: block; background: #fde2e2; color: #8a1c1c; }
.sj-sala-info { font-size: .85rem; color: #52606d; }
.sj-sala-foto { max-width: 100%; max-height: 180px; border-radius: .4rem; border: 1px solid var(--sj-line); }
.sj-equipo { display: inline-flex; align-items: center; gap: .25rem; background: #eef2f6; border-radius: 1rem; padding: .1rem .5rem; font-size: .78rem; margin: .1rem; }

.sj-dato dt { color: #52606d; font-weight: 500; font-size: .85rem; }
.sj-dato dd { margin-bottom: .6rem; }
.sj-propuesta-box { background: var(--sj-pend-bg); border: 1px dashed var(--sj-pend-bd); border-radius: .5rem; padding: .75rem 1rem; }
.sj-historial { list-style: none; padding: 0; margin: 0; }
.sj-historial li { border-left: 3px solid var(--sj-line); padding: .25rem 0 .6rem .75rem; position: relative; }
.sj-historial li::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 11px; height: 11px; border-radius: 50%; background: var(--sj-navy); }
.sj-historial .sj-h-meta { font-size: .8rem; color: #7b8794; }

/* Casillas reales (asp:CheckBox con InputAttributes, no CssClass: con CssClass
   Bootstrap pintaba una casilla falsa en el span — leccion de TAE R04). */
.form-check-input { cursor: pointer; }
/* Cada casilla con su texto como una sola pieza: no se separan al ajustar la línea. */
ul.sj-cbl { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
ul.sj-cbl li { white-space: nowrap; }
.sj-cbl input[type=checkbox] { margin-right: .35rem; width: 1.05rem; height: 1.05rem; vertical-align: -.15rem; }
.sj-sala-foto { display: block; }