/* Sin framework y sin build: lo que hace falta para operar, y nada mas. */
:root {
  /* SINERGIA arranca en oscuro. **Esto es todo el tema**: no hay una hoja
     alterna ni una clase que alguien tenga que acordarse de poner en el body.
     El resto del archivo ya venia escrito contra estas variables, asi que el
     modo oscuro es el valor de doce lineas y no un rediseño.

     Las relaciones entre tokens son las mismas que en claro, invertidas:
     `--papel` sigue siendo la superficie que se levanta por encima de
     `--fondo`. En claro eso era blanco sobre gris muy claro; aca es gris muy
     oscuro sobre casi negro. Ningun selector de abajo tuvo que enterarse. */
  --tinta: #e7e9ef;
  --tinta-suave: #a3aabb;
  --linea: #3a4250;
  --fondo: #0f1116;
  --papel: #171a21;
  --acento: #7aa2ff;
  --ok: #4cc38a;
  --alerta: #e8913c;
  --error: #ff7b72;
  --radio: 6px;

  /* Lo que en claro estaba escrito a mano adentro de una regla. Tenerlo como
     token no es ceremonia: eran las unicas cinco cosas del archivo que no se
     podian cambiar desde un solo lugar, y por eso son las unicas que habrian
     quedado claras en una pantalla oscura. */

  /* Tinta sobre el acento: un azul claro pide texto oscuro, no blanco. */
  --sobre-acento: #0b0d12;
  /* Fondo del aviso. Era un rosa claro; aca es el mismo gesto en oscuro. */
  --aviso-fondo: #2d1a1c;
  /* El mismo gesto cuando la noticia es buena. Un aviso rojo diciendo que algo
     salio bien se lee como que algo fallo. */
  --ok-fondo: #14291f;
  /* Superficie de hover: **mas clara** que el papel, no mas oscura. En claro
     el hover oscurecia un blanco; invertir el tema sin invertir esto dejaria
     los hover leyendose como huecos. */
  --hover: #1f232c;
  /* Sombra y velo del dialogo: sobre oscuro tienen que ser mas negros y mas
     opacos, o no separan nada del fondo. */
  --sombra: rgba(0, 0, 0, .45);
  --velo: rgba(5, 6, 9, .6);

  /* Que los controles nativos acompañen: scrollbars, el desplegable de un
     <select>, el calendario de un <input type="date"> y el spinner de un
     number los pinta el navegador, no esta hoja. Sin esto quedan blancos en
     medio de una pantalla oscura, que es exactamente lo que se ve peor. */
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); }

/* --- estructura --- */
.barra {
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px; height: 52px;
  background: var(--papel); border-bottom: 1px solid var(--linea);
}
.marca { font-weight: 600; letter-spacing: .04em; }
.barra nav { display: flex; gap: 4px; margin-right: auto; }
.barra nav button {
  background: none; border: 0; padding: 6px 12px; border-radius: var(--radio);
  cursor: pointer; color: var(--tinta-suave);
}
.barra nav button:hover { background: var(--hover); }
.barra nav button[aria-current="page"] { color: var(--tinta); font-weight: 600; background: var(--hover); }
.quien { color: var(--tinta-suave); font-size: 13px; }
main { max-width: 1120px; margin: 0 auto; padding: 24px; }

/* --- piezas --- */
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; }
.tarjeta + .tarjeta { margin-top: 16px; }
h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 15px; margin: 0 0 12px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
h3 { font-size: 15px; margin: 0 0 8px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); }
th { color: var(--tinta-suave); font-weight: 500; font-size: 13px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtros input, .filtros select { padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); width: 100%; }
/* El navegador dibuja el placeholder como el color del texto con opacidad, y
   sobre un campo oscuro eso queda al borde de lo ilegible. Se fija al mismo
   gris con el que ya se escribe todo lo secundario. */
