/* ============================================================
   vacaciones-ui.css - Estilos de la pantalla de vacaciones del
   colaborador. FUENTE UNICA: la usan /vacaciones y /portal.
   Pareja de public/js/vacaciones-ui.js.

   TODO va con prefijo .ecv- a proposito. Las dos paginas que la
   montan definen sus propias .card y .card-body con valores
   DISTINTOS (borde de 2px y max-width en /vacaciones, otro fondo
   y margen en /portal): sin prefijo, la pantalla se veria de una
   forma en cada ruta, que es exactamente lo que se vino a
   eliminar. Aqui no se reutiliza ninguna clase de las paginas.

   Solo tokens --ec-*: sin HEX, sin px sueltos fuera de la escala,
   claro y oscuro por [data-theme] (AGENTS.md).
   ============================================================ */

.ecv { font-family: var(--ec-font-sans); color: var(--ec-text); }

/* ── Datos del colaborador ───────────────────────────────── */
.ecv-col {
  background: var(--ec-bg-subtle);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-md);
  padding: var(--ec-space-4);
  margin-bottom: var(--ec-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ec-space-3);
}
.ecv-col-f label {
  display: block;
  font-size: 9px;
  color: var(--ec-text-2);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.ecv-col-f p {
  font-size: 13px;
  color: var(--ec-text);
  font-weight: 600;
  margin-top: 2px;
  word-break: break-word;
}
/* v84 F2: aqui vivia .ecv-badge-auto, la insignia AUTO-APROBACION del
   puesto que contenia "gerente". Su markup se fue de vacaciones-ui.js con el
   atajo del backend; la regla se va con el. */

/* ── Las 5 cifras ────────────────────────────────────────── */
/* auto-fit para que fluyan sin huecos raros en cualquier ancho */
.ecv-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--ec-space-2);
  margin-bottom: var(--ec-space-4);
}
.ecv-cifra {
  background: var(--ec-bg-subtle);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-md);
  padding: var(--ec-space-3);
  text-align: center;
}
.ecv-cifra-n { font-size: 28px; font-weight: 900; line-height: 1; color: var(--ec-text); }
.ecv-cifra-l {
  font-size: 9px;
  color: var(--ec-text-2);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 3px;
}
/* El color NUNCA es el unico portador del significado: la etiqueta
   de debajo ya dice que es cada cifra (WCAG 2.2, AGENTS.md #9). */
.ecv-n-corresponden { color: var(--ec-text); }
.ecv-n-disfrutados  { color: var(--ec-success); }
.ecv-n-proceso      { color: var(--ec-warning); }
.ecv-n-disponibles  { color: var(--ec-primary-strong); }
.ecv-n-prescribir   { color: var(--ec-text-2); }
.ecv-n-prescribir.ecv-alerta { color: var(--ec-danger); }

/* ── Aviso de prescripcion ───────────────────────────────── */
.ecv-aviso {
  display: flex;
  gap: var(--ec-space-3);
  align-items: flex-start;
  padding: var(--ec-space-4);
  border-radius: var(--ec-radius-md);
  margin-bottom: var(--ec-space-4);
  background: color-mix(in srgb, var(--ec-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ec-warning) 35%, transparent);
}
.ecv-aviso.ecv-urgente {
  background: color-mix(in srgb, var(--ec-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--ec-danger) 35%, transparent);
}
.ecv-aviso-ico { font-size: 20px; line-height: 1; }
.ecv-aviso-t { font-weight: 700; font-size: 14px; color: var(--ec-warning); }
.ecv-aviso.ecv-urgente .ecv-aviso-t { color: var(--ec-danger); }
.ecv-aviso-d { font-size: 13px; margin-top: var(--ec-space-1); line-height: 1.5; color: var(--ec-text); }

/* ── Pestanas ────────────────────────────────────────────── */
/* Son estado INTERNO de la pantalla: no tocan el historial del
   navegador. En /portal el boton atras sigue saliendo de la
   seccion Vacaciones, igual que antes de unificar. */
