/* Tema de Validate.lat sobre esmind UI (la librería NO se modifica; aquí solo se sobreescriben tokens).
   Colores del mockup: magenta de marca + turquesa para acciones principales. */
:root {
  --esm-brand: #e51c71;
  --esm-brand-ink: #ffffff;
  --esm-brand-2: #ee6ca3;

  --esm-success: #0f9f8c;
  --esm-success-soft: #d6f7f2;
  --esm-success-glow: rgb(1 202 180 / .5);

  --vl-accent: #01cab4;
  --vl-accent-ink: #ffffff;
  --vl-accent-gradient: linear-gradient(135deg, #3fe0ce, var(--vl-accent));
}

/* Botón de acción principal (INICIAR VALIDACIÓN, VALIDADO…) */
.vl-btn-accent { background: var(--vl-accent-gradient); color: var(--vl-accent-ink); }
.vl-btn-accent:hover { filter: brightness(.95) saturate(1.1); box-shadow: 0 6px 18px rgb(1 202 180 / .4); }

/* ---- Cabecera (hero) con la composición del Figma ------------------------------------------------
   Saludo o título con línea divisoria, cuerpo opcional (KPIs + carrusel) y pestañas tipo carpeta al pie. */
.vl-hero-head { padding: 8px 0 16px; border-bottom: 1px solid var(--esm-border); }
.vl-hero-head .esm-h1 { margin: 0; }
.vl-hero-body { padding: 28px 0 24px; }
.vl-hero-end { height: 24px; }                       /* cierre de la cabecera cuando no hay pestañas */
.vl-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 24px; align-items: start; }
@media (max-width: 1200px) { .vl-hero-grid { grid-template-columns: 1fr; } }


/* Mensaje de "sin datos" dentro de una tarjeta de gráfico. */
.vl-empty { text-align: center; padding: 48px 0; }

/* Las páginas dejan aire entre tarjetas apiladas. */
.esm-page > .esm-tabpanel > * + * { margin-top: var(--esm-space-5); }

/* ---- Detalle del caso (interactivo) ------------------------------------------------------------- */
.vl-case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--esm-space-5); margin-top: var(--esm-space-5); align-items: start; }
@media (max-width: 1100px) { .vl-case-grid { grid-template-columns: 1fr; } }
.vl-case-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.vl-case-photo { width: 76px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--esm-border); background: var(--esm-surface-2, #f3f4f6); }

/* Tarjetas de módulo: el borde izquierdo indica el estado. */
.vl-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--esm-space-4); }
.vl-module { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid transparent; transition: border-color .3s, box-shadow .3s; }
.vl-module.is-busy { border-left-color: var(--vl-accent); box-shadow: 0 0 0 1px rgb(1 202 180 / .25); }
.vl-module__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.vl-module__title { margin: 0 0 2px; font-size: var(--esm-text-md, 1rem); font-weight: 600; }
.vl-module__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 12px 0 0; }
.vl-module__facts div { min-width: 0; }
.vl-module__facts dt { font-size: 12px; color: var(--esm-text-muted, #6b7280); }
.vl-module__facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.vl-module__facts--all { grid-template-columns: 1fr; }
.vl-module__facts--all div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--esm-border); padding: 3px 0; }
.vl-module__facts--all dd { text-align: right; font-weight: 500; }
.vl-module__more { margin-top: 10px; }
.vl-module__more summary { cursor: pointer; font-size: 13px; color: var(--esm-brand); }
.vl-module__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; }

/* Línea de tiempo del registro de acciones. */
.vl-timeline { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.vl-timeline__item { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 0 8px 12px; border-left: 2px solid var(--esm-border); position: relative; }
.vl-timeline__item::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--esm-border); }
.vl-timeline__item--creado::before, .vl-timeline__item--veredicto::before { background: var(--esm-brand); }
.vl-timeline__item--reconsulta::before { background: var(--vl-accent); }
.vl-timeline__item--modulo_falla::before, .vl-timeline__item--modulo_revision::before { background: #f59e0b; }
.vl-timeline__when { font-size: 12px; color: var(--esm-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.vl-timeline--detail .vl-timeline__item { grid-template-columns: 130px 1fr; }
.vl-internal { font-family: ui-monospace, monospace; font-size: 12px; background: var(--esm-surface-2, #f6f7f9); border-radius: 8px; padding: 8px 10px; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }