/* ==========================================================================
   FumiTrack - hoja de estilos
   Sin dependencias externas: todo corre offline.
   ========================================================================== */

:root {
  --verde: #0f766e;
  --verde-osc: #115e59;
  --verde-claro: #ccfbf1;
  --tinta: #0f172a;
  --gris-900: #1e293b;
  --gris-700: #334155;
  --gris-500: #64748b;
  --gris-400: #94a3b8;
  --gris-300: #cbd5e1;
  --gris-200: #e2e8f0;
  --gris-100: #f1f5f9;
  --gris-50: #f8fafc;
  --blanco: #ffffff;

  --critica: #dc2626;
  --alta: #ea580c;
  --media: #ca8a04;
  --baja: #0891b2;
  --exito: #16a34a;
  --info: #2563eb;

  --radio: 10px;
  --radio-sm: 6px;
  --radio-lg: 14px;
  --sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --sombra-md: 0 4px 12px rgba(15, 23, 42, .08);
  --sombra-lg: 0 12px 32px rgba(15, 23, 42, .14);
  --ancho-nav: 232px;
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris-900);
  background: var(--gris-50);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; color: var(--tinta); font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75rem; }

/* ---------------------------------------------------------------- Layout */
.app { display: flex; min-height: 100vh; }

.nav {
  width: var(--ancho-nav);
  flex-shrink: 0;
  background: var(--tinta);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.nav__marca {
  padding: 1.15rem 1.15rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav__marca strong {
  display: block; color: #fff; font-size: 1.1rem; letter-spacing: -.01em;
}
.nav__marca span { font-size: .72rem; color: var(--gris-400); }

.nav__grupo { padding: .9rem 0 .3rem; }
.nav__titulo {
  padding: 0 1.15rem .35rem;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: #64748b; font-weight: 700;
}
.nav a.nav__item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1.15rem;
  color: #cbd5e1; font-size: .875rem; text-decoration: none;
  border-left: 3px solid transparent;
}
.nav a.nav__item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.nav__item.activo {
  background: rgba(20, 184, 166, .14);
  border-left-color: #2dd4bf;
  color: #fff; font-weight: 600;
}
.nav__item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.nav__badge {
  margin-left: auto; background: var(--critica); color: #fff;
  font-size: .68rem; font-weight: 700; padding: .05rem .38rem; border-radius: 20px;
}

.nav__pie {
  margin-top: auto; padding: .9rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .78rem;
}
.nav__usuario { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--verde); color: #fff;
  display: grid; place-items: center;
  font-size: .74rem; font-weight: 700; flex-shrink: 0;
}
.nav__usuario div { min-width: 0; }
.nav__usuario strong { display: block; color: #fff; font-size: .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__usuario span { color: var(--gris-400); font-size: .7rem; }

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-200);
  padding: .85rem 1.6rem;
  display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 20;
}
.barra h1 { margin: 0; font-size: 1.22rem; }
.barra__sub { color: var(--gris-500); font-size: .8rem; }
.barra__acciones { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

.pagina { padding: 1.4rem 1.6rem 3rem; flex: 1; }

/* --------------------------------------------------------------- Tarjetas */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta__cabeza {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--gris-200);
  display: flex; align-items: center; gap: .6rem;
}
.tarjeta__cabeza h3 { margin: 0; font-size: .95rem; }
.tarjeta__cabeza .der { margin-left: auto; display: flex; gap: .45rem; align-items: center; }
.tarjeta__cuerpo { padding: 1.1rem; }
.tarjeta__cuerpo--compacto { padding: .55rem .35rem; }