.ecv-tabs {
  display: flex;
  border-bottom: 1px solid var(--ec-border);
  margin-bottom: var(--ec-space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.ecv-tabs::-webkit-scrollbar { display: none; }
.ecv-tab {
  flex-shrink: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--ec-space-2) var(--ec-space-4);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ec-text-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.ecv-tab:hover { color: var(--ec-text); }
.ecv-tab[aria-selected="true"] { color: var(--ec-primary-strong); border-bottom-color: var(--ec-primary-strong); }
.ecv-tab:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: -2px; }
.ecv-panel[hidden] { display: none; }

/* ── Formulario ──────────────────────────────────────────── */
.ecv-sep {
  font-size: 9px;
  color: var(--ec-primary-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--ec-border);
  padding-bottom: var(--ec-space-1);
  margin: var(--ec-space-3) 0 var(--ec-space-2);
}
.ecv-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ec-space-3); }
@media (max-width: 480px) { .ecv-g2 { grid-template-columns: 1fr; } }
.ecv-fg { margin-bottom: var(--ec-space-3); }
.ecv-fg label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ec-text-2);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: var(--ec-space-1);
}
.ecv-fg input {
  width: 100%;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-sm);
  padding: var(--ec-space-2) var(--ec-space-3);
  color: var(--ec-text);
  font-family: var(--ec-font-sans);
  font-size: 14px;
  min-height: 44px;
  transition: border var(--ec-dur-fast) var(--ec-ease-standard);
}
.ecv-fg input:focus { outline: none; border-color: var(--ec-focus); }

/* v43: campo calculado (reincorporacion). Se ve como dato, no como casilla
   por llenar — si pareciera editable, el colaborador intentaria corregirlo. */
.ecv-fg input.ecv-ro {
  background: var(--ec-bg-subtle);
  color: var(--ec-text-2);
  cursor: default;
}
.ecv-fg input.ecv-ro:focus { border-color: var(--ec-border); }

.ecv-calc {
  background: var(--ec-bg-subtle);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-sm);
  padding: var(--ec-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ec-space-3);
}
.ecv-calc span { font-size: 12px; color: var(--ec-text-2); }
.ecv-calc strong { font-size: 22px; font-weight: 900; color: var(--ec-primary-strong); }
.ecv-nota-rol { font-size: 11px; color: var(--ec-text-2); margin-top: var(--ec-space-2); line-height: 1.5; }

.ecv-legal {
  background: color-mix(in srgb, var(--ec-accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ec-accent) 10%, transparent);
  border-radius: var(--ec-radius-sm);
  padding: var(--ec-space-3);
  font-size: 11px;
  color: var(--ec-text-2);
  line-height: 1.6;
  margin: var(--ec-space-3) 0;
}

/* ── v60 · LIENZO DE FIRMA ─────────────────────────────────────────
   EL FONDO ES CLARO Y ESO NO ES UNA ELECCION ESTETICA. La tinta la fija
   /js/firma-canvas.js en oscuro porque el trazo acaba estampado sobre el papel
   blanco del RH-FO-04: una firma clara luciria en el movil y saldria invisible
   en el PDF. Siendo la tinta oscura por obligacion, el lienzo tiene que ser
   claro para que quien firma vea lo que esta trazando — que es exactamente lo
   que /portal no hacia (fondo #1A1A18 y trazo negro). */
.ecv-firma-cap { margin: var(--ec-space-3) 0; }
.ecv-firma-ind { font-size: 11px; color: var(--ec-text-2); line-height: 1.5; margin-bottom: var(--ec-space-2); }
.ecv-firma-wrap { position: relative; }
.ecv-firma-canvas {
  display: block;
  width: 100%;
  height: 160px;
  background: #FAFAF5;
  border: 2px solid var(--ec-border-strong);
  border-radius: var(--ec-radius-sm);
  cursor: crosshair;
  /* Sin esto, arrastrar el dedo para firmar desplaza la pagina en vez de
     dibujar: en movil el lienzo seria inservible. */
  touch-action: none;
}
.ecv-firma-canvas.activo { border-color: var(--ec-accent); }
.ecv-firma-canvas:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }
.ecv-firma-ph {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 12px; color: #8A857E; pointer-events: none; text-align: center;
}
.ecv-firma-acts { display: flex; align-items: center; gap: var(--ec-space-2); margin-top: var(--ec-space-2); }
.ecv-firma-limpiar {
  background: transparent;
  color: var(--ec-text-2);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-sm);
  padding: var(--ec-space-2) var(--ec-space-3);
  font-size: 12px;
  font-family: var(--ec-font-sans);
  min-height: 36px;
  cursor: pointer;
}
.ecv-firma-limpiar:hover { border-color: var(--ec-border-strong); }
.ecv-firma-limpiar:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }
.ecv-firma-estado { font-size: 12px; }
.ecv-firma-estado.ecv-firma-falta { color: var(--ec-danger); font-weight: 700; }

.ecv-firmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ec-space-2); margin: var(--ec-space-3) 0; }
.ecv-firma {
  background: var(--ec-bg-subtle);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-sm);
  padding: var(--ec-space-3);
  text-align: center;
}
.ecv-firma-n { font-size: 10px; color: var(--ec-primary-strong); font-weight: 700; }
.ecv-firma-l { height: 20px; border-bottom: 1px solid var(--ec-border-strong); margin: var(--ec-space-2) 0 var(--ec-space-1); }
.ecv-firma-p { font-size: 8px; color: var(--ec-text-2); }

