:root{
  --azul:#253373;        /* principal */
  --azul-osc:#1d295e;    /* hover/focus */
  --azul-claro:#e2e6f7;  /* fondos suaves */
  --sep:#031242;         /* línea separadora cabecera */
  --gris:#f8fafc;
  --borde:#e5e7eb;
  --texto:#0f172a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--texto);
  background:#fff;
}

/* ---- Layout de página para footer pegado abajo ---- */
.page{
  display:flex;
  flex-direction:column;

  /* Fallback + unidades modernas para móviles */
  min-height:100vh;   /* fallback navegadores antiguos */
  min-height:100svh;  /* small viewport (iOS 15+) */
  min-height:100dvh;  /* dynamic viewport (iOS/Android modernos) */

  overflow-x:hidden;  /* evita scroll horizontal accidental */
}
.header{ /* Cabecera fija arriba */
  position:sticky; top:0; z-index:10;
  background:var(--azul); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
}
.header__left{display:flex; align-items:center; gap:.6rem}
.header__icon{font-size:1.25rem}
.header__title{font-weight:700;letter-spacing:.2px}

/* Línea separadora de cabecera */
.header-sep{height:4px; background:var(--sep);}

/* Menú hamburguesa (solo en calendario) */
.header__menu-btn{
  display:flex; flex-direction:column; gap:3px;
  background:transparent; border:0; cursor:pointer; padding:6px;
}
.hamb{width:22px; height:2px; background:#fff; border-radius:2px; display:block}

/* Dropdown */
.menu{
  position:absolute; right:1rem; top:calc(56px + 4px); /* altura header + separador */
  background:#fff; color:#111; border:1px solid var(--borde);
  border-radius:.6rem; box-shadow:0 10px 20px rgba(0,0,0,.08);
  padding:.5rem; display:none; min-width:220px;
}
.menu.open{display:block}
.menu__item{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem; border-radius:.45rem;
  color:#111; text-decoration:none; font-weight:500;
}
.menu__item i{width:18px; text-align:center; opacity:.8}
.menu__item:hover{background:var(--azul-claro)}

/* Contenido principal */
.container{max-width:960px; margin:1.25rem auto; padding:0 1rem; flex:1}

/* Card */
.card{
  background:#fff; border:1px solid var(--borde);
  border-radius:1rem; padding:1.25rem;
  box-shadow:0 8px 24px rgba(0,0,0,.03)
}
.card__title{margin:0 0 1rem 0; font-size:1.25rem; display:flex; align-items:center; gap:.5rem}

/* Formulario */
.form{display:grid; gap:1rem}
.form__group{display:grid; gap:.4rem}
label{font-size:.92rem; color:#334155; display:flex; align-items:center; gap:.45rem}
.input{
  border:1px solid #d1d5db; border-radius:.55rem;
  padding:.65rem .85rem; font-size:1rem; width:100%;
}
.input:focus{outline:3px solid var(--azul-claro); border-color:var(--azul)}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  border:0; border-radius:.65rem; padding:.75rem 1.05rem; font-weight:700; cursor:pointer
}
.btn--primary{background:var(--azul); color:#fff}
.btn--primary:hover{background:var(--azul-osc)}
.btn i{font-size:.95rem}

.alert{padding:.65rem .85rem; border-radius:.55rem; margin-bottom:.85rem; border:1px solid #fecaca; background:#fee2e2; color:#b91c1c}
.muted{color:#6b7280; font-size:.9rem; margin-top:.75rem}

/* Footer SIEMPRE abajo */
.footer{
  background:var(--azul); color:#fff; padding:1rem; text-align:center; font-weight:700;
  margin-top:auto;
}

/* Responsive */
@media (max-width: 640px){
  .header__title{font-size:1rem}
  .header__icon{font-size:1rem}
}
/* ===== CALENDARIO ===== */
.calendar {
  background:#fff; border:1px solid var(--borde); border-radius:1rem; overflow:hidden;
}
.calendar__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; background:var(--azul-claro);
  border-bottom:1px solid var(--borde);
}
.calendar__title { font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:.6rem }
.calendar__nav { display:flex; gap:.35rem }
.icon-btn {
  background:#fff; border:1px solid var(--borde); border-radius:.6rem;
  padding:.4rem .55rem; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem
}
.icon-btn:hover { background:#f9fafb }
.icon-btn:disabled { opacity:.5; cursor:not-allowed }

.weekdays {
  display:grid; grid-template-columns:repeat(7,1fr);
  background:#fafafa; border-bottom:1px solid var(--borde);
}
.weekday {
  text-align:center; padding:.5rem 0; font-size:.85rem; font-weight:700; letter-spacing:.3px;
  border-right:1px solid #f0f0f0;
}
.weekday:last-child { border-right:0 }

/* Resalte columna del día actual (borde superior e inferior más marcados) */
.weekday--today { outline:2px solid var(--azul-osc); outline-offset:-2px; }

/* Sábados y domingos con tono suave */
.weekday--sab, .weekday--dom { background:#f6f7fd }

.grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:#eaeaea;
}
.cell {
  background:#fff; min-height:100px; padding:.6rem; position:relative;
  display:flex; flex-direction:column; gap:.35rem;
}
.cell--weekend { background:#fbfbff } /* sutil */
.cell--libre { background:#ffffff }   /* explícito en blanco */
.cell--today-col { box-shadow: inset 0 0 0 2px var(--azul-claro) }

/* Esquinas de información */
.cell__dow {
  position:absolute; top:.35rem; right:.45rem;
  font-size:.7rem; color:#64748b; font-weight:700;
}
.cell__day {
  font-size:1rem; font-weight:800; color:#334155;
}

/* Badges de franja */
.badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; padding:.22rem .5rem; border-radius:999px; border:1px solid var(--borde);
}
.badge--M { background:#eaf3ff }
.badge--T { background:#fff2e5 }
.badge--N { background:#f1f2ff }
.badge i { font-size:.8rem }

/* Estado global del día según no disponibles */
.cell--ok    { border:2px solid #22c55e }   /* verde */
.cell--alert { border:2px solid #ef4444 }   /* rojo */

/* Contadores */
.counts { display:flex; gap:.5rem; flex-wrap:wrap; font-size:.8rem; color:#334155 }
.pill { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border-radius:.5rem; background:#f4f5f7; }
.pill--ok { background:#e8f9ee; color:#166534 }
.pill--bad { background:#feecec; color:#991b1b }

/* Modal */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  display:none; align-items:center; justify-content:center; padding:1rem; z-index:50;
}
.modal.open { display:flex }
.modal__card {
  width:min(900px, 100%); background:#fff; border-radius:1rem; overflow:hidden; border:1px solid var(--borde)
}
.modal__head { padding:1rem; background:var(--azul-claro); border-bottom:1px solid var(--borde); display:flex; justify-content:space-between; align-items:center }
.modal__title { font-weight:800 }
.modal__body { padding:1rem; display:grid; gap:1rem }
.list { border:1px solid var(--borde); border-radius:.8rem; overflow:hidden }
.list__head { padding:.6rem .8rem; font-weight:700 }
.list__item { padding:.55rem .8rem; border-top:1px solid #f1f1f1; display:flex; align-items:center; gap:.5rem }
.dot { width:.6rem; height:.6rem; border-radius:999px; display:inline-block }
.dot--ok { background:#16a34a }
.dot--pend { background:#f59e0b }
.dot--bad { background:#ef4444 }

/* Form en modal */
.inline-form { display:grid; gap:.5rem; align-items:end }
.inline-form select, .inline-form input, .inline-form button { height:2.4rem }
/* === GRID robusto y responsivo === */
.calendar .grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap:.5rem;
  width:100%;
  overflow:hidden;
}

.cell{
  position:relative;
  border:1.5px solid var(--borde, #d9dee7);
  border-radius:.6rem;
  padding:.5rem .55rem .6rem;
  min-height:90px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.cell--weekend{ background:linear-gradient(180deg, rgba(37,51,115,0.05), rgba(37,51,115,0.03)); }
.cell--libre{ background:#fff; }
.cell--ok{ background:linear-gradient(180deg, rgba(34,197,94,0.12), rgba(34,197,94,0.06)); }
.cell--alert{ background:linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06)); }

/* Día actual: borde negro (tiene prioridad) */
.cell--today{ border:2.5px solid #000 !important; box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; }

/* Resalte de cabecera (ya existente) */
.weekday{ text-align:center; font-weight:600; padding:.35rem 0; border-bottom:1px solid var(--borde,#d9dee7); }
.weekday--sab, .weekday--dom{ background:rgba(3,18,66,0.04); }
.weekday--today{ outline:2px solid #253373; outline-offset:-2px; }

/* Número de día arriba a la izquierda */
.cell__day{
  font-weight:700;
  font-size:1.05rem;
  line-height:1;
}

/* Fila de franja + estado */
.cell__row--badge{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}

/* Badges de franja */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .45rem; border-radius:999px;
  font-size:.84rem; font-weight:600;
  background:#eef2ff; color:#253373; border:1px solid rgba(37,51,115,.18);
}
.badge--M i, .badge--T i, .badge--N i{ opacity:.85; }

/* Pills contadores */
.counts{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .45rem; border-radius:999px;
  border:1px solid var(--borde,#d9dee7);
  font-size:.82rem; background:#fff;
}
.pill--ok{ border-color:rgba(22,163,74,.35); }
.pill--bad{ border-color:rgba(239,68,68,.35); }

/* Pendientes en naranja con brillo */
.pill--pend{
  border-color:rgba(245,158,11,.5);
  background:rgba(245,158,11,.08);
  box-shadow:0 0 10px 0 rgba(245,158,11,.35);
}
.pill--pend i,
.pill--pend-icon i{ color:#d97706; }

/* Icono-only móvil para pendientes */
.only-mobile{ display:none; }
.only-desktop{ display:inline-flex; }

/* Libre */
.counts--libre{
  opacity:.9; display:inline-flex; align-items:center; gap:.45rem; font-weight:600;
}

/* Estado check/x colores (solo iconos) */
.cell__row--badge .fa-check{ color:#16a34a; }
.cell__row--badge .fa-xmark{ color:#ef4444; }

/* Gestión de textos segun viewport */
.text-full{ display:inline; }   /* textos completos (escritorio) */
.text-abbr{ display:none; font-weight:700; } /* D/T/N (móvil) */

/* === RESPONSIVE === */
@media (max-width: 640px){
  .calendar .grid{ gap:.35rem; }
  .cell{ padding:.45rem .45rem .55rem; min-height:78px; }

  /* Mostrar abreviaturas D/T/N y ocultar textos largos */
  .text-full{ display:none; }
  .text-abbr{ display:inline; }

  /* Compactar contadores: ocultar unidades "disp.", "no disp." */
  .unit{ display:none; }
  .pill{ font-size:.78rem; padding:.12rem .4rem; }

  /* Pendientes: mostrar solo icono con glow */
  .only-desktop{ display:none; }
  .only-mobile{ display:inline-flex; }

  /* Evitar desbordes */
  .badge{ font-size:.8rem; padding:.12rem .4rem; }
  .cell__day{ font-size:1rem; }
}

/* Evitar que la rejilla se salga en pantallas estrechas */
.container, .calendar{ width:100%; overflow:hidden; }
/* ===== Layout de página: footer al fondo sin tapar contenido ===== */
.page{
  min-height:100dvh;              /* usa viewport real en móvil */
  display:flex; flex-direction:column;
}
.container{ flex:1 1 auto; }
.footer{ margin-top:auto; position:static; }

/* Por si antes estaba fixed, garantizamos que el contenido no quede debajo */
.container{ padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* ===== Calendario: robusto en móvil ===== */

/* En móvil forzamos alturas homogéneas por fila.
   La altura escala con el ancho de celda: uniforme y sin “saltos”. */
@media (max-width: 640px){
  .calendar .grid{
    grid-template-columns: repeat(7, minmax(0,1fr));
    grid-auto-rows: 1fr;                   /* base */
  }

  /* truco: cada cell tiene altura fija relativa al ancho (aspect-ratio),
     p.ej. 1 : 1.15 (ajústalo a tu gusto) */
  .cell{
    padding:.35rem .35rem .4rem;
    aspect-ratio: 1 / 1.15;               /* <- hace que todas midan igual */
    overflow:hidden;                       /* evita que el contenido “empaste” */
    display:flex; flex-direction:column; gap:.25rem;
  }

  /* Tipos y paddings más compactos */
  .cell__day{ font-size:.95rem; }
  .badge{ font-size:.72rem; padding:.12rem .35rem; }
  .counts{ gap:.25rem; }

  /* Una sola fila de contadores (3 columnas iguales) */
  .counts{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    align-items:center;
  }
  .pill{
    justify-content:center;
    padding:.1rem .3rem;
    font-size:.75rem;
    min-width:0;
  }
  .pill .unit{ display:none; }       /* quita “disp./no disp.” */
  .only-desktop{ display:none !important; }
  .only-mobile{ display:inline-flex !important; justify-content:center; }

  /* D/T/N abreviado y sin texto largo */
  .text-full{ display:none !important; }
  .text-abbr{ display:inline !important; }

  /* Evitar que iconos/badges empujen el layout */
  .badge i, .pill i{ flex:0 0 auto; }
  .badge, .pill{ white-space:nowrap; }

  /* Borde de hoy más fino para no “ensanchar” visualmente la celda */
  .cell--today{ border-width:2px !important; }

  /* Fines de semana se siguen diferenciando, pero muy suave */
  .cell--weekend{ background:linear-gradient(180deg, rgba(37,51,115,0.035), rgba(37,51,115,0.02)); }

  /* Si aún así algo se pasara, que no cree scroll horizontal */
  .calendar, .calendar .grid{ overflow:hidden; }
  body{ overflow-x:hidden; }
}

/* ===== Extra: estados suaves (siguen valiendo también en móvil) ===== */
.cell--ok{ background:linear-gradient(180deg, rgba(34,197,94,0.12), rgba(34,197,94,0.06)); }
.cell--alert{ background:linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06)); }

/* Pendientes naranja con glow visible también en móvil */
.pill--pend{
  border-color:rgba(245,158,11,.5);
  background:rgba(245,158,11,.08);
  box-shadow:0 0 10px 0 rgba(245,158,11,.35);
}
.pill--pend-icon i{ color:#d97706; }

/* Evita micro-descuadres por box model */
*, *::before, *::after{ box-sizing:border-box; }
/* Layout para que el footer no tape contenido */
.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.container { flex: 1 0 auto; }
.footer   { flex-shrink: 0; }

/* Cabecera calendario */
.calendar { overflow: visible; }
.weekdays, .grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .5rem;
}

/* Celda base */
.cell {
  background: #fff;
  border-radius: .5rem;
  padding: .5rem .5rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 70px; /* altura mínima segura */
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.cell--weekend { background: #fafafa; }
.cell--libre   { opacity: .85; }
.cell--today   { outline: 2px solid #000; }
.cell--today-col { box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }

.cell--ok    { /* fondo suave cuando OK */ background: #f6fff7; }
.cell--alert { background: #fff6f6; }
.cell--pend  { background: #fffaf1; }

/* Cabecera de la celda: número + zona derecha */
.cell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cell__day {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.cell__right {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Línea de badge para escritorio */
.cell__row--badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
}
.badge--M i { /* opcional estilos */ }
.badge--T i { /* opcional estilos */ }
.badge--N i { /* opcional estilos */ }

/* Estado (iconos) */
.state { font-size: 1rem; line-height: 1; }
.state--ok  { color: #17a34a; }   /* verde */
.state--bad { color: #dc2626; }   /* rojo */
.state--pend{ color: #f59e0b; }   /* naranja */

/* Pills (sólo desktop, se ocultan en móvil) */
.counts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin-top: .1rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .8rem;
  background: #f3f4f6;
}
.pill--ok  { background: #e7f9ea; }
.pill--bad { background: #fdecec; }
.pill--pend{ background: #fff1db; }

/* Accesibilidad visual */
.weekday--sab, .weekday--dom { background: rgba(0,0,0,.03); }
.weekday--today { outline: 2px solid #000; }

/* RESPONSIVE */
.only-desktop { display: initial; }
.only-mobile  { display: none; }

/* MÓVIL: simplificación total */
@media (max-width: 640px) {
  .calendar__header { position: sticky; top: 0; z-index: 5; background: #fff; padding-bottom: .5rem; }
  .weekdays { position: sticky; top: 48px; z-index: 4; background: #fff; }

  .cell {
    padding: .45rem .45rem .5rem;
    gap: .25rem;
    min-height: 56px;   /* más compacto */
  }

  /* Sólo icono de franja (a la derecha del día) y estado; sin letras ni contadores */
  .only-desktop { display: none !important; }
  .only-mobile  { display: inline-flex !important; }

  .badge.only-mobile { gap: .25rem; }
  .badge.only-mobile .text-full,
  .badge.only-mobile .text-abbr { display: none; }

  .counts { display: none !important; } /* fuera números en móvil */
}
/* Fondos por capacidad */
.cell--ok {
  /* degradado verde suave */
  background: linear-gradient(180deg, #f0fff4 0%, #e6ffef 60%, #ddffe9 100%);
}
.cell--alert {
  /* degradado rojo suave */
  background: linear-gradient(180deg, #fff5f5 0%, #ffeaea 60%, #ffe2e2 100%);
}

/* Pendiente solo como texto (sin cambiar el fondo) */
.status--pend {
  background: transparent;      /* sin pastilla */
  color: #b45309;               /* naranja en el texto */
  font-weight: 800;
  padding: 0;                   /* quitamos padding de pastilla */
}
.status--pend .state {          /* icono en naranja también */
  color: #b45309;
}

/* Opcional: si quieres que OK/BAD sigan viéndose como “pill” */
.status--ok   { background:#e7f9ea; color:#166534; }
.status--bad  { background:#fdecec; color:#b91c1c; }

/* ⚠️ Ya no usaremos .cell--pend para fondo */