/* ERP Mafre EcoLiving — interfaz web (loop 17).
   Paleta/tipografia: criterio visual reutilizado en modo lectura del CRM
   (repo CRM-Web-EcoLiving-NextJS, src/styles/tokens/colors.css +
   typography.css) — sin copiar codigo ni cargar fuentes externas: pila
   system-ui real para que la interfaz funcione bien en conexion movil lenta
   (mandato §10). */

:root {
  --green-50: #ECF6ED; --green-100: #D2EAD4; --green-500: #2E7D32; --green-600: #266A29; --green-700: #1E5421;
  --amber-50: #FEF6E7; --amber-400: #F5A623; --amber-500: #DB8E10; --amber-700: #855408;
  --neutral-0: #FFFFFF; --neutral-25: #FAFBFC; --neutral-50: #F4F6F8; --neutral-100: #EAEDF1;
  --neutral-200: #DCE1E7; --neutral-300: #C3CAD3; --neutral-400: #9AA4B1; --neutral-500: #6B7785;
  --neutral-600: #4E5965; --neutral-700: #3A434E; --neutral-800: #262D35; --neutral-900: #161B21;
  --success-50: #E8F6EC; --success-500: #1E8E4A; --success-700: #146236;
  --warning-50: #FEF3E2; --warning-500: #D9870B; --warning-700: #9C6005;
  --danger-50: #FCEBEA; --danger-500: #D03A2F; --danger-700: #9A271F;
  --info-50: #E9F1FE; --info-500: #2563EB; --info-700: #1A47A8;

  --bg-app: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-rail: #11201A;
  --surface-rail-2: #1A2D24;
  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-on-rail: #DCE6DF;
  --text-on-rail-muted: #93A69A;
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --brand: var(--green-500);
  --brand-strong: var(--green-700);
  --focus-ring: #2E7D32;

  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --radio: 8px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3 { color: var(--text-strong); margin: 0 0 0.5em; }
a { color: var(--brand-strong); }

/* Foco visible en TODO elemento interactivo (mandato §10) — nunca solo color. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.oculto { display: none !important; }
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- carcasa */
.carcasa {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "encabezado encabezado" "nav principal";
  min-height: 100vh;
}
.encabezado {
  grid-area: encabezado;
  background: var(--surface-rail);
  color: var(--text-on-rail);
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  flex-wrap: wrap;
}
.encabezado__marca { font-weight: 700; color: #fff; white-space: nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* L30: identidad de marca — logos oficiales del Kit Documental (version blanca sobre el riel oscuro). */
.encabezado__logo { display: block; height: 30px; width: auto; }
.encabezado__logo--mafre { height: 26px; }
.encabezado__separador { width: 1px; height: 26px; background: #3B5A4B; }
.encabezado__producto { font-size: 12px; letter-spacing: .12em; color: var(--amber-400); border: 1px solid #3B5A4B; border-radius: 4px; padding: 1px 6px; }
@media (max-width: 520px) { .encabezado__logo--mafre, .encabezado__separador { display: none; } }
.encabezado__contexto-ot { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
.encabezado__contexto-ot select, .encabezado__contexto-ot input {
  background: var(--surface-rail-2); color: var(--text-on-rail); border: 1px solid #2A4438;
  border-radius: var(--radio); padding: 6px 8px; max-width: 320px; min-width: 0; flex: 1;
}
.encabezado__identidad { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.badge-perfil {
  background: var(--surface-rail-2); border: 1px solid #2A4438; border-radius: 999px;
  padding: 4px 10px; color: var(--text-on-rail); display: flex; align-items: center; gap: 6px;
}
.badge-solo-dev {
  background: var(--danger-700); color: #fff; font-weight: 700; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
}
.encabezado select#selector-perfil { background: var(--surface-rail-2); color: #fff; border: 1px solid #2A4438; border-radius: var(--radio); padding: 6px; max-width: 220px; }

nav.nav-lateral {
  grid-area: nav;
  background: var(--surface-rail);
  color: var(--text-on-rail-muted);
  padding: 12px 8px;
  overflow-y: auto;
}
nav.nav-lateral ul { list-style: none; margin: 0; padding: 0; }
nav.nav-lateral a {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-on-rail-muted); text-decoration: none;
  padding: 10px 12px; border-radius: var(--radio); margin-bottom: 2px;
  font-size: 13px;
}
nav.nav-lateral a:hover, nav.nav-lateral a[aria-current="page"] {
  background: var(--surface-rail-2); color: #fff;
}
nav.nav-lateral a[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed;
}

main.principal {
  grid-area: principal;
  padding: 20px;
  max-width: 1200px;
  width: 100%;
}

/* Colapsa a una columna en pantallas angostas (celular/tableta en campo). */
@media (max-width: 860px) {
  .carcasa { grid-template-columns: 1fr; grid-template-areas: "encabezado" "principal"; }
  nav.nav-lateral {
    grid-area: principal; position: static; display: flex; flex-wrap: wrap; gap: 4px;
    order: 2; padding: 8px;
  }
  nav.nav-lateral ul { display: flex; flex-wrap: wrap; gap: 4px; }
  main.principal { order: 1; padding: 12px; }
}

/* --------------------------------------------------------------- alertas */
.alerta {
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 12px;
  display: flex; align-items: flex-start; gap: 10px; font-size: 13px;
}
.alerta--info { background: var(--info-50); color: var(--info-700); }
.alerta--exito { background: var(--success-50); color: var(--success-700); }
.alerta--advertencia { background: var(--warning-50); color: var(--warning-700); }
.alerta--error { background: var(--danger-50); color: var(--danger-700); }
.alerta__detalle-tecnico summary { cursor: pointer; color: inherit; opacity: 0.8; }
.alerta__detalle-tecnico { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; }
.alerta__detalle-tecnico pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- tarjetas */
.tarjeta {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radio); padding: 16px; margin-bottom: 16px;
}
.tarjeta h2 { font-size: 16px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica__etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.metrica__valor { font-size: 22px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.metrica__valor .unidad { font-size: 13px; font-weight: 400; color: var(--text-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.badge--oficial { background: var(--success-50); color: var(--success-700); }
.badge--no-oficial { background: var(--warning-50); color: var(--warning-700); }
.badge--bloqueante { background: var(--danger-50); color: var(--danger-700); }
.badge--info { background: var(--info-50); color: var(--info-700); }
/* L27: el escalon intermedio que faltaba. `PROXIMA_A_VENCER` no es un
   bloqueo pero tampoco esta en orden, y pintarla igual que cualquiera de
   los dos extremos borraria justo el aviso que da tiempo a renovar. */
.badge--advertencia { background: var(--warning-50); color: var(--warning-700); }
.badge--neutro { background: var(--neutral-100); color: var(--text-body); }

/* ----------------------------------------------------------------- tablas */
.tabla-scroll { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
table.tabla th, table.tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); }
table.tabla th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.dinero { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------- estados */
.estado-vacio, .estado-carga, .estado-denegado {
  padding: 32px 16px; text-align: center; color: var(--text-muted);
}
.estado-denegado { color: var(--danger-700); }
.estado-carga::before {
  content: ""; display: block; width: 24px; height: 24px; margin: 0 auto 8px;
  border: 3px solid var(--border-default); border-top-color: var(--brand); border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .estado-carga::before { animation: none; } }
@keyframes girar { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- pestanas */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); margin-bottom: 16px; flex-wrap: wrap; }
.pestanas button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
  min-height: 44px;
}
.pestanas button[aria-selected="true"] { color: var(--brand-strong); border-bottom-color: var(--brand); }

/* --------------------------------------------------------------- formularios */
.formulario { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.formulario[hidden] { display: none; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--text-body); }
.campo .ayuda { font-size: 11px; color: var(--text-muted); }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--border-default); border-radius: var(--radio); padding: 10px;
  font-size: 14px; font-family: inherit; min-height: 44px;
}
.campo textarea { min-height: 80px; font-family: inherit; }
/* El asterisco marca EL CAMPO, no cada opcion de dentro. Con el selector
   descendiente, las casillas de L63 salian «ACTA_ENTREGA_RECIBIDA *» una por
   una, como si cada condicion fuera obligatoria. Hijo directo: la etiqueta del
   campo. Lo encontro la verificacion visual. */
.campo--requerido > label::after { content: " *"; color: var(--danger-500); }
/* L63: la PRIMERA casilla de verificacion de la interfaz. `.campo input` la
   deformaba: 44 px de alto y 10 px de relleno estan pensados para un campo de
   texto que se toca con el dedo, no para una marca. El area de toque la da la
   etiqueta entera, que es lo que un dedo busca. */
.campo .casilla {
  display: flex; align-items: center; gap: 8px; min-height: 32px;
  font-size: 13px; font-weight: 400; color: var(--text-body); cursor: pointer;
}
.campo .casilla input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 18px; flex: none;
  padding: 0; margin: 0; accent-color: var(--brand);
}
.acciones-formulario { display: flex; gap: 8px; flex-wrap: wrap; }

button.boton {
  border: 1px solid transparent; border-radius: var(--radio); padding: 10px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px; min-width: 44px;
}
button.boton--primario { background: var(--brand); color: #fff; }
button.boton--primario:hover { background: var(--brand-strong); }
button.boton--secundario { background: var(--neutral-0); color: var(--text-body); border-color: var(--border-default); }
button.boton--peligro { background: var(--danger-500); color: #fff; }
button.boton:disabled { opacity: 0.55; cursor: not-allowed; }

.dialogo-confirmacion {
  border: none; border-radius: var(--radio); padding: 0; max-width: 420px; width: 90%;
}
.dialogo-confirmacion::backdrop { background: rgba(22,27,33,0.5); }
.dialogo-confirmacion__cuerpo { padding: 20px; }
.dialogo-confirmacion__acciones { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 20px; }

.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

/* L26 — ficha de origen: etiqueta y valor en dos columnas, una sola en movil. */
dl.ficha { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; margin: 12px 0 0; }
dl.ficha dt { font-size: 12px; color: var(--text-muted); font-weight: 600; }
dl.ficha dd { margin: 0; font-size: 14px; }
dl.ficha .nota { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }
@media (max-width: 640px) {
  dl.ficha { grid-template-columns: 1fr; gap: 2px 0; }
  dl.ficha dt { margin-top: 10px; }
}

/* L50: dos columnas para los indicadores derivados; una sola en pantalla angosta. */
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .rejilla-2 { grid-template-columns: 1fr; } }

/* L30: el tablero del cargo (Inicio). */
.tablero__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.tablero__quien { margin: 0; color: var(--text-muted); }
.tablero__seccion { margin-top: 16px; }
.tablero__seccion > summary { cursor: pointer; }
.tablero__modulo { margin-top: 12px; text-transform: capitalize; }
.tablero__formulario td { background: var(--neutral-25); }
.tablero__formulario .formulario { display: grid; gap: 8px; max-width: 640px; }
.tablero__formulario label { display: grid; gap: 4px; }
.metrica[data-metrica="por-hacer"] .metrica__valor { color: var(--green-700); }
.metrica[data-metrica="alertas"] .metrica__valor { color: var(--amber-700); }

/* ------------------------------------------- inicio de sesion con Microsoft (L30) */
.pantalla-acceso {
  min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--surface-rail);
}
.pantalla-acceso[hidden] { display: none; }
.pantalla-acceso__tarjeta {
  background: var(--surface-card); border-radius: var(--radio); padding: 28px 24px;
  width: 100%; max-width: 460px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.pantalla-acceso__marcas { display: flex; justify-content: center; margin-bottom: 12px; }
.pantalla-acceso__logo { max-height: 56px; max-width: 220px; }
.pantalla-acceso h1 { font-size: 20px; text-align: center; }
.pantalla-acceso p { margin: 0 0 12px; }
.pantalla-acceso .acciones-formulario { justify-content: center; margin-top: 12px; }
.encabezado button.boton--sesion { min-height: 32px; padding: 4px 10px; font-size: 12px; }

/* ------------------------------------------- L35: parametros contables provisionales */
/* La cinta se queda arriba mientras haya algo sin ratificar: no se cierra ni se desplaza fuera de la vista. */
.cinta-provisional { position: sticky; top: 0; z-index: 5; border: 1px solid var(--warning-500); font-weight: 600; }
.config-tarjeta { margin-bottom: 12px; }
.config-valor { margin: 8px 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 13px; }
.config-valor dt { color: var(--text-muted); }
.config-valor dd { margin: 0; font-variant-numeric: tabular-nums; }
.config-linea { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 3px solid var(--border-default); }
.config-linea > li { margin: 0 0 10px; padding-left: 8px; font-size: 13px; }
.config-linea > li[data-estado-vigencia="VIGENTE"] { border-left: 3px solid var(--brand); margin-left: -15px; padding-left: 12px; }
.config-linea > li[data-estado-vigencia="PROGRAMADA"] { border-left: 3px dashed var(--warning-500); margin-left: -15px; padding-left: 12px; }
.config-efecto { background: var(--info-50); color: var(--info-700); border-radius: var(--radio); padding: 10px 12px; font-size: 13px; }
.config-efecto[data-aviso="si"] { background: var(--warning-50); color: var(--warning-700); }
.config-nota { min-width: 180px; }

/* L35 (0136): plan de cuentas y mapa provisionales */
.fila-campos { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 10px; }
.fila-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }