/* ==========================================================================
   ASADA Inteligente - sistema de diseno
   Tokens primero, componentes despues. Un solo archivo, sin dependencias.
   ========================================================================== */

:root {
  /* superficie */
  --fondo: #f4f7f9;
  --panel: #ffffff;
  --panel-2: #fafcfd;
  --borde: #dde5ea;
  --borde-fuerte: #c3d0d8;

  /* marca: agua */
  --tinta: #0d2b38;
  --tinta-2: #35525f;
  --tinta-3: #6b8391;
  --marca: #0e6b7d;
  --marca-claro: #e2f1f4;
  --marca-hover: #0a5464;
  --acento: #17a2b8;

  /* semantica */
  --ok: #17795a;
  --ok-bg: #e3f4ee;
  --alerta: #a86a09;
  --alerta-bg: #fdf1de;
  --peligro: #b3261e;
  --peligro-bg: #fdeceb;
  --info: #1c5aa8;
  --info-bg: #e8f0fb;
  --morado: #6b3fa0;
  --morado-bg: #f0e9f8;
  --neutro: #5a6b75;
  --neutro-bg: #eceff1;

  /* barra lateral */
  --nav: #0d2b38;
  --nav-2: #16404f;
  --nav-txt: #a9c2cc;
  --nav-txt-on: #ffffff;

  --r: 10px;
  --r-s: 6px;
  --sombra: 0 1px 2px rgba(13, 43, 56, .06), 0 4px 14px rgba(13, 43, 56, .05);
  --sombra-alta: 0 8px 30px rgba(13, 43, 56, .13);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.011em; }
p { margin: 0 0 .8em; }
a { color: var(--marca); }
button { font: inherit; }