.rejilla { display: grid; gap: 1rem; }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--kpi { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.rejilla--2-1 { grid-template-columns: 2fr 1fr; }
.rejilla--1-2 { grid-template-columns: 1fr 2fr; }

/* ------------------------------------------------------------------- KPIs */
.kpi {
  position: relative;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-left: 3px solid var(--verde);
  border-radius: var(--radio-lg);
  padding: .9rem 1rem;
  box-shadow: var(--sombra);
  display: flex; align-items: flex-start; gap: .7rem;
}
.kpi__icono {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--gris-100); color: var(--gris-500);
}
.kpi__icono svg { width: 17px; height: 17px; }
.kpi__icono--verde   { background: #ccfbf1; color: #0f766e; }
.kpi__icono--info    { background: #dbeafe; color: #1d4ed8; }
.kpi__icono--alerta  { background: #ffedd5; color: #c2410c; }
.kpi__icono--critico { background: #fee2e2; color: #b91c1c; }
.kpi__icono--exito   { background: #dcfce7; color: #15803d; }
.kpi__texto { min-width: 0; }
.kpi__etiqueta {
  font-size: .69rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gris-500); font-weight: 700; margin-bottom: .15rem;
}
.kpi__valor { font-size: 1.75rem; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.kpi__pie { font-size: .74rem; color: var(--gris-500); margin-top: .1rem; }
.kpi--critico { border-left-color: var(--critica); }
.kpi--critico .kpi__valor { color: var(--critica); }
.kpi--alerta { border-left-color: var(--alta); }
.kpi--alerta .kpi__valor { color: var(--alta); }
.kpi--exito { border-left-color: var(--exito); }
.kpi--exito .kpi__valor { color: var(--exito); }
.kpi--info { border-left-color: var(--info); }

/* La linea de tendencia al fondo de una tarjeta. Va sin ejes ni numeros a
   proposito: es un gesto que dice "viene subiendo", no una grafica. Quien
   quiera leer valores tiene la grafica completa mas abajo, en esta pantalla. */
.chispa {
  position: absolute; right: 0; bottom: 0;
  width: 60%; height: 30px; opacity: .45; pointer-events: none;
}
.chispa polyline {
  fill: none; stroke: var(--verde); stroke-width: 2;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}

/* --------------------------------------------------------------- Insignias */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem;
  border-radius: 20px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.chip--CRITICA  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.chip--ALTA     { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.chip--MEDIA    { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.chip--BAJA     { background: #cffafe; color: #155e75; border-color: #a5f3fc; }

.chip--ABIERTO        { background: #fee2e2; color: #991b1b; }
.chip--EN_PROCESO     { background: #fef3c7; color: #92400e; }
.chip--EN_VERIFICACION{ background: #dbeafe; color: #1e40af; }
.chip--RECHAZADO      { background: #f3e8ff; color: #6b21a8; }
.chip--CERRADO        { background: #dcfce7; color: #166534; }
.chip--CANCELADO      { background: var(--gris-200); color: var(--gris-700); }

.chip--CARGADO   { background: var(--gris-200); color: var(--gris-700); }
.chip--PROCESANDO{ background: #fef3c7; color: #92400e; }
.chip--EXTRAIDO  { background: #dbeafe; color: #1e40af; }
.chip--VALIDADO  { background: #dcfce7; color: #166534; }
.chip--ERROR     { background: #fee2e2; color: #991b1b; }

/* Documentos. VENCIDO y SIN_CARGAR comparten el rojo a proposito: para quien
   esta pidiendo el papel son la misma cosa, no lo tienes. Los dos "sin" llevan
   el borde punteado porque no son un veredicto sobre el documento sino un hueco
   nuestro, y se arreglan distinto: uno se tramita, el otro nomas se captura. */
.chip--VIGENTE      { background: #dcfce7; color: #166534; }
.chip--POR_VENCER   { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.chip--VENCIDO      { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.chip--SIN_CARGAR   { background: #fee2e2; color: #991b1b; border-style: dashed; border-color: #f87171; }
.chip--SIN_VIGENCIA { background: #fef9c3; color: #854d0e; border-style: dashed; border-color: #d4a72c; }

.chip--neutro { background: var(--gris-100); color: var(--gris-700); border-color: var(--gris-200); }
.chip--vencido { background: var(--critica); color: #fff; }
.chip--ia { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.chip--ok { background: #dcfce7; color: #166534; }

/* ---------------------------------------------------------------- Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .46rem .85rem;
  border-radius: var(--radio-sm);
  border: 1px solid var(--gris-300);
  background: var(--blanco);
  color: var(--gris-900);
  font-size: .84rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: var(--gris-100); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }

.btn--primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn--primario:hover { background: var(--verde-osc); border-color: var(--verde-osc); }
.btn--peligro { background: var(--critica); border-color: var(--critica); color: #fff; }
.btn--peligro:hover { background: #b91c1c; }
.btn--exito { background: var(--exito); border-color: var(--exito); color: #fff; }
.btn--exito:hover { background: #15803d; }
.btn--sm { padding: .28rem .58rem; font-size: .76rem; }
.btn--bloque { width: 100%; }
.btn--fantasma { background: transparent; border-color: transparent; color: var(--gris-500); }
.btn--fantasma:hover { background: var(--gris-100); color: var(--gris-900); }

/* ------------------------------------------------------------ Formularios */
.campo { margin-bottom: .85rem; }
.campo label {
  display: block; margin-bottom: .28rem;
  font-size: .78rem; font-weight: 650; color: var(--gris-700);
}
.campo .ayuda { font-size: .73rem; color: var(--gris-500); margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=file], select, textarea {
  width: 100%;
  padding: .46rem .6rem;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  font-size: .86rem; font-family: inherit;
  color: var(--gris-900); background: var(--blanco);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .13);
}
textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
select { cursor: pointer; }
input[type=file] { padding: .35rem; font-size: .8rem; }

.fila { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.fila > .campo { flex: 1; min-width: 150px; margin-bottom: 0; }

.filtros {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}

/* ----------------------------------------------------------------- Tablas */
.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .845rem; }
table.tabla th {
  text-align: left; padding: .55rem .75rem;
  font-size: .69rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gris-500); font-weight: 700;
  border-bottom: 1px solid var(--gris-200);
  background: var(--gris-50); white-space: nowrap;
}
table.tabla td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--gris-100);
  vertical-align: middle;
}
table.tabla tbody tr:hover { background: var(--gris-50); }
table.tabla tbody tr.vencido { background: #fef2f2; }
table.tabla tbody tr.vencido:hover { background: #fee2e2; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

/* ---------------------------------------------------------------- Mensajes */
.mensajes { margin-bottom: 1rem; display: grid; gap: .5rem; }
.mensaje {
  padding: .65rem .9rem;
  border-radius: var(--radio-sm);
  border-left: 3px solid;
  font-size: .86rem;
  display: flex; gap: .5rem; align-items: flex-start;
}
.mensaje--exito { background: #f0fdf4; border-color: var(--exito); color: #166534; }
.mensaje--error { background: #fef2f2; border-color: var(--critica); color: #991b1b; }
.mensaje--info  { background: #eff6ff; border-color: var(--info); color: #1e40af; }
.mensaje--alerta{ background: #fffbeb; border-color: var(--media); color: #854d0e; }

.vacio {
  text-align: center; padding: 2.6rem 1rem; color: var(--gris-500);
}
.vacio h3 { color: var(--gris-700); }
.vacio svg { width: 42px; height: 42px; opacity: .3; margin-bottom: .6rem; }

/* --------------------------------------------------------------- Graficas */
.grafica { position: relative; height: 260px; }
.grafica--alta { height: 320px; }
.grafica--baja { height: 210px; }

/* "Como se lee": la frase que va debajo de cada grafica para quien la ve por
   primera vez. Dice que representa cada barra o linea y hacia donde es
   bueno que se mueva. Va en gris para no pelear con la grafica, pero con un
   arranque en negritas para que el ojo la encuentre. */
.lectura {
  margin: .55rem 0 0; padding: .5rem .7rem;
  font-size: .78rem; line-height: 1.45; color: var(--gris-600, #475569);
  background: var(--gris-50, #f8fafc); border-left: 3px solid var(--gris-200);
  border-radius: 0 6px 6px 0;
}
.lectura strong { color: var(--gris-700); }
.lectura--aviso { border-left-color: var(--media, #d97706); background: #fffbeb; }

/* ---------------------------------------------------------------- Timeline */
.linea { list-style: none; margin: 0; padding: 0; }
.linea li {
  position: relative; padding: 0 0 .95rem 1.25rem;
  border-left: 2px solid var(--gris-200);
}
.linea li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linea li::before {
  content: ""; position: absolute; left: -5px; top: .34rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gris-300); border: 2px solid var(--blanco);
}
.linea li.ia::before { background: #8b5cf6; }
.linea li.destacado::before { background: var(--verde); }
.linea__meta { font-size: .72rem; color: var(--gris-500); }
.linea__texto { font-size: .85rem; white-space: pre-wrap; }

/* -------------------------------------------------------------- Evidencias */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .7rem; }
.evidencia {
  border: 1px solid var(--gris-200); border-radius: var(--radio-sm);
  overflow: hidden; background: var(--blanco);
}
.evidencia img { width: 100%; height: 118px; object-fit: cover; display: block; cursor: zoom-in; }
.evidencia__doc {
  height: 118px; display: grid; place-items: center;
  background: var(--gris-100); color: var(--gris-500); font-size: .78rem;
}
.evidencia__pie { padding: .4rem .5rem; font-size: .71rem; color: var(--gris-500); }
.evidencia--solucion { border-color: #86efac; }
.evidencia--hallazgo { border-color: #fca5a5; }

.visor {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .9);
  display: none; place-items: center; z-index: 200; padding: 2rem;
}
.visor.abierto { display: grid; }
.visor img { max-width: 100%; max-height: 90vh; border-radius: var(--radio); }
.visor__cerrar {
  position: absolute; top: 1rem; right: 1.4rem;
  color: #fff; font-size: 2rem; cursor: pointer; line-height: 1;
  background: none; border: none;
}

/* ------------------------------------------------------- El modelo 3D
   Antes esta caja usaba la clase `.visor`, que es el modal de fotos de aqui
   arriba y trae `display:none` hasta que se le agrega `.abierto`. El estilo
   en linea le cambiaba la posicion pero no el display, asi que el modelo
   Matterport del CEDIS nunca se veia: la pantalla se pintaba entera y
   correcta, con un hueco donde iba lo unico que no se puede sustituir con
   una tabla. Vale la pena su propia clase. */
.modelo3d {
  position: relative; width: 100%; padding-top: 56.25%;
  overflow: hidden; border-radius: var(--radio);
  background: var(--gris-900);
}
.modelo3d > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modelo3d--alto { padding-top: 70%; }

/* La lista de objetos marcados en el recorrido. El color de la izquierda es el
   del tipo de anotacion y viene del enum, no de aqui: la forma y el color los
   define `TipoAnotacion` para que el visor, el acta y el Excel usen el mismo. */
.anotacion {
  border: 1px solid var(--gris-200); border-left: 3px solid var(--gris-300);
  border-radius: var(--radio-sm); padding: .55rem .7rem; margin-bottom: .5rem;
  background: var(--blanco);
}
.anotacion__cabeza { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.anotacion__titulo { font-weight: 650; font-size: .87rem; }
.anotacion__pie {
  margin-top: .3rem; font-size: .74rem; color: var(--gris-500);
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.anotacion--informativa { opacity: .82; border-left-style: dashed; }

/* --------------------------------------------------------------- Utilidades */
.sutil { color: var(--gris-500); }
.pequeno { font-size: .78rem; }
.mini { font-size: .72rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.negrita { font-weight: 700; }
.centrado { text-align: center; }
.derecha { text-align: right; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: .6rem; }
.mb2 { margin-bottom: 1.1rem; }
.mt1 { margin-top: .6rem; }
.mt2 { margin-top: 1.1rem; }
.flex { display: flex; gap: .55rem; align-items: center; }
.flex-entre { display: flex; gap: .55rem; align-items: center; justify-content: space-between; }
.flex-fin { display: flex; gap: .55rem; align-items: center; justify-content: flex-end; }
.envolver { flex-wrap: wrap; }
.crecer { flex: 1; }
.oculto { display: none !important; }
.barra-progreso {
  height: 6px; background: var(--gris-200); border-radius: 4px; overflow: hidden;
}
.barra-progreso > div { height: 100%; background: var(--verde); border-radius: 4px; }

/* La barra de un factor del modelo de condicion va al reves que todas las
   demas de la app: aqui llenar es malo, porque 5 de 5 es el peor caso del
   dominio. Con el verde de arriba, el factor mas grave del CEDIS se pintaria
   como si fuera una meta cumplida, y ese es el tipo de detalle que hace que
   alguien lea la pantalla al reves en una junta sin darse cuenta. */
.barra-progreso--media   > div { background: var(--media); }
.barra-progreso--alta    > div { background: var(--alta); }
.barra-progreso--critica > div { background: var(--critica); }

.dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .85rem; }
.dl dt { color: var(--gris-500); font-weight: 600; }
.dl dd { margin: 0; color: var(--gris-900); }

/* ------------------------------------------------------------------ Login */
.login {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(145deg, #0f172a 0%, #115e59 100%);
  padding: 1.5rem;
}
.login__caja {
  width: 100%; max-width: 390px;
  background: var(--blanco); border-radius: 14px;
  box-shadow: var(--sombra-lg);
  padding: 2rem 1.9rem;
}
.login__marca { text-align: center; margin-bottom: 1.4rem; }
.login__marca h1 { color: var(--verde); font-size: 1.7rem; margin-bottom: .15rem; }
.login__marca p { color: var(--gris-500); font-size: .82rem; margin: 0; }
.login__nota {
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--gris-200);
  font-size: .74rem; color: var(--gris-500); text-align: center;
}

/* ------------------------------------------------------------------ Chat IA */
.chat { display: flex; flex-direction: column; height: 300px; }
.chat__mensajes { flex: 1; overflow-y: auto; padding: .3rem; display: grid; gap: .55rem; align-content: start; }
.chat__burbuja { padding: .55rem .75rem; border-radius: 10px; font-size: .83rem; white-space: pre-wrap; }
.chat__burbuja--usuario { background: var(--verde-claro); color: #134e4a; margin-left: 2rem; }
.chat__burbuja--ia { background: var(--gris-100); color: var(--gris-900); margin-right: 1rem; }
.chat__forma { display: flex; gap: .4rem; margin-top: .55rem; }

/* ----------------------------------------------------------------- Detalles */
details.acordeon { border: 1px solid var(--gris-200); border-radius: var(--radio-sm); margin-bottom: .55rem; }
details.acordeon > summary {
  padding: .55rem .8rem; cursor: pointer; font-weight: 600; font-size: .85rem;
  list-style: none; display: flex; align-items: center; gap: .4rem;
}
details.acordeon > summary::-webkit-details-marker { display: none; }
details.acordeon > summary::before { content: "▸"; color: var(--gris-400); }
details.acordeon[open] > summary::before { content: "▾"; }
details.acordeon > div { padding: 0 .8rem .8rem; }

/* ------------------------------------------------------------- Responsivo */
@media (max-width: 1100px) {
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--2-1, .rejilla--1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .app { flex-direction: column; }
  .nav { width: 100%; height: auto; position: static; flex-direction: row;
         overflow-x: auto; align-items: center; padding: .4rem; }
  .nav__marca, .nav__titulo, .nav__pie { display: none; }
  .nav__grupo { display: flex; padding: 0; }
  .nav a.nav__item { border-left: none; border-bottom: 3px solid transparent; padding: .5rem .7rem; }
  .nav a.nav__item.activo { border-left: none; border-bottom-color: #2dd4bf; }
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .pagina { padding: 1rem; }
  .barra { padding: .7rem 1rem; }
}

@media print {
  .nav, .barra__acciones, .btn, .filtros { display: none !important; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; border-color: #ddd; }
}

/* ==========================================================================
   Complemento: clases usadas por las pantallas de tickets, reportes,
   administracion, perfil y error.
   ========================================================================== */

/* -------------------------------------------------------- Tarjeta simple */
/* Las tarjetas que no usan __cabeza/__cuerpo llevan su propio relleno. */
.tarjeta { padding: 1.1rem; }
.tarjeta:has(> .tarjeta__cabeza),
.tarjeta:has(> .tarjeta__cuerpo) { padding: 0; }

.tarjeta__titulo {
  margin: 1.35rem 0 .8rem; font-size: .95rem; font-weight: 700;
  color: var(--gris-900); display: flex; align-items: center;
  gap: .5rem; flex-wrap: wrap;
}
.tarjeta__titulo:first-child { margin-top: 0; }
.tarjeta__titulo .der { margin-left: auto; display: flex; gap: .4rem; align-items: center; }

/* Tablas a sangre dentro de una tarjeta con relleno */
.tarjeta > .tabla-scroll,
.tarjeta > table.tabla {
  margin-left: -1.1rem; margin-right: -1.1rem; width: calc(100% + 2.2rem);
}
.tarjeta > .tabla-scroll:last-child,
.tarjeta > table.tabla:last-child { margin-bottom: -1.1rem; }
.tarjeta > .tabla-scroll:last-child tr:last-child td,
.tarjeta > table.tabla:last-child tr:last-child td { border-bottom: none; }

/* ----------------------------------------------------------------- Tablas */
.tabla-scroll { overflow-x: auto; }
.tabla-scroll--alta { max-height: 420px; overflow-y: auto; }
.tabla-scroll--alta table.tabla th { position: sticky; top: 0; z-index: 1; }

.tabla--clic tbody tr { cursor: pointer; }
.tabla--clic tbody tr:hover { background: var(--gris-50); }

.tabla tbody tr.fila--alerta { background: #fff7f7; }
.tabla tbody tr.fila--alerta:hover { background: #ffefef; }
.tabla tbody tr.fila--alerta td:first-child { box-shadow: inset 3px 0 0 var(--critica); }
.tabla tbody tr.fila--inactiva { opacity: .55; }
.tabla tr.sin-borde td, .tabla td.sin-borde { border-bottom: none; }

.paginacion {
  display: flex; gap: .5rem; align-items: center; justify-content: center;
  padding: .8rem; font-size: .82rem; color: var(--gris-500);
}
.paginacion .btn { padding: .3rem .65rem; }

/* --------------------------------------------------------------- Tipografia */
.parrafo { margin: 0 0 .7rem; font-size: .88rem; line-height: 1.6; color: var(--gris-900);
           white-space: pre-wrap; }
.parrafo:last-child { margin-bottom: 0; }
.subtitulo { font-size: .82rem; color: var(--gris-500); margin: -.35rem 0 .8rem; }
.sub { display: block; font-size: .73rem; color: var(--gris-500); }
.atenuado { color: var(--gris-500); }
.bloque { display: block; }
.centro { text-align: center; }
.texto--alerta { color: var(--alta); font-weight: 650; }
.texto--critico { color: var(--critica); font-weight: 700; }

/* ------------------------------------------------------------------ Avatar */
.avatar--sm { width: 24px; height: 24px; font-size: .64rem; }
.avatar--lg { width: 46px; height: 46px; font-size: 1rem; }

/* ------------------------------------------------------------------ Puntos */
.punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gris-300);
}
.punto--ok { background: var(--exito); }

/* ------------------------------------------------------------- Formularios */
.campo--linea { display: flex; gap: .5rem; align-items: flex-end; }
.campo--linea > * { margin-bottom: 0; }
.campo--fin { margin-bottom: 0; }

.check { display: flex; align-items: center; gap: .45rem; font-size: .82rem;
         color: var(--gris-700); cursor: pointer; }
.check input[type=checkbox] { width: auto; margin: 0; accent-color: var(--verde); }

.filtros__acciones { display: flex; gap: .45rem; align-items: flex-end; margin-left: auto; }

.editor { min-height: 130px; font-size: .85rem; line-height: 1.6; }

.btn--mini { padding: .18rem .45rem; font-size: .7rem; line-height: 1.35; }

/* ----------------------------------------------------------- Listas de datos */
.datos { display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem;
         font-size: .84rem; margin: 0; }
.datos dt { color: var(--gris-500); font-weight: 650; }
.datos dd { margin: 0; color: var(--gris-900); text-align: right; }
.datos--apilada { grid-template-columns: 1fr; gap: .15rem; }
.datos--apilada dt { margin-top: .5rem; }
.datos--apilada dt:first-child { margin-top: 0; }
.datos--apilada dd { text-align: left; }

.perfil-cabeza { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }

.pasos { margin: 0; padding-left: 1.15rem; font-size: .84rem; line-height: 1.65;
         color: var(--gris-700); }
.pasos li { margin-bottom: .45rem; }

/* --------------------------------------------------------------- Bitacora */
.bitacora { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.bitacora li {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline;
  padding: .4rem 0; border-bottom: 1px dashed var(--gris-200);
}
.bitacora li:last-child { border-bottom: none; }
.bitacora strong { color: var(--gris-900); font-weight: 650; }

/* -------------------------------------------------------- Timeline (items) */
.linea li.linea__item {
  display: flex; gap: .6rem; align-items: flex-start;
  border-left: none; padding: .65rem 0;
  border-bottom: 1px solid var(--gris-100);
}
.linea li.linea__item:last-child { border-bottom: none; padding-bottom: 0; }
.linea li.linea__item::before { display: none; }
.linea__cuerpo { min-width: 0; flex: 1; }
.linea__cabeza { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
                 margin-bottom: .2rem; font-size: .82rem; }
.linea__item--ia .avatar { background: #8b5cf6; }
.linea__item--ia .linea__cuerpo .parrafo {
  background: #faf5ff; border-left: 2px solid #c4b5fd;
  padding: .5rem .65rem; border-radius: var(--radio-sm);
}

/* --------------------------------------------------------------- Bloque IA */
.caja-ia {
  background: #faf5ff; border: 1px solid #e9d5ff; border-radius: var(--radio-sm);
  padding: .7rem .85rem; font-size: .85rem; line-height: 1.6; color: #4c1d95;
  margin-bottom: .8rem;
}
.caja-ia p { margin: 0 0 .5rem; }
.caja-ia p:last-child { margin-bottom: 0; }
.caja-ia__etiqueta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: #7c3aed; margin-bottom: .35rem;
}
.caja-ia__inline {
  background: #faf5ff; border-left: 2px solid #c4b5fd;
  padding: .3rem .55rem; border-radius: var(--radio-sm);
  font-size: .78rem; color: #5b21b6; display: block; margin-top: .35rem;
}

/* ------------------------------------------------------------- Mensajes */
.mensaje--aviso { background: #fffbeb; border-color: var(--alta); color: #9a3412; }

/* ------------------------------------------------------ Barra de confianza */
.barra-mini {
  display: inline-block; vertical-align: middle;
  width: 54px; height: 5px; border-radius: 3px;
  background: var(--gris-200); overflow: hidden;
}
.barra-mini > span { display: block; height: 100%; background: var(--verde); }
.barra-mini--baja > span { background: var(--alta); }

/* ------------------------------------------------------------ Carga de PDF */
.subida { display: grid; gap: .8rem; }
.zona-soltar {
  border: 2px dashed var(--gris-300); border-radius: var(--radio);
  background: var(--gris-50); padding: 2rem 1rem; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.zona-soltar:hover, .zona-soltar.activa {
  border-color: var(--verde); background: var(--verde-claro);
}
.zona-soltar__texto { font-size: .87rem; color: var(--gris-700); }
.zona-soltar__texto strong { color: var(--verde-osc); }
.zona-soltar input[type=file] { display: none; }

.lista-archivos { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .82rem; }
.lista-archivos li {
  display: flex; gap: .5rem; align-items: center;
  padding: .35rem .5rem; border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm); margin-bottom: .35rem; background: var(--blanco);
}
.lista-archivos li span:last-child { margin-left: auto; color: var(--gris-500); font-size: .74rem; }

/* --------------------------------------------------------- Texto crudo PDF */
.crudo {
  max-height: 320px; overflow: auto; margin: 0;
  background: var(--gris-900); color: #e2e8f0;
  padding: .8rem; border-radius: var(--radio-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem; line-height: 1.5; white-space: pre-wrap;
}

/* ------------------------------------------------ Chips de estado estacion */
.chip--SIN_ACTIVIDAD   { background: #dcfce7; color: #166534; }
.chip--CONSUMO_PARCIAL { background: #fef9c3; color: #854d0e; }
.chip--CONSUMO_TOTAL   { background: #ffedd5; color: #9a3412; }
.chip--CAPTURA         { background: #fee2e2; color: #991b1b; }
.chip--DANADA          { background: #ffe4e6; color: #9f1239; }
.chip--FALTANTE        { background: #f3e8ff; color: #6b21a8; }
.chip--BLOQUEADA       { background: #e0e7ff; color: #3730a3; }
.chip--NO_REVISADA     { background: var(--gris-200); color: var(--gris-700); }

/* ---------------------------------------------------------- Pagina de error */
.error__codigo {
  font-size: 3.4rem; font-weight: 800; color: var(--verde);
  line-height: 1; margin-bottom: .4rem;
}
.error__titulo { margin: 0 0 .5rem; font-size: 1.15rem; }
.error__acciones { display: flex; gap: .5rem; justify-content: center; margin: 1.1rem 0 .8rem; }

/* ------------------------------------------------------------- Responsivo */
@media (max-width: 780px) {
  .datos { grid-template-columns: 1fr; }
  .datos dd { text-align: left; margin-bottom: .35rem; }
  .filtros__acciones { margin-left: 0; width: 100%; }
}

/* Pie de la evidencia cuando se usa <figure>/<figcaption> */
figure.evidencia { margin: 0; }
.evidencia figcaption {
  padding: .45rem .55rem; font-size: .71rem; color: var(--gris-500);
  line-height: 1.45; display: grid; gap: .18rem;
}
.evidencia__doc { text-decoration: none; gap: .25rem; }
.evidencia__doc:hover { background: var(--gris-200); text-decoration: none; }

/* ==========================================================================
   Tablero principal: panorama nacional, mapa y acciones
   ========================================================================== */

/* Primera fila: el pais a la izquierda, lo que hay que hacer hoy a la derecha.
   Las dos cosas caben arriba del doblez en una laptop de 1280, que es donde se
   ve esta pantalla en las juntas. */
.mando { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; align-items: start; }

.panel {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}
.panel--alerta { border-color: #fecaca; box-shadow: 0 0 0 3px rgba(220, 38, 38, .06), var(--sombra); }
.panel__cabeza {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: 1rem 1.2rem .35rem;
}
.panel__cabeza h2 { margin: 0; font-size: 1.02rem; }
.panel__sub { font-size: .76rem; color: var(--gris-500); margin-top: .1rem; }
.panel__enlace { margin-left: auto; font-size: .76rem; white-space: nowrap; }
.panel__pie {
  padding: .6rem 1.2rem 1rem; font-size: .76rem; color: var(--gris-500);
  border-top: 1px solid var(--gris-100); margin-top: .2rem;
}

/* ------------------------------------------------------- Panorama nacional */
.nacional { display: grid; grid-template-columns: minmax(150px, .8fr) 1.7fr; gap: 1rem; padding: .6rem 1.2rem 1.2rem; }
.nacional__numero {
  font-size: 3.4rem; font-weight: 750; line-height: 1; letter-spacing: -.02em;
  color: var(--verde);
}
.nacional__numero small { font-size: 1.4rem; font-weight: 600; color: var(--gris-400); }
.nacional__leyenda { font-size: .82rem; color: var(--gris-700); font-weight: 600; margin-top: .2rem; }

.semaforo { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .3rem; }
.semaforo li { display: flex; align-items: center; gap: .45rem; font-size: .78rem; }
.semaforo__etiqueta { color: var(--gris-700); }
.semaforo__cuenta { margin-left: auto; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.semaforo__punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.semaforo__punto--controlado { background: var(--exito); }
.semaforo__punto--medio      { background: var(--media); }
.semaforo__punto--alto       { background: var(--alta); }
.semaforo__punto--critico    { background: var(--critica); }
/* Gris y hueco: sin medir no es un nivel, es la falta del dato. Un relleno de
   color lo pondria en la misma escala que los demas, y no lo esta. */
.semaforo__punto--sin-medir  { background: transparent; border: 2px solid var(--gris-400); }

.mapa { width: 100%; height: auto; display: block; }
.mapa__pais { fill: var(--gris-100); stroke: var(--gris-300); stroke-width: .25; stroke-linejoin: round; }
.mapa__marca { cursor: default; }
.mapa__halo { opacity: .22; }
.mapa__marca--controlado .mapa__halo, .mapa__marca--controlado .mapa__nucleo { fill: var(--exito); }
.mapa__marca--medio      .mapa__halo, .mapa__marca--medio      .mapa__nucleo { fill: var(--media); }
.mapa__marca--alto       .mapa__halo, .mapa__marca--alto       .mapa__nucleo { fill: var(--alta); }
.mapa__marca--critico    .mapa__halo, .mapa__marca--critico    .mapa__nucleo { fill: var(--critica); }
.mapa__marca--sin-medir  .mapa__halo { fill: var(--gris-400); }
.mapa__marca--sin-medir  .mapa__nucleo { fill: var(--blanco); stroke: var(--gris-500); stroke-width: .4; }
.mapa__rotulo { font-size: 2.4px; fill: var(--gris-700); font-weight: 700; }
/* Los CEDIS del oriente se rotulan hacia adentro; ver el comentario de la
   plantilla. Sin esto, "MAS-MID" sale del lienzo y se lee "MAS-". */
.mapa__rotulo--izq { text-anchor: end; }
.mapa__pendientes {
  font-size: .72rem; color: var(--gris-500); margin-top: .35rem;
  border-top: 1px dashed var(--gris-200); padding-top: .4rem;
}

/* ---------------------------------------------------- Acciones prioritarias */
.acciones { list-style: none; margin: .4rem 0 0; padding: 0 .7rem; display: grid; gap: .3rem; }
.accion {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .6rem; border-radius: var(--radio);
  color: inherit; text-decoration: none;
  border: 1px solid transparent;
}
.accion:hover { background: var(--gris-50); border-color: var(--gris-200); text-decoration: none; }
.accion__icono {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
}
.accion__icono svg { width: 16px; height: 16px; }
.accion--alta  .accion__icono { background: #fee2e2; color: #b91c1c; }
.accion--media .accion__icono { background: #ffedd5; color: #c2410c; }
.accion--baja  .accion__icono { background: #dbeafe; color: #1d4ed8; }
.accion__texto { min-width: 0; display: grid; gap: .05rem; }
.accion__texto strong { font-size: .82rem; font-weight: 650; color: var(--tinta); }
.accion__donde { font-size: .71rem; color: var(--gris-500); }
.accion__estado { margin-left: auto; text-align: right; display: grid; gap: .2rem; justify-items: end; }
.accion__plazo { font-size: .69rem; color: var(--gris-500); white-space: nowrap; }
.accion__plazo--alta { color: var(--critica); font-weight: 650; }
.accion__plazo--media { color: var(--media); font-weight: 600; }
/* El plazo de urgencia baja se queda gris a proposito: si los tres niveles
   gritan, el renglon vencido deja de distinguirse de los que estan bien. */

/* --------------------------------------------------------------- Pastillas */
/* Las pastillas son las insignias de esta pantalla: mismas ideas que .chip,
   pero de urgencia y no de estado del sistema, y por eso no reutilizan sus
   clases: si manana cambia el color de un estado de ticket, este tablero no
   tiene por que moverse. */
.pastilla {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; border: 1px solid transparent;
  white-space: nowrap;
}
.pastilla--alta   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.pastilla--media  { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.pastilla--baja   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pastilla--neutra { background: var(--gris-100); color: var(--gris-700); border-color: var(--gris-200); }

.texto--critico { color: var(--critica); }
.texto--alto    { color: var(--alta); font-weight: 700; }
.texto--medio   { color: #a16207; font-weight: 700; }
.texto--bajo    { color: var(--exito); font-weight: 700; }
.angosta { width: 2.2rem; }

@media (max-width: 1100px) {
  .mando { grid-template-columns: 1fr; }
  .nacional { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ Evaluacion de proveedor */
/* Los tres colores del cuestionario de Maseca (Bueno/Regular/Malo, Si/No).
   Van aparte de las severidades a proposito: un "Regular" no es una "MEDIA". */
.chip--calif-BUENO, .chip--calif-SI { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.chip--calif-REGULAR { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.chip--calif-MALO, .chip--calif-NO { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.chip--calif-NA { background: var(--gris-100); color: var(--gris-500); }
.chip--sujeto-cedis { background: #dbeafe; color: #1e40af; }
.chip--sujeto-nosotros { background: #ccfbf1; color: #0f766e; }

.sel-calif { font-weight: 700; }
.sel-calif--BUENO, .sel-calif--SI { background: #dcfce7; color: #166534; border-color: #86efac; }
.sel-calif--REGULAR { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.sel-calif--MALO, .sel-calif--NO { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.tabla--compacta td, .tabla--compacta th { padding: .38rem .5rem; font-size: .8rem; }
.tabla--compacta input[type=text] { padding: .3rem .45rem; font-size: .8rem; }
.tabla--compacta select { padding: .3rem .4rem; font-size: .8rem; }
.fila--mal td:nth-child(2) { box-shadow: inset 3px 0 0 #dc2626; }
.fila--regular td:nth-child(2) { box-shadow: inset 3px 0 0 #eab308; }

/* ------------------------------------------------------- Sello SUMAS APP */
/* Va en todas las pantallas, al pie del menu. Es la firma de quien hace la
   app; no compite con la marca del cliente ni con la de certifum. */
.sello-sumas {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem 1.15rem .9rem; text-decoration: none;
  color: #94a3b8; font-size: .66rem; line-height: 1.15; letter-spacing: .02em;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.sello-sumas img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px; }
.sello-sumas strong { color: #e2e8f0; font-size: .74rem; letter-spacing: .06em; }
.sello-sumas--claro { color: var(--gris-500); border-top: 0; justify-content: center; padding: 0; }
.sello-sumas--claro strong { color: var(--gris-700); }
.sello-sumas--claro img { border: 1px solid var(--gris-200); }
@media (max-width: 900px) { .sello-sumas { display: none; } }

/* ------------------------------------------------------------ MAZIN 360 */
.mazin { display: grid; grid-template-columns: 220px 1fr; gap: 1.2rem; align-items: center; }
.mazin__foto { width: 100%; border-radius: 16px; box-shadow: var(--sombra-md); display: block; }
.mazin__video { width: 100%; max-width: 420px; border-radius: 12px; display: block; background: #000; box-shadow: var(--sombra-md); }
.mazin h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
.mazin .lema { color: var(--verde); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; }
@media (max-width: 900px) { .mazin { grid-template-columns: 1fr; } }


/* --- Chat de MAZIN 360 (pagina del agente) --- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip--alerta { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.chip--boton { cursor: pointer; border: 1px solid var(--gris-200); background: #fff; font: inherit; font-size: .75rem; }
.chip--boton:hover { background: var(--gris-100); }
.chat--alto { height: 420px; }

/* --- Touch ID en la pantalla de acceso --- */
.btn--huella { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1rem; padding: .8rem 1rem; }
.separador { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; color: var(--gris-500, #6b7280); font-size: .78rem; }
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--gris-200); }

/* --- MAZIN 360 trabajando (burbuja de espera del chat) --- */
.mazin-pensando { padding: .6rem .75rem .7rem; }
.mazin-pensando__escena { position: relative; width: min(320px, 100%); aspect-ratio: 440 / 433; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.14); background: #0b2a4a url('/static/img/mazin360-chat-poster.jpg') center / cover no-repeat; }
.mazin-pensando__escena video, .mazin-pensando__escena img, .mazin-pensando__anim { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La frase sale como un holograma mas, flotando sobre la cubierta del
   escritorio: es la franja limpia entre el personaje y la placa. */
.mazin-pensando__holo {
  position: absolute; left: 50%; bottom: 33%; transform: translateX(-50%);
  max-width: 62%; padding: .38rem .7rem; border-radius: 8px;
  font-size: .74rem; font-weight: 600; line-height: 1.25; text-align: center; color: #eaf7ff;
  background: linear-gradient(180deg, rgba(40,150,230,.55), rgba(20,90,170,.65));
  border: 1px solid rgba(160,225,255,.9);
  box-shadow: 0 0 14px rgba(96,205,255,.65), inset 0 0 12px rgba(160,225,255,.35);
  backdrop-filter: blur(2px); text-shadow: 0 0 6px rgba(120,210,255,.9);
  animation: mazin-holo-entra .45s ease-out both, mazin-holo-late 2.4s ease-in-out infinite .45s;
}
.mazin-pensando__holo--entra { animation: mazin-holo-entra .45s ease-out both, mazin-holo-late 2.4s ease-in-out infinite .45s; }
/* Donde se pinta segun el momento del video: "abajo" sobre la cubierta del
   escritorio (plano abierto); "izquierda" en la esquina inferior izquierda,
   que queda libre cuando la camara se acerca al panel que esta tocando. */
.mazin-pensando__holo--abajo { left: 50%; bottom: 33%; transform: translateX(-50%); max-width: 62%; }
.mazin-pensando__holo--izquierda { left: 4%; bottom: 6%; transform: none; max-width: 44%; text-align: left; }
/* La entrada solo anima opacidad y desenfoque: la posicion la manda la clase
   de arriba y una animacion con transform la pisaria. */
@keyframes mazin-holo-entra { 0% { opacity: 0; filter: blur(4px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes mazin-holo-late { 0%,100% { box-shadow: 0 0 14px rgba(96,205,255,.65), inset 0 0 12px rgba(160,225,255,.35); } 50% { box-shadow: 0 0 22px rgba(96,205,255,.95), inset 0 0 16px rgba(160,225,255,.5); } }

/* --- Planos de dispositivos (2D) en el detalle del CEDIS --- */
.planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: .6rem 0 .2rem; }
.plano { margin: 0; border: 1px solid var(--gris-200); border-radius: 10px; overflow: hidden; background: #fff; }
.plano a { display: block; }
.plano img { display: block; width: 100%; height: auto; background: #0b2a4a; }
.plano figcaption { padding: .45rem .6rem; border-top: 1px solid var(--gris-100); }
.enlace-borrar { border: 0; background: none; color: var(--critica, #b91c1c); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* Los dos papeles con los que se evalua un CEDIS, al pie de "Como se califica".
   Van como botones altos y no como enlaces sueltos porque cada uno lleva su
   renglon de explicacion: sin el, "formato en blanco" y "formato en pantalla"
   se leen como lo mismo. */
.docs-eval { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--gris-100); }
.docs-eval__titulo { font-size: .78rem; font-weight: 600; text-transform: uppercase;
                     letter-spacing: .04em; color: var(--gris-500); margin-bottom: .55rem; }
.docs-eval__fila { display: flex; flex-wrap: wrap; gap: .5rem; }
.docs-eval__fila .btn {
  /* El .btn de la casa es inline-flex en una linea; aqui cada boton lleva dos
     renglones (nombre y para que sirve), asi que se apila y se deja envolver. */
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0; text-align: left; line-height: 1.3; padding: .5rem .8rem;
  white-space: normal; max-width: 20rem;
}
.docs-eval__fila .btn .bloque { margin-top: .1rem; font-weight: 400; }

/* La galeria de evidencia del reporte: una ficha por foto, con lo que MAZIN
   360 vio en ella. El borde de color es el veredicto de un vistazo: verde si
   la foto prueba un activo, rojo si no muestra el aparato. */
.evid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: .8rem; margin: .6rem 0 1rem; }
.evid__ficha { margin: 0; border: 1px solid var(--gris-200); border-radius: 10px;
               overflow: hidden; background: var(--blanco); }
.evid__ficha--buena { border-color: #86efac; }
.evid__ficha--mala  { border-color: #fca5a5; }
.evid__ficha a { display: block; }
.evid__ficha img { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--gris-100); }
.evid__ficha figcaption { padding: .45rem .55rem; border-top: 1px solid var(--gris-100); line-height: 1.3; }
/* La galeria partida por tipo de aparato: cada bloque con su propio
   encabezado y su cuenta contra el universo de ese tipo. */
.evid__grupo { margin-bottom: 1.1rem; }
.evid__grupo:last-child { margin-bottom: 0; }
.evid__cabeza { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
                padding-bottom: .35rem; border-bottom: 1px solid var(--gris-100); }
.evid__cabeza h4 { margin: 0; font-size: .92rem; }
.evid__grupo .evid { margin-top: .6rem; margin-bottom: 0; }