:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --accent:#2563eb;

  --radius:14px;
  --shadow:0 10px 30px rgba(2,6,23,.08);

  /* Colores turnos */
  --c-m:#fde047; /* amarillo */
  --c-t:#22c55e; /* verde */
  --c-n:#3b82f6; /* azul */
  --c-d:#ffffff; /* blanco */

  --content-max:1400px;


/* ===== Tipografía (centralizada) ===== */
/* Vista AÑO */
--fs-year-num:10pt;
--fs-year-shift:7pt;
--fs-year-tag:6pt;   /* 6pt menor que num/shift */
--year-circle-size:4.2mm;

/* Vista MES */
--fs-month-num:10pt;
--fs-month-shift:8pt;
--fs-month-tag:7pt;  /* 4pt menor que num/shift */

/* Vista SEMANA */
  /* Semana: un poco más grande que antes (para mejor legibilidad) */
  --fs-week-num:13px;
  --fs-week-shift:10px;
  --fs-week-tag:10px;

/* Detalle / modal día */
--fs-modal-title:16px;
--fs-modal-body:12px;

/* Pesos (bold/regular) sin cambiar tamaños */
--fw-num:800;
--fw-shift:700;
--fw-tag:600;

/* Espaciados adaptativos */
--gap-grid:6px;
--day-padding:10px;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ===== Header / Menú superior ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,247,251,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.site-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
}
.site-brand a{
  text-decoration:none;
  color:var(--text);
  font-weight:900;
  letter-spacing:.2px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow);
  padding:8px 10px;
  flex-wrap:wrap;
}
.control{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.control label{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
select, input{
  font:inherit;
}
select{
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  padding:0 10px;
  background:#fff;
  min-width:150px;
  max-width:100%;
}

/* Select dentro de modales (marcajes) */
.select{
  height:38px;
  border-radius:12px;
  padding:0 12px;
  min-width:240px;
  max-width:100%;
}

/* Accesibilidad: oculto visualmente */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.btn{
  appearance:none;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow);
}
.btn.primary{
  border-color:transparent;
  background:var(--accent);
  color:#fff;
}
.btn.danger{
  background:#ef4444;
  color:#fff;
  border-color:transparent;
}
.btn:active{transform:translateY(1px)}
.user-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:var(--muted);
  font-size:13px;
}

/* ===== Layout ===== */
.wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:14px 12px 24px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

/* ===== Calendario ===== */
.calendar-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.calendar-title h1{
  margin:0;
  font-size:18px;
}
.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.nav .btn{box-shadow:none}

#viewContainer[data-view="year"] .year-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1100px){
  #viewContainer[data-view="year"] .year-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 720px){
  #viewContainer[data-view="year"] .year-grid{grid-template-columns:1fr;}
}