::placeholder { color: var(--tinta-suave); opacity: 1; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--tinta-suave); }
label > input, label > select, label > textarea { margin-top: 4px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

button.accion {
  padding: 8px 14px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); cursor: pointer;
}
button.accion:hover { border-color: var(--tinta-suave); }
button.accion.primaria { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
button.accion:disabled { opacity: .5; cursor: default; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; background: var(--fondo); border: 1px solid var(--linea); }
.etiqueta.won { color: var(--ok); border-color: currentColor; }
.etiqueta.lost { color: var(--error); border-color: currentColor; }
.etiqueta.vencido { color: var(--alerta); border-color: currentColor; }

.estado { padding: 32px; text-align: center; color: var(--tinta-suave); }
.estado.error { color: var(--error); }
.aviso { padding: 10px 12px; border-radius: var(--radio); background: var(--aviso-fondo); color: var(--error); margin-bottom: 12px; }
/* Un aviso que salio bien. Mismo bloque y mismo lugar: lo unico que cambia es
   el color, porque lo que cambia es la noticia. */
.aviso.bien { background: var(--ok-fondo); color: var(--ok); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dato .k { font-size: 12px; color: var(--tinta-suave); }
.dato .v { font-weight: 500; }

.historia { list-style: none; margin: 0; padding: 0; }
.historia li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.historia li:last-child { border-bottom: 0; }
.historia .cuando { color: var(--tinta-suave); font-size: 13px; white-space: nowrap; min-width: 120px; }
.historia .detalle { color: var(--tinta-suave); font-size: 13px; }

.columnas { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .columnas, .par { grid-template-columns: 1fr; } }

dialog {
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px;
  width: min(480px, 92vw);
  /* No lo declaraba: lo ponia el navegador, y el default es blanco. Con
     `color-scheme: dark` ya vendria oscuro, pero un modal es la pieza que
     mas molesta si falla: se dice aca y no se depende de eso. */
  background: var(--papel); color: var(--tinta);
}
dialog::backdrop { background: var(--velo); }

.acceso { max-width: 360px; margin: 12vh auto; }
.migas { margin-bottom: 12px; font-size: 13px; }
.migas button { background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; }

.paginador { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--tinta-suave); font-size: 13px; }
.guia { border-left: 3px solid var(--acento); padding-left: 12px; margin-bottom: 16px; }
.guia ol { margin: 8px 0 0; padding-left: 20px; color: var(--tinta-suave); }
.guia li.hecho { color: var(--ok); }
.fila-config { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.fila-config:last-child { border-bottom: 0; }
.fila-config .nombre { flex: 1; }
.fila-config button { padding: 2px 8px; font-size: 13px; }
.detalle { color: var(--tinta-suave); font-size: 13px; }

/* --- buscador incremental --- */
.buscador { position: relative; }
.sugerencias {
  position: absolute; z-index: 5; left: 0; right: 0; background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--radio); max-height: 220px; overflow-y: auto;
  box-shadow: 0 6px 16px var(--sombra);
}
.sugerencia { padding: 8px 10px; cursor: pointer; }
.sugerencia:hover { background: var(--hover); }
.elegido { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.elegido span { flex: 1; font-weight: 500; }

/* --- embudo --- */
.embudo { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.columna { flex: 0 0 260px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.columna > header { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.columna > header .nombre { font-weight: 600; }
.columna > header .resumen { font-size: 12px; color: var(--tinta-suave); }
.columna .cuerpo { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.naipe { border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 10px; cursor: pointer; background: var(--papel); }
.naipe:hover { border-color: var(--tinta-suave); }
.naipe .titulo { font-weight: 500; }
.naipe .sub, .naipe .pie { font-size: 12px; color: var(--tinta-suave); }
.naipe .pie { display: flex; justify-content: space-between; margin-top: 4px; gap: 8px; }
.naipe.con-vencido { border-left: 3px solid var(--alerta); }
.mover { display: flex; gap: 4px; margin-top: 6px; }
.mover button { padding: 1px 7px; font-size: 12px; }

/* --- reporting --- */
.barra-etapa { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.barra-etapa .nombre { min-width: 140px; }
.barra-etapa .riel { flex: 1; height: 10px; background: var(--fondo); border-radius: 99px; overflow: hidden; }
.barra-etapa .relleno { height: 100%; background: var(--acento); }
.barra-etapa .cifra { min-width: 90px; text-align: right; font-size: 13px; color: var(--tinta-suave); }

.pestanias { display: flex; gap: 4px; margin-bottom: 12px; }
.pestanias button { background: none; border: 0; padding: 6px 12px; border-radius: var(--radio); cursor: pointer; color: var(--tinta-suave); }
.pestanias button:hover { background: var(--papel); }
.pestanias button[aria-current="page"] { background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); font-weight: 600; }

.conexion { border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; margin-bottom: 12px; background: var(--papel); }
.conexion.revocada { opacity: .6; }
.conexion > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.conexion > header .nombre { font-weight: 600; }
.llaves { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.llave { font-size: 12px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--linea); background: var(--fondo); }
.llave.peligrosa { border-color: var(--alerta); color: var(--alerta); }
.secreto { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; background: var(--fondo); padding: 10px; border-radius: var(--radio); border: 1px solid var(--linea); }

.fila-atencion { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.fila-atencion:last-child { border-bottom: 0; }
.fila-atencion .que { flex: 1; min-width: 0; }
.fila-atencion .acciones { flex: 0 0 auto; }

/* --- la superficie del metodo ---
 *
 * Se apoya en las mismas variables que el resto: no es otro producto, es la
 * otra mitad del mismo. Lo unico que cambia es el ritmo: el CRM se opera en
 * tablas, y el metodo se recorre leyendo preguntas.
 */
.pregunta { margin: 28px 0 12px; }
.pregunta h2 { margin: 0 0 4px; font-size: 19px; }
.ayuda { margin: 0; color: var(--tinta-suave); font-size: 14px; max-width: 70ch; }
.pie { color: var(--tinta-suave); font-size: 13px; }

/* El riel: donde estoy y que falta. Nombra el recorrido, no numera pasos. */
.riel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.riel button {
  background: none; border: 1px solid var(--linea); border-radius: 99px;
  padding: 4px 12px; font-size: 13px; color: var(--tinta-suave); cursor: pointer;
}
.riel button:disabled { cursor: default; }
.riel button.aqui { color: var(--tinta); font-weight: 600; border-color: var(--tinta); }
.riel button.hecho { color: var(--ok); border-color: currentColor; }
.riel button.pendiente { opacity: .6; }

.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ficha {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 14px; cursor: pointer;
}
.ficha:hover { border-color: var(--acento); }
.ficha strong { font-size: 15px; }
.ficha .bajada { color: var(--tinta-suave); font-size: 13px; }

/* El metodo abierto */
dialog.ancho { max-width: 760px; width: 92vw; border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; background: var(--papel); color: var(--tinta); }
.campos { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.campo-metodo { border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; }
.campo-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.campo-metodo .marca { font-size: 12px; color: var(--tinta-suave); letter-spacing: 0; font-weight: 400; }
.campo-metodo .marca.respondido { color: var(--ok); }
.campo-metodo .marca.pendiente { color: var(--alerta); }
.campo-metodo .respuesta { margin: 8px 0; white-space: pre-wrap; }
.campo-metodo textarea { width: 100%; }

/* POR QUE / QUE / COMO: juntos, para no tener que recordarlos navegando. */
.porque { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; }
.bloque { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; }
.bloque .etiqueta { background: none; border: 0; padding: 0; font-size: 12px; color: var(--tinta-suave); letter-spacing: .06em; }
.bloque p { margin: 4px 0 0; }

.observables { display: flex; flex-direction: column; gap: 8px; }
.observable {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px;
}
.observable strong { min-width: 140px; }
.observable .bien { color: var(--ok); }
.observable .atencion { color: var(--alerta); }
.observable button { margin-left: auto; }

.aprendizajes { display: flex; flex-direction: column; gap: 8px; }
.aprendizaje { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; }
.aprendizaje p { margin: 0 0 4px; }

/* El renglon: una Accion leida de punta a punta.
 *
 * No es el lienzo de Sinergias. Es una sola, para que nadie tenga que
 * reconstruir en la cabeza en que parte del recorrido esta.
 */
.renglon { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 16px; }
.tramo { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-suave); }
.tramo + .tramo::before { content: "→"; margin-right: 4px; opacity: .45; }
.tramo .punto { width: 8px; height: 8px; border-radius: 99px; border: 1px solid var(--linea); background: var(--papel); }
.tramo.hecho { color: var(--tinta); }
.tramo.hecho .punto { background: var(--ok); border-color: var(--ok); }
.tramo.pausado { color: var(--alerta); }
.tramo.pausado .punto { background: var(--alerta); border-color: var(--alerta); }

/* Objetivo, KPI y atencion.
 *
 * El veredicto nunca aparece solo: las cifras que lo sostienen estan al lado,
 * para que se pueda discutir en vez de creerle.
 */
.kpis, .seniales { display: flex; flex-direction: column; gap: 8px; }
.kpi, .senial {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--linea); border-radius: var(--radio); padding: 12px;
}
.kpi.cumplido { border-left-color: var(--ok); }
.kpi.no_cumplido { border-left-color: var(--error); }
.kpi.en_curso { border-left-color: var(--acento); }
.kpi.sin_dato { border-left-color: var(--alerta); }
.kpi .cifras { font-size: 13px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.kpi .veredicto { font-size: 13px; font-weight: 500; }
.kpi.cumplido .veredicto { color: var(--ok); }
.kpi.no_cumplido .veredicto { color: var(--error); }
.kpi.sin_dato .veredicto { color: var(--alerta); }

.senial { cursor: pointer; border-left-color: var(--error); }
.senial.objetivo_sin_dato { border-left-color: var(--alerta); }
.senial:hover { border-color: var(--acento); }
.senial .bajada { color: var(--tinta-suave); font-size: 13.5px; }

/* La costura: negocios vistos desde el metodo, y Acciones vistas desde el CRM.
 * Misma pieza en los dos lados, porque es la misma relacion leida al reves.
 */
.negocios { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.negocio {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--linea); border-radius: var(--radio); padding: 12px;
}
.negocio.won { border-left-color: var(--ok); }
.negocio.lost { border-left-color: var(--error); }
.negocio.open { border-left-color: var(--acento); }
.negocio .bajada { color: var(--tinta-suave); font-size: 13px; }
.negocio button { margin-top: 4px; }

/* Dinero real: plan contra realidad, una fila por moneda.
 * Nunca un ROI ni un total mezclando monedas.
 */
.dineros { display: flex; flex-wrap: wrap; gap: 12px; }
.dinero {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px 14px; min-width: 240px;
}
.dinero .cuentas { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 13.5px; }
.dinero .neto { font-weight: 600; margin-top: 4px; }
.dinero .neto.bien { color: var(--ok); }
.dinero .neto.atencion { color: var(--alerta); }
.negocio .bajada.pendiente { color: var(--alerta); }

/* Sinergias: la pila de renglones.
 *
 * No es un canvas: no hay pan, zoom ni coordenadas. El eje X es el recorrido y
 * el eje Y es la curaduria, asi que lo unico que se mueve es el orden.
 */
.pila { display: flex; flex-direction: column; gap: 0; margin: 12px 0; }
.renglon-largo { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.renglon-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.renglon-cabeza strong { font-size: 15px; }
.renglon-cabeza .mandos { margin-left: auto; display: flex; gap: 4px; }
.tramos { display: flex; gap: 0; overflow-x: auto; }
.tramo-largo {
  display: flex; flex-direction: column; gap: 2px; min-width: 150px;
  padding: 0 12px; border-left: 1px solid var(--linea); font-size: 13px;
}
.tramo-largo:first-child { border-left: 0; padding-left: 0; }
.tramo-largo .etiqueta {
  background: none; border: 0; padding: 0; font-size: 11px;
  color: var(--tinta-suave); letter-spacing: .06em; text-transform: uppercase;
}

/* La derivacion declarada vive ENTRE dos renglones: esa es su semantica. */
.derivacion {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 4px 20px; padding: 8px 12px;
  border-left: 3px solid var(--acento); background: var(--papel);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.derivacion .punta { font-size: 18px; color: var(--acento); }
.derivacion .bajada { display: block; font-size: 13px; }
.derivacion button { margin-left: auto; }
.sin-derivacion { margin: 2px 0 2px 20px; }
.sin-derivacion button { color: var(--tinta-suave); font-size: 12.5px; border-style: dashed; }

/* La espera: la Accion sigue en marcha y ademas depende de afuera.
 * No se pinta como una pausa, porque no lo es.
 */
.espera {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--acento); border-radius: var(--radio);
  padding: 12px 14px; margin: 8px 0 4px;
}
.espera .bajada { color: var(--tinta-suave); font-size: 13.5px; }
.espera button { margin-top: 6px; }

/* Configuracion personal: renglones de ajuste.
 *
 * Cada renglon dice tres cosas —que se ajusta, con que, y de donde salio el
 * valor— porque un panel de preferencias donde no se distingue lo elegido de lo
 * que vino por defecto termina siendo una lista de cosas que nadie sabe si
 * decidio. */
.ajustes { display: flex; flex-direction: column; margin-top: 8px; }
.ajuste {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--linea);
}
.ajustes > .ajuste:first-child { border-top: none; }
.ajuste-que { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ajuste-que label { font-weight: 500; }
.ajuste-control { display: flex; align-items: center; gap: 8px; flex: none; }
.ajuste-control input[type="text"] { min-width: 220px; }
/* El dia habilitado se ve encendido; el resto queda apagado pero legible. */
.ficha.on { border-color: var(--acento); color: var(--tinta); }

/* --- Calendario ------------------------------------------------------- */
/* Grilla propia, sin libreria: una dependencia de calendario traeria su
   toolchain, su CSS y su modelo de datos, y este frontend no tiene ninguno
   de los tres. Lo que hace falta es una grilla y un drop target. */
.cal-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-titulo { font-size: 15px; font-weight: 600; min-width: 190px; }
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.cal-mes .cabecera { background: var(--fondo); color: var(--tinta-suave); font-size: 12px; text-align: center; padding: 6px 0; }
.cal-dia { background: var(--papel); min-height: 96px; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.cal-dia.fuera { background: var(--fondo); }
.cal-dia.hoy .numero { background: var(--acento); color: var(--sobre-acento); border-radius: 99px; padding: 0 6px; }
.cal-dia .numero { font-size: 12px; color: var(--tinta-suave); align-self: flex-start; }
.cal-dia.destino { outline: 2px dashed var(--acento); outline-offset: -2px; }

.cal-item { font-size: 12px; padding: 1px 5px; border-radius: 4px; border-left: 3px solid var(--acento); background: var(--fondo); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item.event { border-left-color: var(--acento); }
.cal-item.important_date { border-left-color: var(--ok); }
.cal-item.activity { border-left-color: var(--alerta); }
.cal-item.tentative { border-style: dashed; opacity: .85; }
.cal-item.cancelled { text-decoration: line-through; opacity: .55; }
.cal-item.privado::after { content: " ·"; color: var(--tinta-suave); }
.cal-item[draggable="true"] { cursor: grab; }

.cal-semana { display: grid; grid-template-columns: 56px repeat(var(--dias, 7), minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.cal-semana .col-cabecera { background: var(--fondo); color: var(--tinta-suave); font-size: 12px; text-align: center; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.cal-semana .franja { border-bottom: 1px solid var(--linea); background: var(--papel); padding: 2px; min-height: 26px; display: flex; flex-direction: column; gap: 2px; }
.cal-horas { border-right: 1px solid var(--linea); background: var(--fondo); }
.cal-horas div { height: 34px; font-size: 11px; color: var(--tinta-suave); text-align: right; padding-right: 6px; box-sizing: border-box; }
.cal-col { position: relative; border-right: 1px solid var(--linea); background: var(--papel); }
.cal-col .hora { height: 34px; border-bottom: 1px solid var(--linea); box-sizing: border-box; }
.cal-col.destino { background: color-mix(in srgb, var(--acento) 8%, var(--papel)); }
.cal-bloque { position: absolute; left: 2px; right: 2px; background: color-mix(in srgb, var(--acento) 14%, var(--papel)); border-left: 3px solid var(--acento); border-radius: 4px; font-size: 12px; padding: 2px 4px; overflow: hidden; cursor: grab; box-sizing: border-box; }
.cal-bloque.tentative { border-style: dashed; }
.cal-bloque.cancelled { opacity: .5; text-decoration: line-through; }
.cal-bloque .agarre { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.cal-bloque .cuando { color: var(--tinta-suave); font-size: 11px; }

.cal-leyenda { display: flex; gap: 14px; flex-wrap: wrap; color: var(--tinta-suave); font-size: 12px; margin-top: 10px; }
.cal-leyenda span::before { content: "■ "; }
.cal-leyenda .event::before { color: var(--acento); }
.cal-leyenda .important_date::before { color: var(--ok); }
.cal-leyenda .activity::before { color: var(--alerta); }