/* ---------- cinta de demostracion ---------- */
.cinta {
  background: linear-gradient(90deg, #0d2b38, #0e6b7d 60%, #17a2b8);
  color: #fff; font-size: 12.5px; padding: 7px 18px; text-align: center;
  letter-spacing: .01em; position: relative; z-index: 60;
}
.cinta b { font-weight: 650; }
.cinta a { color: #b9ecf5; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- estructura ---------- */
.marco { display: grid; grid-template-columns: 246px 1fr; min-height: calc(100vh - 32px); }

.lateral {
  background: var(--nav); color: var(--nav-txt);
  display: flex; flex-direction: column; padding: 18px 0;
  position: sticky; top: 0; height: calc(100vh - 32px); overflow-y: auto;
}
.marca-bloque { padding: 0 18px 16px; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 12px; }
.marca-nombre { color: #fff; font-weight: 680; font-size: 15px; letter-spacing: -.01em; }
.marca-sub { font-size: 11.5px; color: var(--nav-txt); margin-top: 3px; letter-spacing: .02em; text-transform: uppercase; }

.nav-grupo { padding: 12px 18px 5px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #6d8b98; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 18px; background: none; border: 0; color: var(--nav-txt);
  cursor: pointer; text-align: left; font-size: 14px; border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255,255,255,.055); color: #fff; }
.nav-item.on { background: var(--nav-2); color: var(--nav-txt-on); border-left-color: var(--acento); font-weight: 550; }
.nav-item .ico { width: 17px; text-align: center; flex: 0 0 17px; opacity: .85; }
.nav-item .cnt {
  margin-left: auto; font-size: 11px; background: rgba(255,255,255,.13);
  padding: 1px 7px; border-radius: 20px; font-variant-numeric: tabular-nums;
}
.lateral-pie { margin-top: auto; padding: 16px 18px 0; border-top: 1px solid rgba(255,255,255,.09); font-size: 11.5px; color: #6d8b98; }
.lateral-pie a { color: #9fd4e0; }

.lienzo { padding: 26px 30px 70px; max-width: 1180px; }

/* ---------- encabezado de vista ---------- */
.cabecera { margin-bottom: 20px; }
.cabecera .kicker { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--marca); font-weight: 650; }
.cabecera h1 { font-size: 26px; margin: 5px 0 6px; }
.cabecera .bajada { color: var(--tinta-2); max-width: 72ch; margin: 0; }

/* ---------- tarjetas ---------- */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra); }
.tarjeta > .cab { padding: 14px 18px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tarjeta > .cab h3 { font-size: 15px; }
.tarjeta > .cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tarjeta > .cuerpo { padding: 18px; }
.tarjeta > .cuerpo.apretado { padding: 0; }

.rejilla { display: grid; gap: 16px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-lat { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

/* ---------- indicadores ---------- */
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: 15px 17px; box-shadow: var(--sombra); }
.kpi .et { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; }
.kpi .val { font-size: 27px; font-weight: 680; letter-spacing: -.02em; margin: 4px 0 1px; font-variant-numeric: tabular-nums; }
.kpi .nota { font-size: 12.5px; color: var(--tinta-3); }
.kpi.destaca { border-color: var(--marca); background: linear-gradient(180deg, var(--marca-claro), #fff 62%); }
.kpi.destaca .val { color: var(--marca-hover); }

/* ---------- etiquetas ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620;
  padding: 2.5px 9px; border-radius: 20px; letter-spacing: .01em; white-space: nowrap;
}
.tag.verde { background: var(--ok-bg); color: var(--ok); }
.tag.ambar { background: var(--alerta-bg); color: var(--alerta); }
.tag.rojo { background: var(--peligro-bg); color: var(--peligro); }
.tag.azul { background: var(--info-bg); color: var(--info); }
.tag.morado { background: var(--morado-bg); color: var(--morado); }
.tag.gris { background: var(--neutro-bg); color: var(--neutro); }
.tag.marca { background: var(--marca-claro); color: var(--marca-hover); }

.n1 { background: #fdeceb; color: #b3261e; }
.n2 { background: #fdf1de; color: #a86a09; }
.n3 { background: #eceff1; color: #5a6b75; }

/* ---------- tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 650; padding: 10px 16px;
  border-bottom: 1px solid var(--borde); background: var(--panel-2); white-space: nowrap;
}
tbody td { padding: 11px 16px; border-bottom: 1px solid #eef3f5; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clic { cursor: pointer; }
tbody tr.clic:hover { background: var(--marca-claro); }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13px; }
.cod { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-2); }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-s); border: 1px solid var(--borde-fuerte);
  background: #fff; color: var(--tinta); font-size: 13.5px; font-weight: 560;
  cursor: pointer; transition: .12s;
}
.btn:hover { border-color: var(--marca); color: var(--marca-hover); }
.btn.pri { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.pri:hover { background: var(--marca-hover); border-color: var(--marca-hover); color: #fff; }
.btn.pri:disabled { background: #b7c7ce; border-color: #b7c7ce; cursor: not-allowed; }
.btn.chico { padding: 5px 11px; font-size: 12.5px; }
.btn.peligro { color: var(--peligro); border-color: #eec3c0; }
.btn.peligro:hover { background: var(--peligro-bg); border-color: var(--peligro); color: var(--peligro); }

/* ---------- avisos ---------- */
.aviso { border-radius: var(--r-s); padding: 12px 15px; font-size: 13.5px; border: 1px solid; display: flex; gap: 11px; align-items: flex-start; }
.aviso .ico { flex: 0 0 auto; font-size: 15px; line-height: 1.35; }
.aviso.info { background: var(--info-bg); border-color: #c6dbf5; color: #15406f; }
.aviso.ok { background: var(--ok-bg); border-color: #b9e2d3; color: #10583f; }
.aviso.warn { background: var(--alerta-bg); border-color: #f0d9ab; color: #7a4c04; }
.aviso.mal { background: var(--peligro-bg); border-color: #f2c9c6; color: #8a1c16; }
.aviso.marca { background: var(--marca-claro); border-color: #b7dde4; color: #0a4c5a; }
.aviso b { font-weight: 650; }

/* ---------- formulario ---------- */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12.5px; font-weight: 620; color: var(--tinta-2); margin-bottom: 5px; }
.campo .ayuda { font-size: 12px; color: var(--tinta-3); margin-top: 4px; }
input[type=text], input[type=number], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s); font: inherit; font-size: 14px; background: #fff; color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px; border: 1px solid var(--borde); border-radius: var(--r-s); margin-bottom: 6px; cursor: pointer; background: #fff; transition: .12s; }
.check:hover { border-color: var(--marca); }
.check input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--marca); }
.check .txt { flex: 1; min-width: 0; }
.check .nom { font-size: 13.5px; font-weight: 550; }
.check .base { font-size: 11.5px; color: var(--tinta-3); font-family: var(--mono); }
.check.marcado { background: var(--ok-bg); border-color: #b9e2d3; }

/* ---------- linea de tiempo ---------- */
.linea { list-style: none; padding: 0; margin: 0; }
.linea li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--borde); }
.linea li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linea li::before {
  content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 2px solid var(--borde-fuerte);
}
.linea li.hecho::before { background: var(--ok); border-color: var(--ok); }
.linea li.activo::before { background: var(--marca); border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-claro); }
.linea .t { font-weight: 620; font-size: 14px; }
.linea .d { font-size: 13px; color: var(--tinta-2); }
.linea .f { font-size: 11.5px; color: var(--tinta-3); font-family: var(--mono); }

/* ---------- arbol de archivo ---------- */
.arbol { font-family: var(--mono); font-size: 13px; line-height: 1.9; }
.arbol .nodo { padding-left: 20px; border-left: 1px dotted var(--borde-fuerte); margin-left: 7px; }
.arbol .carpeta { color: var(--tinta); font-weight: 550; }
.arbol .archivo { color: var(--tinta-2); }
.arbol .carpeta::before { content: "▸ "; color: var(--marca); }
.arbol .archivo::before { content: "· "; color: var(--tinta-3); }

/* ---------- chat ---------- */
.burbuja { border-radius: var(--r); padding: 12px 15px; margin-bottom: 11px; max-width: 88%; font-size: 14px; }
.burbuja.yo { background: var(--marca); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.burbuja.bot { background: var(--panel-2); border: 1px solid var(--borde); border-bottom-left-radius: 3px; }
.citas { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--borde); font-size: 12px; color: var(--tinta-3); }
.citas .c { display: inline-block; background: #fff; border: 1px solid var(--borde); border-radius: 4px; padding: 1px 7px; margin: 2px 4px 0 0; font-family: var(--mono); font-size: 11.5px; }

/* ---------- barra de progreso ---------- */
.barra { height: 7px; background: #e6edf1; border-radius: 20px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--marca); border-radius: 20px; transition: width .35s ease; }
.barra.ok > i { background: var(--ok); }
.barra.warn > i { background: var(--alerta); }

/* ---------- varios ---------- */
.mini { font-size: 12.5px; color: var(--tinta-3); }
.sep { height: 1px; background: var(--borde); margin: 18px 0; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.hilera { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.vacio { padding: 34px; text-align: center; color: var(--tinta-3); font-size: 14px; }
.oculto { display: none !important; }
.recuadro { background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--r-s); padding: 13px 15px; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .marco { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px; gap: 4px; }
  .marca-bloque, .nav-grupo, .lateral-pie { display: none; }
  .nav-item { width: auto; border-left: 0; border-bottom: 3px solid transparent; padding: 7px 11px; border-radius: var(--r-s); font-size: 13px; }
  .nav-item.on { border-left: 0; border-bottom-color: var(--acento); }
  .nav-item .cnt { display: none; }
  .lienzo { padding: 18px 15px 60px; }
  .r2, .r3, .r4, .r-lat, .fila { grid-template-columns: 1fr; }
  .cabecera h1 { font-size: 21px; }
  .tabla-scroll { overflow-x: auto; }
  .tabla-scroll table { min-width: 640px; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}