:root {
  --fondo: #f4f5f7;
  --papel: #ffffff;
  --tinta: #1d2330;
  --suave: #5d6677;
  --linea: #dde1e8;
  --acento: #1f5fbf;
  --error: #c62828;
  --error-fondo: #fdecec;
  --aviso: #a86500;
  --aviso-fondo: #fff4e0;
  --info: #2e6b4f;
  --info-fondo: #e8f4ee;
  --a_coordinar: #8a93a3;
  --propuesto: #e0a100;
  --confirmado: #2e8b57;
  --realizado: #3a6fd8;
  --suspendido: #b0b6c1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--tinta);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); }
button, input, select, textarea { font: inherit; }
button {
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
button:hover { border-color: #b9c0cc; }
button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.peligro { color: var(--error); }
.cuenta { background: var(--acento); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 12px; }
.cuenta:empty { display: none; }

.barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--papel); border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 5;
}
.barra h1 { font-size: 17px; margin: 0; }
.semana { display: flex; align-items: center; gap: 6px; }
#titulo-semana { font-weight: 600; margin-left: 6px; }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sesion { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13px; margin-left: 8px; }
.aviso-fuente { background: var(--aviso-fondo); color: var(--aviso); padding: 6px 16px; font-size: 13px; border-bottom: 1px solid #f1d9a8; }

/* Grilla semanal: igual que el Excel (filas por sector, columnas lunes a sábado) */
.grilla { display: grid; grid-template-columns: 120px repeat(6, minmax(150px, 1fr)); gap: 1px; background: var(--linea); margin: 12px 16px; border: 1px solid var(--linea); }
.grilla > div { background: var(--papel); padding: 6px; min-height: 40px; }
.cab { font-weight: 600; position: sticky; top: 54px; z-index: 2; }
.cab.hoy { background: #eef4ff; }
.cab .fecha { color: var(--suave); font-weight: 400; }
.cab .mapa { float: right; text-decoration: none; font-size: 12px; }
.sector { font-weight: 600; color: var(--suave); text-transform: uppercase; font-size: 12px; background: #fafbfc !important; }
.celda { display: flex; flex-direction: column; gap: 5px; }
.celda.encima { outline: 2px dashed var(--acento); outline-offset: -3px; }
.celda .agregar { visibility: hidden; border: 1px dashed var(--linea); color: var(--suave); padding: 2px; font-size: 12px; }
.celda:hover .agregar { visibility: visible; }
.rrhh { font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.etiqueta { display: inline-block; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.etiqueta.bloqueo { background: var(--error-fondo); color: var(--error); }
.etiqueta.ausente { background: #eceff4; color: var(--suave); }
.etiqueta.fuera { background: var(--aviso-fondo); color: var(--aviso); }

.tarjeta {
  border: 1px solid var(--linea); border-left: 4px solid var(--a_coordinar); border-radius: 6px;
  padding: 5px 7px; cursor: pointer; background: var(--papel); font-size: 12.5px; line-height: 1.3;
}
.tarjeta:hover { box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.tarjeta.propuesto { border-left-color: var(--propuesto); }
.tarjeta.confirmado { border-left-color: var(--confirmado); }
.tarjeta.realizado { border-left-color: var(--realizado); }
.tarjeta.suspendido { border-left-color: var(--suspendido); opacity: .6; text-decoration: line-through; }
.tarjeta .t1 { font-weight: 600; display: flex; gap: 4px; align-items: baseline; }
.tarjeta .t1 .ot { color: var(--suave); font-weight: 400; font-size: 11.5px; }
.tarjeta .t1 .marcas { margin-left: auto; display: flex; gap: 3px; }
.tarjeta .det { color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta .tecs { margin-top: 3px; color: var(--acento); font-size: 12px; }
.tarjeta .sigue { color: var(--suave); font-size: 11px; }
.marca { border-radius: 8px; padding: 0 5px; font-size: 11px; font-weight: 600; }
.marca.error { background: var(--error); color: #fff; }
.marca.aviso { background: var(--aviso-fondo); color: var(--aviso); }

/* Editor */
dialog { border: none; border-radius: 10px; padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(20, 26, 38, .35); }
.editor { width: min(1100px, 96vw); }
.editor form > header, .panel > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.editor h2, .panel h2 { font-size: 16px; margin: 0; }
.cerrar { border: none; font-size: 16px; }
.editor-cuerpo { display: grid; grid-template-columns: 1fr 360px; max-height: 74vh; }
.campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; padding: 14px 16px; overflow-y: auto; align-content: start; }
.campos label, .campos fieldset { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); }
.campos .ancho { grid-column: 1 / -1; }
.campos fieldset { border: 1px solid var(--linea); border-radius: 6px; padding: 8px; margin: 0; }
.campos input, .campos select, .campos textarea { border: 1px solid var(--linea); border-radius: 5px; padding: 6px 8px; color: var(--tinta); background: #fff; }
.campos small { color: var(--suave); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { border: 1px solid var(--linea); border-radius: 14px; padding: 3px 10px; font-size: 12.5px; background: #fff; cursor: pointer; color: var(--tinta); }
.chip.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.chip .nivel { font-size: 10.5px; opacity: .75; margin-left: 3px; }
.chip.patron.on { background: #2f3a4d; border-color: #2f3a4d; }
.resultados { display: flex; flex-direction: column; max-height: 150px; overflow-y: auto; }
.resultados button { text-align: left; border: none; border-bottom: 1px solid var(--fondo); border-radius: 0; padding: 4px 6px; font-size: 12.5px; }
.estado-p { font-size: 11px; margin-left: 6px; }
.estado-p.mal { color: var(--error); }
.estado-p.duda { color: var(--aviso); }
.estado-p.bien { color: var(--info); }

.panel-controles { border-left: 1px solid var(--linea); padding: 14px 16px; overflow-y: auto; background: #fbfbfc; }
.panel-controles h3, .panel-controles h4 { margin: 0 0 6px; font-size: 13px; }
.panel-controles h4 { margin-top: 10px; color: var(--suave); font-weight: 600; }
.item { border-radius: 5px; padding: 5px 8px; margin-bottom: 4px; font-size: 12.5px; }
.item.error { background: var(--error-fondo); color: var(--error); }
.item.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.item.info { background: var(--info-fondo); color: var(--info); }
.ok { color: var(--info); font-size: 13px; }
.zona-item { display: block; width: 100%; text-align: left; margin-bottom: 4px; font-size: 12.5px; }
.zona-item.misma { border-color: var(--confirmado); }
.recorrido { display: block; font-size: 12.5px; margin-bottom: 3px; }
.editor footer, .panel footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--linea); }
.error-txt { color: var(--error); margin-right: auto; font-size: 13px; }

/* Paneles de catálogos */
.panel { width: min(960px, 96vw); }
.panel .cuerpo { padding: 12px 16px; max-height: 72vh; overflow-y: auto; }
.panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel th, .panel td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.panel th { color: var(--suave); font-weight: 600; font-size: 12px; }
.panel td input, .panel td select { width: 100%; border: 1px solid var(--linea); border-radius: 4px; padding: 3px 5px; }
.panel .alta { display: flex; gap: 6px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; padding: 10px; background: var(--fondo); border-radius: 6px; }
.panel .alta label { display: flex; flex-direction: column; font-size: 12px; color: var(--suave); gap: 2px; }
.panel .alta input, .panel .alta select { border: 1px solid var(--linea); border-radius: 4px; padding: 4px 6px; }
.panel .nota { color: var(--suave); font-size: 12.5px; margin: 0 0 10px; }
.dias-pref { display: flex; gap: 2px; }
.dias-pref label { flex-direction: row !important; font-size: 11px; }
.coord-item { border: 1px solid var(--linea); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.coord-item:hover { border-color: var(--acento); }
.coord-item .sug { color: var(--info); font-size: 12px; margin-top: 3px; }

@media (max-width: 900px) {
  .grilla { grid-template-columns: 90px repeat(6, minmax(130px, 1fr)); overflow-x: auto; margin: 8px; }
  .editor-cuerpo { grid-template-columns: 1fr; }
  .panel-controles { border-left: none; border-top: 1px solid var(--linea); }
  .campos { grid-template-columns: 1fr 1fr; }
}

/* Configuración (ABM) */
.panel.ancho { width: min(1400px, 98vw); }
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linea); margin: -4px 0 12px; padding-bottom: 8px; }
.pestanas button { border-color: transparent; }
.pestanas button.on { background: var(--acento); color: #fff; border-color: var(--acento); }
.cfg h4 { margin: 16px 0 6px; font-size: 13px; }
.cfg h5 { margin: 0 0 6px; font-size: 12.5px; color: var(--suave); }
.panel tr.inactivo td { opacity: .5; }
.panel tr.guardado td { background: var(--info-fondo); transition: background .2s; }
.panel td.centro, .panel th.centro { text-align: center; }
.panel .alta .filtro { margin-left: auto; }
.panel .alta.vertical { flex-direction: column; align-items: stretch; max-width: 520px; }
.tabla-ancha { overflow-x: auto; }
.tabla-ancha table { min-width: 1250px; }
.tabla-ancha td input { min-width: 90px; }
.acciones-fila { display: flex; gap: 4px; }
.acciones-fila select { max-width: 150px; }
.matriz { width: auto !important; margin-bottom: 8px; }
.matriz th, .matriz td { padding: 4px 10px !important; }
.columnas-zonas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.loc { display: flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 2px 0; border-bottom: 1px solid var(--fondo); }
.loc span { flex: 1; }
.loc select { font-size: 11.5px; max-width: 110px; border: 1px solid var(--linea); border-radius: 4px; }
button.mini { padding: 0 6px; font-size: 11px; color: var(--suave); }
.panel td input[type=checkbox] { width: auto; min-width: 0; }
.dias-pref { white-space: nowrap; gap: 6px; }
.dias-pref label { display: inline-flex; align-items: center; gap: 1px; color: var(--suave); }
.tabla-ancha td select { min-width: 120px; }
.tabla-ancha td:first-child input { min-width: 170px; }

/* Rol solo lectura: se esconde todo lo que cambia datos (el servidor igual lo rechaza). */
body[data-rol="lectura"] #nuevo,
body[data-rol="lectura"] [data-panel="config"],
body[data-rol="lectura"] .celda .agregar,
body[data-rol="lectura"] .panel .alta,
body[data-rol="lectura"] [data-borrar],
body[data-rol="lectura"] [data-nuevo-coordinar],
body[data-rol="lectura"] #editor footer .primario,
body[data-rol="lectura"] #borrar,
body[data-rol="lectura"] #buscar-patron,
body[data-rol="lectura"] #resultados-patron { display: none !important; }
.panel .alta label.check { flex-direction: row; align-items: center; gap: 4px; }