.month-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:#fff;
}
.month-card h2{
  margin:0 0 8px;
  font-size:8pt;
  letter-spacing:.2px;
}
.mini-dow{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:4px;
  margin-bottom:4px;
  color:var(--muted);
  font-size:5pt;
  font-weight:800;
}
.minigrid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:4px;
}
.mday{
  border:1px solid var(--line);
  border-radius:10px;
  padding:5px;
  min-height:54px;
  min-width:0;
  background:#fff;
}
.mday.blank{background:transparent;border:0}
.mday .mini-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-grid);
}
.mday .mini-num{font-weight:var(--fw-num);font-size:var(--fs-year-num)}
.mday .mini-shift{
  font-weight:var(--fw-shift);
  font-size:var(--fs-year-shift);
  border:1px solid var(--line);
  border-radius:999px;
  padding:1px 6px;
  background:#fff;
}
.mday .mini-tags{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.mday .mini-tag{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  border:1px solid var(--line);
  border-radius:999px;
  padding:1px 6px;
  font-weight:var(--fw-tag);
  font-size:var(--fs-year-tag); /* 6 puntos menor que mini-num/mini-shift */
  line-height:1.12;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Vista mes / semana: grid grande */
.month-view .dow,
.week-view .dow{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:var(--gap-grid);
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.month-view .grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
}
.week-view .grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
}

.day{
  border:1px solid var(--line);
  border-radius:14px;
  min-height:96px;
  padding:8px;
  background:#fff;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.day.blank{background:transparent;border:0}

/* Semana: un poco más alta que mes para que quepa mejor el texto */
#viewContainer[data-view="week"] .day{ min-height:112px; }
.day .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.day .num{font-weight:var(--fw-num);font-size:var(--fs-month-num)}
.day .shift{
  font-weight:var(--fw-shift);
  font-size:var(--fs-month-shift);
  border-radius:999px;
  padding:2px 8px;
  border:1px solid var(--line);
  background:#fff;
}
.tags{
  /* Compacto y en 2 columnas para que quepan los cupos máximos sin
     hacer crecer visualmente el día (mes/semana mantienen el mismo alto). */
  display:flex;
  flex-direction:column;
  
  gap:2px;
}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  border:1px solid var(--line);
  border-radius:999px;
  padding:1px 6px;
  font-weight:var(--fw-tag);
  font-size:8pt;
  line-height:1.1;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Tamaños por vista solicitados */
#viewContainer[data-view="month"] .tag{ font-size:var(--fs-month-tag); padding:1px 6px; } /* 4 puntos menor que 12pt */
#viewContainer[data-view="week"] .day .num{ font-size:var(--fs-week-num); }
#viewContainer[data-view="week"] .day .shift{ font-size:var(--fs-week-shift); padding:1px 7px; }
#viewContainer[data-view="week"] .tag{ font-size:var(--fs-week-tag); padding:1px 6px; }
#viewContainer[data-view="year"] .mday .mini-tag{ font-size:var(--fs-year-tag); }

/* Semana: casillas algo más altas para mejorar legibilidad */
#viewContainer[data-view="week"] .day{ min-height:112px; }

/* Colores turno */
.shift.M, .mini-shift.M{ background:var(--c-m); }
.shift.T, .mini-shift.T{ background:var(--c-t); color:#052e16; }
.shift.N, .mini-shift.N{ background:var(--c-n); color:#eff6ff; border-color:rgba(255,255,255,.25); }
.shift.D, .mini-shift.D{ background:var(--c-d); }

/* Clickable */
.day.clickable, .mday.clickable{ cursor:pointer; }
.day.clickable:hover, .mday.clickable:hover{ outline:2px solid rgba(37,99,235,.25); }

/* ===== Modales ===== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.55);
  z-index:100;
}
.modal.open{ display:flex; }
.modal-card{
  width:min(560px, 100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.modal-head h3{ margin:0; font-size:var(--fs-modal-title); }
.modal-close{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width: 560px){
  .form-grid.two{ grid-template-columns:1fr 1fr; }
}
.field label{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  margin:6px 0 4px;
}
.field input, .field select{
  width:100%;
  max-width:100%;
  height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 12px;
  font-size:14px;
}
.helper{font-size:var(--fs-modal-body);color:var(--muted);margin:6px 0 0}
.error{color:#b91c1c;font-weight:800;font-size:12px;margin-top:8px;display:none}
.success{color:#065f46;font-weight:800;font-size:12px;margin-top:8px;display:none}
.actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.actions-row .btn{box-shadow:none}

/* ===== Impresión (DIN-A4) ===== */


/* ===== Responsive: proporciones exactas (tablet / móvil) ===== */
@media (max-width: 1024px){
  :root{
    --gap-grid:5px;
    --day-padding:8px;
  }
  .month-view .grid, .week-view .grid{ gap:var(--gap-grid); }
  .day{ padding:var(--day-padding); }
  .mday{ padding:6px; }
}
@media (max-width: 640px){
  :root{
    --gap-grid:4px;
    --day-padding:7px;
  }
  .month-view .dow, .week-view .dow{ gap:4px; }
  .month-view .grid, .week-view .grid{ gap:var(--gap-grid); }
  .day{ padding:var(--day-padding); border-radius:12px; }
  .mday{ padding:5px; border-radius:10px; }
  /* Evita que el menú superior “rompa” en 2 líneas muy pronto */
  .site-header__inner{ gap:8px; }
}


@media print{
  /* Variables específicas para impresión A4 */
  :root{
    --fs-year-num:6pt;
    --fs-year-shift:6pt;
    --fs-year-tag:3pt;
    --year-circle-size:4mm;

    --fs-month-num:10pt;
    --fs-month-shift:10pt;
    --fs-month-tag:7pt;

    --fs-week-num:8px;
    --fs-week-shift:8px;
    --fs-week-tag:5px;

    --gap-grid:3px;
    --day-padding:6px;
  }

  /* Ajuste fino para que el AÑO completo quepa en 1 sola hoja A4 */
  /* En vertical (portrait) maximizamos el área útil y comprimimos huecos */
  /* Margen mínimo para ganar área útil */
  @page{ size: A4 portrait; margin: 2mm; }

  /* Ocultar UI no relevante */
  header.site-header,
  .calendar-title .nav,
  .helper,
  .error,
  .modal{ display:none !important; }

  /* En impresión, evita depender de vh (algunos navegadores “saltan” a 2 páginas) */
  html, body{ height:auto !important; }
  body{ background:#fff !important; }
  .wrap{ max-width:none; padding:0 !important; }
  .card{ border:0 !important; box-shadow:none !important; padding:0 !important; }

  /* Cabecera en la página de impresión (print_year.php) */
  .print-top{ margin: 0 0 1mm 0 !important; padding:0 !important; }
  .print-top h1{ font-size:9pt !important; margin:0 !important; }
  .print-top .sub{ font-size:6pt !important; margin:0 !important; }

  /* Ajustar para que quepan 12 meses en A4 vertical (3 columnas x 4 filas) */
  .calendar-title h1{ font-size:11pt !important; }

  /* Menor separación entre meses */
  #viewContainer[data-view="year"] .year-grid{
    /* 12 meses en 3x4 para emplear mejor el A4 */
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows:repeat(4, minmax(0, 1fr)) !important;
    /* Ocupa el alto imprimible real (A4: 297mm; márgenes: 2mm arriba/abajo => 293mm)
       Restamos una cabecera muy compacta (~9mm) para garantizar 1 sola página */
    height: 284mm !important;
    align-items:stretch !important;
    /* espacio entre meses: lo mínimo posible */
    gap: 0mm !important;
    page-break-inside: avoid !important;
  }

  /* Contenedor de la vista: evita desbordes que generen segunda página */
  #viewContainer[data-view="year"]{ overflow:hidden !important; }

  /* Mes */
  /* Mes: hacerlo lo más compacto posible por fuera y lo más grande posible por dentro */
  .month-card{ border-radius:4px !important; padding:0.1mm !important; display:flex !important; flex-direction:column !important; height:100% !important; page-break-inside: avoid !important; }
  .month-card h2{ font-size:8pt; margin:0 0 0mm !important; }

  /* Cabecera días semana */
  .mini-dow{ font-size:5pt; gap:0px !important; margin-bottom:0mm !important; }
  .minigrid{ gap:0px !important; flex:1 !important; grid-auto-rows:1fr !important; grid-template-rows:repeat(6, minmax(0, 1fr)) !important; }

  /* Día (mini) */
  /* Con el gap mínimo y apaisado, maximizamos el tamaño de cada día */
  /* Día: maximizar área de cada celda */
  /* Recorte muy ligero en vertical para asegurar 1 sola página */
  .mday{ min-height:0 !important; height:100% !important; padding:0.1mm 0.2mm !important; border-radius:3px !important; }

  /* Número de día y turno base: ~5pt más pequeño */
  .mday .mini-num{
  font-size:var(--fs-year-num) !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:var(--year-circle-size) !important;
  height:var(--year-circle-size) !important;
  border:0.2mm solid #111827 !important;
  border-radius:50% !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
  .mday .mini-shift{ font-size:4pt !important; padding:0 2px !important; line-height:1 !important; }

  /* Eventos dentro de un día: 2pt menos */
  .mday .mini-tags{ margin-top:0px !important; gap:0.2px !important; }
  .mday .mini-tag{ font-size:3pt !important; padding:0 1px !important; line-height:1.05 !important; }
}