.ecv-enviar {
  background: var(--ec-accent);
  color: var(--ec-on-accent);
  border: none;
  border-radius: var(--ec-radius-md);
  padding: var(--ec-space-3);
  font-size: 14px;
  font-weight: 700;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--ec-font-sans);
  transition: opacity var(--ec-dur-fast) var(--ec-ease-standard);
}
.ecv-enviar:hover { opacity: .9; }
.ecv-enviar:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }
.ecv-enviar:disabled { opacity: .5; cursor: not-allowed; }
/* v84 F2: y aqui .ecv-enviar.ecv-gerente, el boton verde de "Autorizar
   vacaciones". Ya no hay accion que distinguir: todo el mundo solicita. */

/* ── Historial ───────────────────────────────────────────── */
.ecv-hist {
  background: var(--ec-bg-subtle);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-md);
  padding: var(--ec-space-3);
  margin-bottom: var(--ec-space-2);
  display: flex;
  align-items: center;
  gap: var(--ec-space-3);
}
.ecv-hist-n { font-size: 22px; font-weight: 900; min-width: 32px; text-align: center; color: var(--ec-primary-strong); }
.ecv-hist-n.ecv-ok  { color: var(--ec-success); }
.ecv-hist-n.ecv-no  { color: var(--ec-danger); }
.ecv-hist-n.ecv-mut { color: var(--ec-text-2); }
.ecv-hist-i { flex: 1; min-width: 0; }
.ecv-hist-f { font-size: 13px; font-weight: 600; color: var(--ec-text); }
.ecv-hist-m { font-size: 11px; color: var(--ec-text-2); margin-top: 2px; line-height: 1.4; }
.ecv-etiq {
  display: inline-block;
  padding: 2px var(--ec-space-2);
  border-radius: var(--ec-radius-full);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.ecv-e-pend { background: color-mix(in srgb, var(--ec-warning) 15%, transparent); color: var(--ec-warning); }
.ecv-e-ap   { background: color-mix(in srgb, var(--ec-success) 15%, transparent); color: var(--ec-success); }
.ecv-e-re   { background: color-mix(in srgb, var(--ec-danger)  15%, transparent); color: var(--ec-danger); }
.ecv-e-hist { background: color-mix(in srgb, var(--ec-info)    15%, transparent); color: var(--ec-info); }

.ecv-subt {
  font-size: 11px;
  color: var(--ec-text-2);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: var(--ec-space-4) 0 var(--ec-space-2);
}
.ecv-vacio { font-size: 12px; color: var(--ec-text-2); text-align: center; padding: var(--ec-space-5); }

/* ── Tabla anual ─────────────────────────────────────────── */
.ecv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ecv-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.ecv-tabla th {
  color: var(--ec-text-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: var(--ec-space-1) var(--ec-space-2);
  text-align: left;
  border-bottom: 1px solid var(--ec-border);
  white-space: nowrap;
}
.ecv-tabla td { padding: var(--ec-space-2); border-bottom: 1px solid var(--ec-hover); color: var(--ec-text); white-space: nowrap; }
.ecv-t-corr { color: var(--ec-primary-strong); font-weight: 700; }
.ecv-t-disf { color: var(--ec-success); }
.ecv-t-rech { color: var(--ec-danger); }
.ecv-t-pend { color: var(--ec-warning); }

/* ── Estados de carga y error ────────────────────────────── */
.ecv-cargando { font-size: 12px; color: var(--ec-text-2); padding: var(--ec-space-4); }
.ecv-error {
  background: color-mix(in srgb, var(--ec-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ec-danger) 30%, transparent);
  color: var(--ec-danger);
  border-radius: var(--ec-radius-md);
  padding: var(--ec-space-4);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Aviso flotante ──────────────────────────────────────── */
/* El modulo crea el suyo: /portal no tenia ninguno y usaba alert(). */
.ecv-toast {
  position: fixed;
  bottom: var(--ec-space-5);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-left: 4px solid var(--ec-success);
  border-radius: var(--ec-radius-md);
  box-shadow: var(--ec-shadow-lg);
  padding: var(--ec-space-3) var(--ec-space-4);
  font-size: 13px;
  color: var(--ec-text);
  z-index: var(--ec-z-toast);
  max-width: min(90vw, 360px);
  line-height: 1.5;
}
.ecv-toast.ecv-toast-err { border-left-color: var(--ec-danger); }
@media (min-width: 768px) { .ecv-toast { left: auto; right: var(--ec-space-5); transform: none; } }

/* iOS hace zoom si el input mide menos de 16px */
@media (max-width: 768px) {
  .ecv-fg input { font-size: 16px; }
}

/* ── v62 · Histórico por año ───────────────────────────────────────
   Los años cerrados se ven, pero apagados: no aportan saldo y mezclarlos con
   el vigente al mismo peso invita a sumarlos mentalmente. */
.ecv-tabla tr.ecv-cerrado td { color: var(--ec-text-2); }
.ecv-tabla tr.ecv-vigente td { background: color-mix(in srgb, var(--ec-accent) 6%, transparent); }
.ecv-t-cerr { font-size: 11px; color: var(--ec-text-3); }
/* v80 · El total de la columna Disfrutados. Se separa con una línea superior y
   NO se apaga como los años cerrados: es el número que tiene que coincidir con
   el que RH ve en Datos laborales, y estaba pidiendo sumarse a ojo. */
.ecv-tabla tr.ecv-total td {
  border-top: 1px solid var(--ec-border); border-bottom: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ec-text-2);
}
.ecv-tabla tr.ecv-total td.ecv-t-disf { font-size: 14px; text-transform: none; letter-spacing: 0; }
.ecv-nota-anual {
  font-size: 11px; color: var(--ec-text-2); line-height: 1.6;
  margin-top: var(--ec-space-3); padding: var(--ec-space-3);
  background: var(--ec-bg-subtle); border-radius: var(--ec-radius-sm);
}

/* ── v63 · Saldo negativo por días adelantados ─────────────────────
   La cifra en rojo NO va sola nunca: debajo va la frase que explica de dónde
   viene la deuda. Un "-2" sin contexto es peor que no enseñarlo. */
.ecv-cifra.ecv-debe .ecv-cifra-n { color: var(--ec-danger); }
.ecv-adelanto {
  font-size: 12px; line-height: 1.6; margin-top: var(--ec-space-2);
  padding: var(--ec-space-3); border-radius: var(--ec-radius-sm);
  background: color-mix(in srgb, var(--ec-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ec-warning) 32%, transparent);
  color: var(--ec-text);
}

/* v63 · Los días en proceso, explicados junto al disponible del que se restan. */
.ecv-enproceso {
  font-size: 12px; line-height: 1.6; margin-top: var(--ec-space-2);
  padding: var(--ec-space-3); border-radius: var(--ec-radius-sm);
  background: var(--ec-bg-subtle); border: 1px solid var(--ec-border);
  color: var(--ec-text-2);
}

/* v149 (D12): la cancelacion que pide el colaborador, debajo de cada solicitud. */
.ecv-hist-bloque { margin-bottom: var(--ec-space-2); }
.ecv-hist-bloque > .ecv-hist { margin-bottom: 0; }
.ecv-cancel { padding: var(--ec-space-2) var(--ec-space-3) 0; display: flex; flex-direction: column; gap: var(--ec-space-2); }
.ecv-cancel-nota { font-size: 12px; color: var(--ec-text-2); margin: 0; line-height: 1.4; }
.ecv-cancel-btn, .ecv-cancel-enviar, .ecv-cancel-volver {
  align-self: flex-start; min-height: 40px; padding: 0 var(--ec-space-3); border-radius: var(--ec-radius-md);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--ec-danger); background: transparent; color: var(--ec-danger);
}
.ecv-cancel-enviar { background: var(--ec-danger); color: #fff; }
.ecv-cancel-volver { border-color: var(--ec-border); color: var(--ec-text); }
.ecv-cancel-btn[hidden], .ecv-cancel-form[hidden] { display: none; }
.ecv-cancel-form { display: flex; flex-direction: column; gap: var(--ec-space-2); }
.ecv-cancel-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ec-text); }
.ecv-cancel-lbl textarea { font: inherit; font-size: 14px; padding: var(--ec-space-2); border: 1px solid var(--ec-border); border-radius: var(--ec-radius-md); background: var(--ec-bg); color: var(--ec-text); resize: vertical; }
.ecv-cancel-acts { display: flex; gap: var(--ec-space-2); flex-wrap: wrap; }

/* F3: el formato RH-FO-04 debajo de cada solicitud autorizada o cancelada (ver / descargar). */
.ecv-formato { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ec-space-2); padding: var(--ec-space-2) var(--ec-space-3) 0; }
.ecv-formato-t { flex: 1 1 100%; font-size: 12px; color: var(--ec-text-2); }
.ecv-formato-btn {
  min-height: 40px; padding: 0 var(--ec-space-3); border-radius: var(--ec-radius-md);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--ec-border); background: transparent; color: var(--ec-text);
}
.ecv-formato-btn:disabled { opacity: .6; cursor: wait; }
.ecv-sin-formato { font-style: italic; }