/* KMAT — herramienta de terreno para cuadrillas de red eléctrica.
   Layout: columna única de trabajo (máx. 1100px), barra de línea oscura con cinta
   ámbar de alta visibilidad; códigos y cantidades en monoespaciada tabular. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root {
  /* Color */
  --fondo: #eef2f1;          /* gris hormigón con sesgo verde azulado */
  --superficie: #ffffff;
  --superficie-2: #e4eae8;
  --tinta: #152120;
  --tinta-suave: #52605d;
  --borde: #c9d3d0;
  --linea: #14302c;          /* barra superior: verde petróleo casi negro */
  --linea-tinta: #e9f1ef;
  --acento: #f2a900;         /* ámbar alta visibilidad */
  --acento-hover: #dc9900;
  --acento-tinta: #1d1500;
  --enlace: #0b6a60;
  --foco: #0b6a60;
  /* Semánticos (estados del caso y avisos) */
  --abierto: #1c5aa0;   --abierto-fondo: #e1ebf7;
  --cerrado: #8a5000;   --cerrado-fondo: #fcefd4;
  --aprobado: #1b7343;  --aprobado-fondo: #def1e5;
  --error: #ad2a1f;     --error-fondo: #fbe8e5;
  --sombra: 0 10px 30px rgba(10, 30, 27, .14);

  /* Tipografía */
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-xs: .8rem; --t-s: .9rem; --t-m: 1.0625rem; --t-l: 1.3rem; --t-xl: 1.75rem; --t-xxl: 2.2rem;

  --radio: 8px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-der: max(16px, env(safe-area-inset-right, 0px));
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0d1413;
    --superficie: #151f1d;
    --superficie-2: #1d2926;
    --tinta: #e3ebe9;
    --tinta-suave: #98a7a3;
    --borde: #2c3b38;
    --linea: #08100f;
    --linea-tinta: #e3ebe9;
    --acento: #f5b42a;
    --acento-hover: #ffc54d;
    --acento-tinta: #1d1500;
    --enlace: #62c7b8;
    --foco: #62c7b8;
    --abierto: #8bb8ef;   --abierto-fondo: #182b42;
    --cerrado: #f2bd62;   --cerrado-fondo: #3a2a0e;
    --aprobado: #7dd3a0;  --aprobado-fondo: #14321f;
    --error: #ff9b8f;     --error-fondo: #3d1a16;
    --sombra: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
}
a { color: var(--enlace); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
#contenido:focus { outline: none; }

/* Toques: sin zoom por doble toque ni recuadro gris de Android. */
a, button, summary, label, input, select, textarea, .sugerencia {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.saltar {
  position: absolute; z-index: 50; left: var(--gutter); top: 8px;
  padding: 10px 16px; border-radius: var(--radio);
  background: var(--acento); color: var(--acento-tinta); font-weight: 600; text-decoration: none;
  transform: translateY(-150%);
}
.saltar:focus { transform: none; }

h1, h2 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-xxl); letter-spacing: .005em; }
h2 { font-size: var(--t-l); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }

.muted { color: var(--tinta-suave); }
.pequeno { font-size: var(--t-s); }
.codigo { font-family: var(--f-dato); font-weight: 500; font-size: .94em; letter-spacing: -.01em; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.etiqueta {
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-s);
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave);
}

.contenedor {
  max-width: 1100px; margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-der); padding-block: 20px 48px;
  display: flex; flex-direction: column; gap: 20px;
}
.contenedor > * { margin-block: 0; }
.seccion { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------- barra superior */
.barra { background: var(--linea); color: var(--linea-tinta); border-bottom: 4px solid var(--acento); }
.barra-interior {
  max-width: 1100px; margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-der); padding-block: 10px 0;
}
.barra-sup { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; }
.marca {
  color: var(--linea-tinta); text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; letter-spacing: .12em;
}
.marca span { color: var(--acento); }
.quien { font-size: var(--t-s); opacity: .8; }
.nav { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-block: 6px 0; margin-inline: -10px; }
.nav a, .nav-salir {
  flex: 0 0 auto; color: var(--linea-tinta); text-decoration: none; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 10px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer;
  opacity: .78;
}
.nav a:hover, .nav-salir:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--acento); }
.nav-salir-form { margin-left: auto; }
.en-linea { display: inline; margin: 0; }

