/* Mi Cuadrante · estilos
   Concepto: tablero de turnos de vía. Fondo frío, códigos de turno como placas condensadas,
   color por franja (mañana / tarde / noche / guardia / vacaciones). Una sola columna para el móvil. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fuentes/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fuentes/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fuentes/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('fuentes/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fuentes/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

:root {
  --fondo: #EEF2F1;
  --papel: #FFFFFF;
  --tinta: #13201D;
  --suave: #5A6A66;
  --linea: #D5DEDB;
  --marca: #0B5563;        /* azul vía */
  --marca-tinta: #FFFFFF;
  --senal: #E39A00;        /* ámbar de señal: hoy, avisos */
  --senal-fondo: #FFF3D6;
  --m: #2F79B8; --m-fondo: #E2EEF8;     /* mañana */
  --t: #C2621F; --t-fondo: #FBE9DC;     /* tarde */
  --n: #4A3F94; --n-fondo: #E8E5F6;     /* noche */
  --gu: #66768A; --gu-fondo: #D6DCE4;   /* guardia (mismo gris azulado que el Excel) */
  --vac: #22804F; --vac-fondo: #DDF1E5; /* vacaciones */
  --fest-fondo: #FFF2CC;                /* festivo (como el Excel) */
  --baja: #A3324A; --baja-fondo: #F8E1E6;  /* baja */
  --lic: #6B6418; --lic-fondo: #F1EDC8;    /* licencia */
  --hs: #7A3E8F; --hs-fondo: #F1E2F6;      /* horas sindicales */
  --ok: #22804F; --mal: #B3261E; --mal-fondo: #FBE4E2;
  --sombra: 0 1px 2px rgba(19, 32, 29, .06), 0 4px 14px rgba(19, 32, 29, .06);
  --f-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-placa: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --radio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0D1513; --papel: #16211E; --tinta: #E4ECE9; --suave: #9AABA6; --linea: #26332F;
    --marca: #5BB3C4; --marca-tinta: #0D1513; --senal: #F2B53A; --senal-fondo: #3A2D0E;
    --m: #7DB6E8; --m-fondo: #172C3E; --t: #F09A5E; --t-fondo: #3A2414; --n: #A99CF2; --n-fondo: #25204A;
    --gu: #A9B6C6; --gu-fondo: #2A323D; --vac: #6ACB97; --vac-fondo: #163527; --fest-fondo: #3A3315;
    --baja: #F08DA2; --baja-fondo: #3E1A23; --lic: #D9CF6E; --lic-fondo: #33300F; --hs: #D8A2EA; --hs-fondo: #33193D;
    --ok: #6ACB97; --mal: #F2867E; --mal-fondo: #3D1A18; --sombra: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0D1513; --papel: #16211E; --tinta: #E4ECE9; --suave: #9AABA6; --linea: #26332F;
  --marca: #5BB3C4; --marca-tinta: #0D1513; --senal: #F2B53A; --senal-fondo: #3A2D0E;
  --m: #7DB6E8; --m-fondo: #172C3E; --t: #F09A5E; --t-fondo: #3A2414; --n: #A99CF2; --n-fondo: #25204A;
  --gu: #A9B6C6; --gu-fondo: #2A323D; --vac: #6ACB97; --vac-fondo: #163527; --fest-fondo: #3A3315;
  --baja: #F08DA2; --baja-fondo: #3E1A23; --lic: #D9CF6E; --lic-fondo: #33300F; --hs: #D8A2EA; --hs-fondo: #33193D;
  --ok: #6ACB97; --mal: #F2867E; --mal-fondo: #3D1A18; --sombra: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 16px/1.45 var(--f-texto); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--senal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Estructura ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--marca); color: var(--marca-tinta);
  padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.cabecera .marca { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.cabecera .marca b { font: 700 1.25rem/1 var(--f-placa); letter-spacing: .02em; text-transform: uppercase; }
.cabecera .marca span { font-size: .78rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera .hueco { flex: 1; }
.cabecera .via { display: grid; place-items: center; flex: none; }
.cabecera select, .cabecera .boton-cab { background: transparent; color: var(--marca-tinta); border: 1px solid currentColor; border-radius: 8px; padding: 6px 10px; font-size: .9rem; }
.cabecera select option { color: #13201D; }
.contenido { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 16px 96px; display: flex; flex-direction: column; gap: 16px; }
.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--papel); border-top: 1px solid var(--linea);
  display: flex; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pestanas button { flex: 1; background: none; border: 0; padding: 9px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .72rem; color: var(--suave); cursor: pointer; }
.pestanas button svg { width: 22px; height: 22px; }
.pestanas button[aria-current="page"] { color: var(--marca); font-weight: 600; }
.pestanas button[aria-current="page"] svg { stroke-width: 2.2; }

.franja-demo { background: var(--senal-fondo); color: var(--tinta); font-size: .82rem; padding: 6px 16px; text-align: center; }
.franja-demo b { color: var(--tinta); }
.sin-conexion { background: var(--gu-fondo); color: var(--tinta); font-size: .82rem; padding: 6px 16px; text-align: center; }

/* ---------- Bloques ---------- */
.bloque { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bloque > h2, .titulo { font: 700 1.05rem/1.2 var(--f-placa); text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.mini { font-size: .82rem; color: var(--suave); }
.vacio { color: var(--suave); text-align: center; padding: 16px; }

/* ---------- Placa de turno ---------- */
.placa { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2em; padding: 2px 8px; border-radius: 6px;
  font: 700 1rem/1.3 var(--f-placa); letter-spacing: .03em; background: var(--gu-fondo); color: var(--tinta); white-space: nowrap; }
.placa.M { background: var(--m-fondo); color: var(--m); }
.placa.T { background: var(--t-fondo); color: var(--t); }
.placa.N { background: var(--n-fondo); color: var(--n); }
.placa.GU { background: var(--gu-fondo); color: var(--gu); }
.placa.VAC { background: var(--vac-fondo); color: var(--vac); }
.placa.BAJA { background: var(--baja-fondo); color: var(--baja); }
.placa.LIC { background: var(--lic-fondo); color: var(--lic); }
.placa.HS { background: var(--hs-fondo); color: var(--hs); }
.placa.OTRO { background: var(--fondo); color: var(--marca); border: 1px solid var(--linea); }
.placa.CONV { background: var(--vac-fondo); color: var(--vac); }
.placa.DESC { background: var(--mal-fondo); color: var(--mal); }
.placa.libre { background: transparent; color: var(--suave); border: 1px dashed var(--linea); font-weight: 500; }
.placa.grande { font-size: 2.6rem; line-height: 1.05; padding: 6px 16px; border-radius: 10px; }

/* ---------- Hoy ---------- */
.hoy { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.hoy .puesto { font: 600 1.15rem/1.25 var(--f-texto); }
.hoy .horario { font: 700 1.6rem/1.1 var(--f-placa); letter-spacing: .02em; }
.hoy .fecha-hoy { font-size: .85rem; color: var(--suave); }
.hoy .fecha-hoy::first-letter { text-transform: uppercase; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li { display: grid; grid-template-columns: 4.4rem auto 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linea); }
.lista li:first-child { border-top: 0; }
.lista .dia { font: 700 1rem/1.1 var(--f-placa); text-transform: uppercase; }
.lista .dia small { display: block; font: 500 .75rem/1.2 var(--f-texto); color: var(--suave); text-transform: none; }
.lista .que { min-width: 0; font-size: .9rem; }
.lista .que small { display: block; color: var(--suave); }
.lista .h { font: 500 1rem var(--f-placa); color: var(--suave); }
.lista li.hueco-libre { grid-template-columns: 4.4rem 1fr; color: var(--suave); font-size: .85rem; padding: 4px 0; }

.aviso-cambios { background: var(--senal-fondo); border: 1px solid var(--senal); border-radius: var(--radio); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.aviso-cambios h2, .aviso-cambios .titulo-cambios { font: 700 1.15rem/1.2 var(--f-placa); text-transform: uppercase; letter-spacing: .04em; }
.cambio { display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px; align-items: center; font-size: .9rem; }
.cambio .flecha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.aviso-item { border-left: 4px solid var(--marca); padding: 2px 0 2px 12px; }
.aviso-item b { display: block; }
.aviso-item p { margin: 2px 0 0; font-size: .92rem; }

/* ---------- Medidor de horas ---------- */
.medidor { display: flex; flex-direction: column; gap: 6px; }
.barra { position: relative; height: 14px; background: var(--fondo); border-radius: 7px; overflow: hidden; border: 1px solid var(--linea); }
.barra i { position: absolute; inset: 0 auto 0 0; background: var(--marca); border-radius: 7px 0 0 7px; }
.barra i.prev { background: var(--m-fondo); }
.barra .objetivo { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta); }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cifra { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.cifra b { font: 700 1.9rem/1.05 var(--f-placa); font-variant-numeric: tabular-nums; }
.cifra span { font-size: .78rem; color: var(--suave); }
.estado { display: inline-block; font-size: .8rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fondo); }
.estado.ok { color: var(--ok); background: var(--vac-fondo); }
.estado.mal { color: var(--mal); background: var(--mal-fondo); }
.estado.info { color: var(--marca); background: var(--m-fondo); }

.meses { display: grid; grid-template-columns: 2.6rem 1fr 3.2rem; gap: 6px 10px; align-items: center; font-size: .88rem; }
.meses .b { height: 10px; background: var(--fondo); border-radius: 5px; position: relative; overflow: hidden; }
.meses .b i { position: absolute; inset: 0 auto 0 0; background: var(--m-fondo); }
.meses .b i + i { background: var(--marca); }
.meses .m { font: 700 .95rem var(--f-placa); }
.meses .v { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Contadores ---------- */
.contadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.contador { border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.contador b { font: 700 1.7rem/1.05 var(--f-placa); font-variant-numeric: tabular-nums; }
.contador span { font-size: .8rem; color: var(--suave); }
.contador.M b { color: var(--m); } .contador.T b { color: var(--t); } .contador.N b { color: var(--n); } .contador.GU b { color: var(--gu); } .contador.VAC b { color: var(--vac); } .contador.BAJA b { color: var(--baja); } .contador.LIC b { color: var(--lic); } .contador.HS b { color: var(--hs); }
.tabla-env { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font: 700 .82rem var(--f-placa); text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.libre-entero td { color: var(--vac); }

/* ---------- Calendario ---------- */
.nav-mes { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-mes h2 { font: 700 1.5rem/1 var(--f-placa); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta); }
.btn-redondo { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--papel); cursor: pointer; display: grid; place-items: center; }
.rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rejilla .cab { text-align: center; font: 700 .85rem var(--f-placa); color: var(--suave); padding: 2px 0; }
.celda { min-height: 62px; border: 1px solid var(--linea); border-radius: 7px; background: var(--papel); padding: 3px; display: flex; flex-direction: column; gap: 3px;
  align-items: stretch; cursor: pointer; text-align: left; min-width: 0; }
.celda.fuera { visibility: hidden; }
.celda .d { font: 500 .8rem var(--f-texto); color: var(--suave); display: flex; justify-content: space-between; }
.celda .placa { min-width: 0; width: 100%; font-size: .78rem; padding: 1px 2px; overflow: hidden; text-overflow: ellipsis; }
.celda.fest { background: var(--fest-fondo); }
.celda.hoy-c { border: 2px solid var(--senal); }
.celda.sel { outline: 3px solid var(--marca); outline-offset: -1px; }
.celda .marcaV { font: 700 .7rem var(--f-placa); color: var(--t); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .78rem; color: var(--suave); align-items: center; }
.leyenda .placa { font-size: .72rem; min-width: 0; }
.detalle-dia { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Formularios y botones ---------- */
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--suave); }
input, select, textarea { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; min-width: 0; font-size: 1rem; color: var(--tinta); }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px var(--m-fondo); }
.btn { border: 0; border-radius: 8px; padding: 10px 16px; background: var(--marca); color: var(--marca-tinta); font-weight: 600; cursor: pointer; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sec { background: transparent; color: var(--marca); border: 1px solid var(--marca); }
.btn.peligro { background: transparent; color: var(--mal); border: 1px solid var(--mal); }
.btn.peligro.confirmar { background: var(--mal); color: var(--papel); }
.btn.peq { padding: 5px 10px; font-size: .85rem; }
.form { display: grid; gap: 12px; }
.form .dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mensaje { padding: 10px 12px; border-radius: 8px; font-size: .9rem; }
.mensaje.error { background: var(--mal-fondo); color: var(--mal); }
.mensaje.ok { background: var(--vac-fondo); color: var(--ok); }
.mensaje.aviso { background: var(--senal-fondo); color: var(--tinta); }
.mensaje.info { background: var(--m-fondo); color: var(--tinta); }

/* ---------- Entrada ---------- */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--marca); }
.entrada .tarjeta { width: 100%; max-width: 380px; background: var(--papel); border-radius: 14px; padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo .via { width: 46px; height: 46px; border-radius: 10px; background: var(--marca); display: grid; place-items: center; color: var(--marca-tinta); }
.logo b { font: 700 1.7rem/1 var(--f-placa); text-transform: uppercase; letter-spacing: .02em; display: block; }
.logo span { font-size: .85rem; color: var(--suave); }
.pin { letter-spacing: .4em; font: 700 1.3rem var(--f-placa); }

/* ---------- Administración ---------- */
.segmentos { display: flex; gap: 6px; flex-wrap: wrap; }
.segmentos button { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; font-size: .9rem; }
.segmentos button[aria-pressed="true"] { background: var(--marca); color: var(--marca-tinta); border-color: var(--marca); }
.lista-avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-avisos li { padding: 8px 10px; border-radius: 8px; font-size: .88rem; }
.lista-avisos li.error { background: var(--mal-fondo); color: var(--mal); }
.lista-avisos li.aviso { background: var(--senal-fondo); }
.lista-avisos li.ok { background: var(--vac-fondo); color: var(--ok); }
.lista-avisos li.info { background: var(--m-fondo); }
.version { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-top: 1px solid var(--linea); }
.version:first-of-type { border-top: 0; }
.version b { word-break: break-word; }
.version .acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: start; }
td input, td select { padding: 6px 8px; font-size: .9rem; width: 100%; }
td.acc { white-space: nowrap; }
.zona-fichero { border: 2px dashed var(--linea); border-radius: var(--radio); padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.oculto-accesible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

table.ancha td input, table.ancha td select { min-width: 5rem; }
table.ancha td:nth-child(2) input { min-width: 9rem; }

.confirmado { color: var(--ok); font-weight: 600; font-size: .88rem; }
details.version summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Leyenda completa de códigos */
.ley { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.ley-grupo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ley-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ley-lista li { display: grid; grid-template-columns: 4.6rem 1fr; gap: 8px; align-items: center; font-size: .86rem; }
.ley-lista li .placa { font-size: .8rem; min-width: 0; }
.ley-lista li b { font-weight: 500; }
.ley-lista li small { display: block; color: var(--suave); font-variant-numeric: tabular-nums; }

/* Mensajes */
.pestanas button { position: relative; }
.insignia { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mal); color: #fff; font: 700 .7rem/18px var(--f-texto); font-style: normal; }
.conversacion { display: flex; flex-direction: column; gap: 8px; }
.burbuja { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: .92rem; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.burbuja.tecnico { align-self: flex-end; background: var(--m-fondo); border-bottom-right-radius: 4px; }
.burbuja.gestor { align-self: flex-start; background: var(--vac-fondo); border-bottom-left-radius: 4px; }
.conv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.conv-lista li button { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--linea); padding: 10px 4px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; cursor: pointer; }
.conv-lista li:first-child button { border-top: 0; }
.conv-lista .ultimo { grid-column: 1 / -1; color: var(--suave); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.via-dia { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.via-dia ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.via-dia li { display: grid; grid-template-columns: 4.6rem 1fr; gap: 8px; align-items: center; font-size: .88rem; }
.via-dia li small { display: block; color: var(--suave); }

/* ---------- Motivo del cambio y segunda confirmación ---------- */
.aviso-cambios .cambio { grid-template-columns: 1fr; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--senal); }
.aviso-cambios .cambio:last-child { border-bottom: 0; }
.aviso-cambios .cambio b::first-letter { text-transform: uppercase; }
.motivo-cambio { grid-column: 1 / -1; font-size: .85rem; color: var(--tinta); background: var(--papel); border-left: 3px solid var(--senal); padding: 4px 8px; border-radius: 4px; }
.modal-fondo { position: fixed; inset: 0; z-index: 50; background: rgba(8, 16, 14, .62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--papel); color: var(--tinta); border-radius: 14px; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); border-top: 6px solid var(--senal); }
.modal h2 { font: 700 1.35rem/1.2 var(--f-placa); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.modal-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.modal-lista > li { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.modal-fecha { font-weight: 600; }
.modal-fecha::first-letter { text-transform: uppercase; }
.modal-cambio { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.modal-cambio > div:not(.flecha-g) { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.flecha-g { font-size: 1.6rem; color: var(--senal); font-weight: 700; }
.modal .fila .btn { flex: 1 1 auto; }
/* Calendario del móvil */
.paso-cal { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.paso-cal ol { margin: 0; padding-left: 1.2rem; }
.paso-cal input { font-size: .75rem; }
.btn-enlace { background: none; border: 0; padding: 0; color: var(--marca); text-decoration: underline; font: inherit; cursor: pointer; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
/* Excel de cambios */
.tabla-cambios td { vertical-align: top; }
.tabla-cambios tr.error td { background: var(--mal-fondo); }
.tabla-cambios tr.distinto td { background: var(--senal-fondo); }
.tabla-cambios tr.ya td, .tabla-cambios tr.fuera td, .tabla-cambios tr.quitada td { opacity: .65; }
.tabla-cambios input { min-width: 0; width: 100%; }
.tabla-cambios td:nth-child(6) { min-width: 12rem; }
.tabla-cambios td:nth-child(3) { min-width: 6.5rem; }
.tabla-cambios td:nth-child(2) { white-space: nowrap; }
.tabla-cambios td:nth-child(5) input { width: 5.5rem; }
.tabla-cambios td:nth-child(3) input { width: 6.5rem !important; }
.tabla-cambios th, .tabla-cambios td { padding-left: 6px; padding-right: 6px; }
.lista-dias { margin: 6px 0 0; padding-left: 1.1rem; }
/* Imagen de cambios */
.imagen-cambios { margin: 8px 0; }
.imagen-cambios img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 8px; margin-top: 6px; background: #fff; }