/* --------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 10px 18px; border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta);
  font-family: var(--f-texto); font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn:hover { border-color: var(--tinta-suave); }
.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.btn-primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
.btn-exito { background: var(--aprobado); border-color: var(--aprobado); color: var(--superficie); }
.btn-peligro { color: var(--error); border-color: var(--error); }
.btn-peligro:hover { background: var(--error-fondo); border-color: var(--error); }
.btn-chico { min-height: 40px; padding: 6px 12px; font-size: var(--t-s); }
.btn-bloque { width: 100%; }
.btn:disabled { opacity: .7; cursor: progress; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ----------------------------------------------------------- formularios */
.tarjeta, .formulario {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.formulario { max-width: 640px; }
.campo { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; letter-spacing: .03em; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 10px 12px;
  font-family: var(--f-texto); font-size: 1.0625rem; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px;
}
.campo input[type=file] { padding: 12px; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--foco) 35%, transparent); outline-offset: 0; border-color: var(--foco);
}
#cantidad { font-family: var(--f-dato); font-size: 1.2rem; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 44px; }
.check input { width: 24px; height: 24px; accent-color: var(--enlace); }
.ayuda { font-size: var(--t-s); color: var(--tinta-suave); }
.fila-campos { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .fila-campos { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------- autocompletado */
.sugerencias {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 340px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
.sugerencia {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; min-height: 52px;
  border: 0; border-bottom: 1px solid var(--superficie-2); background: transparent; color: var(--tinta);
  font: inherit; cursor: pointer;
}
.sugerencia strong { font-family: var(--f-dato); font-weight: 500; }
.sugerencia span { color: var(--tinta-suave); font-size: var(--t-s); }
.sugerencia:hover, .sugerencia.activo { background: var(--superficie-2); }
.sugerencia-vacia { padding: 14px; color: var(--tinta-suave); }
.material-elegido { font-size: var(--t-s); color: var(--aprobado); min-height: 1.3em; font-weight: 500; }

/* ----------------------------------------------------------------- avisos */
.aviso { padding: 12px 14px; border-radius: var(--radio); border-left: 4px solid; margin: 0; }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }
.aviso-ok { background: var(--aprobado-fondo); border-color: var(--aprobado); }
.aviso-error { background: var(--error-fondo); border-color: var(--error); }
.aviso-info { background: var(--superficie-2); border-color: var(--tinta-suave); }

/* ----------------------------------------------------- encabezado de página */
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.encabezado .sobre { display: block; margin-bottom: 4px; }

/* ----------------------------------------------------------------- estados */
.estado {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 4px;
  font-family: var(--f-display); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
}
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado-abierto { background: var(--abierto-fondo); color: var(--abierto); }
.estado-cerrado { background: var(--cerrado-fondo); color: var(--cerrado); }
.estado-aprobado { background: var(--aprobado-fondo); color: var(--aprobado); }

/* Avance del caso: abierto -> cerrado -> aprobado */
.avance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.avance li { position: relative; padding-top: 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avance li::before {
  content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px; background: var(--borde);
}
.avance li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--borde);
}
.avance .hecho::before { background: var(--aprobado); }
.avance .hecho::after { background: var(--aprobado); border-color: var(--aprobado); }
.avance .actual::after { background: var(--acento); border-color: var(--acento); }
.avance .paso { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.avance .pendiente .paso { color: var(--tinta-suave); }
.avance .fecha { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-suave); }

/* ------------------------------------------------------------ datos clave */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.datos dt { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-s); color: var(--tinta-suave); padding-top: 2px; }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- tablas */
.tabla-envoltura { overflow-x: auto; }
.tabla {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
}
.tabla th, .tabla td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla th {
  background: var(--superficie-2); font-family: var(--f-display); font-weight: 600; font-size: var(--t-s);
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave);
}
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 55%, transparent); }
.tabla .num { text-align: right; white-space: nowrap; font-family: var(--f-dato); font-variant-numeric: tabular-nums; }
.tabla .unidad { color: var(--tinta-suave); font-family: var(--f-dato); font-size: var(--t-s); }
.enlace-fuerte { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; text-decoration: none; }
.enlace-fuerte:hover { text-decoration: underline; }

/* En pantallas chicas las tablas .tabla-resp pasan a fichas. */
@media (max-width: 640px) {
  .tabla-resp, .tabla-resp tbody, .tabla-resp tr, .tabla-resp td { display: block; width: 100%; }
  .tabla-resp { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .tabla-resp thead { display: none; }
  .tabla-resp tr {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    margin-bottom: 10px; padding: 8px 0;
  }
  .tabla-resp tbody tr:hover td { background: transparent; }
  .tabla-resp td { border: 0; padding: 4px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; text-align: right; }
  .tabla-resp td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-family: var(--f-display); font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave);
  }
  .tabla-resp td:first-child { font-size: 1.05rem; }
  .tabla-resp td.celda-acciones { justify-content: flex-start; padding-top: 8px; }
  .tabla-resp td.celda-acciones::before { content: none; }
}

.vacio {
  margin: 0; padding: 28px 16px; text-align: center; color: var(--tinta-suave);
  border: 2px dashed var(--borde); border-radius: var(--radio);
}

/* ---------------------------------------------------------------- filtros */
.filtros { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.filtros summary {
  padding: 14px 18px; min-height: 50px; cursor: pointer;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.form-filtros { display: grid; gap: 14px; grid-template-columns: 1fr; }
.filtros .form-filtros { padding: 0 18px 18px; }
@media (min-width: 720px) { .form-filtros { grid-template-columns: repeat(3, 1fr); } }
.form-filtros .acciones { grid-column: 1 / -1; }

.paginacion { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.conteo { font-family: var(--f-dato); font-size: var(--t-s); color: var(--tinta-suave); }

/* ------------------------------------------------------------------ login */
.login { width: 100%; max-width: 420px; margin: 6vh auto 0; display: flex; flex-direction: column; gap: 18px; }
.login-marca { display: flex; flex-direction: column; gap: 2px; }
.login-marca .marca-grande {
  font-family: var(--f-display); font-weight: 700; font-size: 3.2rem; letter-spacing: .14em; line-height: 1;
  border-bottom: 4px solid var(--acento); padding-bottom: 6px; align-self: flex-start;
}

/* ------------------------------------------------------- reporte imprimible */
.reporte-cabecera { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
.firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; }
.firmas div { border-top: 1px solid var(--tinta); padding-top: 6px; text-align: center; font-size: var(--t-s); }
.solo-imprimir { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  :root {
    --fondo: #fff; --superficie: #fff; --superficie-2: #f0f0f0; --tinta: #000; --tinta-suave: #444; --borde: #999;
  }
  body { font-size: 10.5pt; }
  .barra, .no-imprimir, .acciones, .aviso { display: none !important; }
  .solo-imprimir { display: grid; }
  .contenedor { max-width: none; padding: 0; gap: 12px; }
  .tarjeta { border: 0; padding: 0; }
  .tabla th, .tabla td { padding: 4px 6px; }
  a { color: inherit; text-decoration: none; }
}