/* ═══════════════════════════════════════════════════════════════════════════
   CIMA — EL SISTEMA DE DISEÑO
   ───────────────────────────────────────────────────────────────────────────
   Una sola mano en todos los módulos. La base es la app 10 (lo que se aprobó):
   estas reglas la EXTIENDEN a lo que se agregó después —enlaces, clientes,
   tarifas, las fichas— y a las secciones que vienen del catálogo de ARIA.

   LA IDEA: CIMA es la COPA del árbol. Lo que se define acá —proveedores,
   servicios, tarifas, la memoria de ARIA— baja a todas las apps. La copa se ve:
     · en el riel, con los focos de luz que derivan (la copa viva);
     · en la franja de follaje al pie de cada cabecera (la copa sobre la página);
     · en el tablero, que muestra a qué apps alimenta.

   LAS REGLAS (una sola vez, acá):
     Letra      Newsreader para títulos de página, de ficha y de sección del tablero.
                Schibsted Grotesk para todo lo demás. JetBrains Mono para códigos.
     Etiqueta   .66rem · 700 · mayúsculas · .1em — rótulos de campos y columnas.
     Sección    .62rem · 800 · mayúsculas · .18em · teal, con filete — títulos
                dentro de una ficha o de un panel.
     Color      navy #1A2633 · teal #005565 / #006D82 · salvia #7D9B5B · crema
                #EADFCE · filete arena #E4DACB · suelo #FBF9F6. El rojo, el ámbar
                y el verde son sólo de estado.
     Forma      tarjetas .9rem · campos y botones .55rem · etiquetas .4rem ·
                píldoras 99px. Una sola sombra de tarjeta.
     Tablas     encabezado navy, letra blanca en mayúsculas (la de la app 10).
     Filtros    de estado: segmento (el de «Fichas / Tabla»); de categoría: píldora.
     Íconos     Material Icons Outlined, siempre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La copa sobre cada página ─────────────────────────────────────────────── */
.zona-principal > header{position:relative;}
.zona-principal > header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none;
  background:linear-gradient(90deg, #005565 0%, #006D82 22%, #7D9B5B 52%, rgba(125,155,91,0) 88%);
  opacity:.7;
}
#titulo-vista{letter-spacing:-.01em;}

/* ── Filtros de estado: el segmento de la app 10 ───────────────────────────── */
.segmento{display:inline-flex; flex-wrap:wrap; gap:2px; padding:2px; background:var(--papel-tenue);
  border:1px solid var(--borde); border-radius:.55rem;}
.segmento .enl-chip{border:0; background:transparent; color:var(--tinta-suave); border-radius:.45rem;
  padding:.35rem .7rem; font-size:.75rem; font-weight:600; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:.35rem; transition:all .16s;}
.segmento .enl-chip:hover{background:var(--papel); color:var(--navy);}
.segmento .enl-chip b{font-weight:800; color:inherit; opacity:.75;}
.segmento .enl-chip.activa{background:var(--teal); color:#fff;}
.segmento .enl-chip.activa b{color:#fff; opacity:.9;}

/* Las barras de filtro: mismos campos que las de la app 10. */
.enl-barra select,.enl-barra input:not([type=checkbox]){padding:.45rem .6rem; border:1px solid var(--borde);
  border-radius:.5rem; font-size:.78rem; font-family:inherit; background:var(--papel); color:var(--tinta);}
.enl-barra input:not([type=checkbox]){padding-left:2.1rem;}

/* ── Tablas: todas con la cabecera de la app 10 ────────────────────────────── */
.cl-tabla th,.tf-tabla th{
  background:var(--navy)!important; color:#fff!important; font-size:.66rem!important; letter-spacing:.09em!important;
  text-transform:uppercase; font-weight:700!important; padding:.6rem .7rem!important; border-bottom:0!important;
  border-right:1px solid rgba(255,255,255,.08); white-space:nowrap;}
.cl-tabla thead th:first-child,.tf-tabla thead th:first-child{border-top-left-radius:.55rem;}
.cl-tabla thead th:last-child,.tf-tabla thead th:last-child{border-top-right-radius:.55rem; border-right:0;}
.cl-tabla td{font-size:.8rem;}
.cl-hist{border-radius:.9rem;}
.cl-hist th{background:var(--navy)!important; color:#fff!important;}

/* ── Tarjetas: una forma, una sombra ───────────────────────────────────────── */
.enl-item,.vt-tarjeta,.cl-cifra,.tf-tarj,.v-temp,.v-combo,.v-ficha-foto{border-radius:.9rem;}
.enl-item,.vt-tarjeta,.tf-tarj{box-shadow:var(--sombra-card);}
.cl-cifra{box-shadow:var(--sombra-card);}
.cl-cifra b{font-family:'PP Fragment Sans','Schibsted Grotesk',system-ui,sans-serif!important; font-weight:800!important;
  letter-spacing:-.02em; font-size:1.55rem!important;}

/* Etiquetas de estado de la bandeja y de clientes: la forma de .etq (radio .4rem). */
.enl-estado,.cl-tipo{border-radius:.4rem!important; font-size:.66rem!important; letter-spacing:.04em!important;}
.cl-cons{border-radius:.4rem;}
.chip-ia{border-radius:.4rem!important;}

/* Títulos de las tarjetas de la bandeja: mismo peso que los de la app 10. */
.enl-aria h4{font-size:1.02rem;}
.enl-cand{border-radius:.55rem;}

/* ── Las pestañas de las fichas: un solo aspecto ───────────────────────────── */
.pestanas-editor .pestana .etq{font-weight:700;}

/* El bloque de la copa se quitó del tablero (Luis, 2026-09-22): sus estilos se fueron con él. */

/* ── Listas y tipos (cima-listas.js) ───────────────────────────────────────
   El botón «Catálogos» de la cabecera se fue: sus listas viven en esta vista. */
#boton-catalogos{display:none!important;}
.lst-pestanas{display:flex; gap:.15rem; overflow-x:auto; border-bottom:1px solid var(--borde); margin:-.2rem 0 1.2rem;}
.lst-pestanas .pestana{background:none; border:0; border-bottom:2px solid transparent; font-family:inherit;
  display:inline-flex; align-items:center; gap:.35rem;}
.lst-pestanas .pestana .material-icons-outlined{font-size:16px;}
.lst-rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.1rem; align-items:start;}
.lst-tarjeta{padding:1.15rem 1.3rem; margin-bottom:1.1rem;}
.lst-rejilla .lst-tarjeta{margin-bottom:0;}
.lst-ancha{grid-column:1/-1;}
.lst-cab{display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.9rem;}
.lst-cab > .material-icons-outlined{color:var(--teal); font-size:20px; margin-top:1px;}
.lst-cab h3{margin:0; font-size:.95rem; font-weight:700; color:var(--navy);}
.lst-cab p{margin:.2rem 0 0; font-size:.78rem; line-height:1.5; color:var(--tinta-suave); max-width:80ch;}
.lst-lista{border:1px solid var(--borde); border-radius:.6rem; overflow:hidden; background:var(--papel);}
.lst-fila{display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; border-bottom:1px solid var(--borde-suave); min-height:2.6rem;}
.lst-lista > :last-child, .lst-lista > .lst-eco:last-child .lst-ubic{border-bottom:0;}
.lst-nombre{flex:1; font-size:.85rem; font-weight:600; color:var(--navy);}
.lst-en{font-size:.76rem; color:var(--tinta-suave); flex:1;}
.lst-valor{flex:1; min-width:0; border:1px solid transparent; background:transparent; padding:.3rem .45rem; border-radius:.45rem;
  font-weight:600; font-size:.85rem; line-height:1.2; font-family:inherit; color:var(--navy);}
body.modo-edicion .lst-valor{border-color:var(--borde-suave); background:var(--papel-tenue);}
.lst-valor:focus{outline:none; border-color:var(--teal)!important; background:var(--papel)!important; box-shadow:0 0 0 3px rgba(0,85,101,.12);}
.lst-valor.lst-en{font-weight:400; font-size:.8rem; color:var(--tinta-suave);}
.lst-hijos{display:flex; flex-direction:column; gap:.3rem; padding:.45rem .75rem .6rem 1.9rem; background:var(--papel-tenue);
  border-bottom:1px solid var(--borde-suave); position:relative;}
.lst-hijos::before{content:""; position:absolute; left:1.05rem; top:0; bottom:.9rem; width:1px; background:var(--borde);}
.lst-hijos--sueltos{border:1px solid var(--borde); border-radius:.6rem; margin-top:.6rem; padding-left:.75rem;}
.lst-hijos--sueltos::before{display:none;}
.lst-hijo{display:flex; align-items:center; gap:.5rem; position:relative; min-height:2rem;}
.lst-hijos:not(.lst-hijos--sueltos) .lst-hijo::before{content:""; position:absolute; left:-.85rem; top:50%; width:.6rem; height:1px; background:var(--borde);}
.lst-hijo .lst-nombre{font-weight:500; font-size:.82rem;}
.lst-hijo .chip-ia{flex-shrink:0;}
.lst-candado{font-size:15px!important; color:var(--ambar);}
.lst-candado-t{font-size:13px!important; vertical-align:-2px; color:var(--ambar);}
.lst-padre{font-weight:500; font-size:.74rem; line-height:1.2; font-family:inherit; padding:.25rem .4rem; border:1px solid var(--borde); border-radius:.45rem;
  background:var(--papel); color:var(--tinta-suave); max-width:15rem;}
.lst-agregar{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem; align-items:center;}
.lst-agregar input, .lst-agregar select{flex:1; min-width:9rem; padding:.45rem .6rem; border:1px solid var(--borde); border-radius:.5rem;
  font-size:.82rem; font-family:inherit; background:var(--papel); color:var(--tinta);}
.lst-agregar--aria{padding:.55rem .65rem; border:1px dashed var(--borde); border-radius:.6rem; background:var(--papel-tenue);}
.lst-aviso{margin-top:.7rem; padding:.55rem .75rem; border-radius:.55rem; background:#FEF6EC; color:#7A4A12; font-size:.78rem; line-height:1.5;}
.lst-aviso--mal{background:#FDF0EF; color:var(--alerta);}
.lst-nota{display:flex; gap:.55rem; margin-top:.8rem; padding:.6rem .75rem; border-radius:.55rem; background:#E4F0F2; color:#004C5A; font-size:.78rem; line-height:1.5;}
.lst-nota .material-icons-outlined{font-size:18px;}
.lst-vacia{padding:1.2rem; text-align:center; color:var(--tinta-suave); font-size:.82rem;}
.lst-subtitulo{margin:.9rem 0 .4rem; font-weight:800; font-size:.62rem; line-height:1.2; font-family:inherit; letter-spacing:.18em; text-transform:uppercase; color:var(--teal);}
.lst-subtitulo:first-of-type{margin-top:0;}
.lst-apagada .lst-nombre, .lst-apagada .lst-valor{opacity:.5;}
/* Ecosistemas con sus ubicaciones */
.lst-eco{border-bottom:1px solid var(--borde-suave);}
.lst-eco .lst-fila{border-bottom:0;}
.lst-nombre--eco{font-family:'PP Fragment Glare','Newsreader',Georgia,serif; font-weight:500; font-size:1rem;}
.lst-ficha{padding:.3rem .6rem; font-size:.74rem;}
.lst-ubic{display:flex; flex-wrap:wrap; gap:.3rem; padding:0 .75rem .6rem;}
.lst-ubi{display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem; border-radius:99px; background:var(--papel-tenue);
  border:1px solid var(--borde); font-size:.74rem; color:var(--tinta);}
.lst-ubi b{font-size:.66rem; color:var(--teal);}
.lst-ubi button{border:0; background:none; cursor:pointer; color:var(--alerta); font-size:.9rem; line-height:1; padding:0;}
.lst-ubi-nueva{border:1px dashed var(--borde); border-radius:99px; padding:.18rem .6rem; font-size:.74rem; font-family:inherit; width:9rem; background:var(--papel);}
.lst-sin{font-size:.74rem; color:var(--tinta-suave);}
.lst-anio{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;}
.lst-anio > .material-icons-outlined{color:var(--teal-alto);}
.lst-anio > div{flex:1; min-width:220px;}
.lst-anio b{font-size:.86rem; color:var(--navy);}
.lst-anio p{margin:.15rem 0 0; font-size:.76rem; color:var(--tinta-suave); line-height:1.5;}
.lst-anio input{width:92px; padding:.4rem .5rem; border:1px solid var(--borde); border-radius:.45rem; font-size:.9rem; font-family:inherit; text-align:center;}
.lst-anio-v{font-family:'JetBrains Mono',monospace; font-size:1.1rem; font-weight:600; color:var(--navy);}

/* ── Las comisiones estándar en la ficha del cliente (cima-clientes.js) ── */
.cl-com-rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.4rem;}
.cl-com{display:flex; align-items:center; gap:.5rem; padding:.45rem .65rem; border:1px solid var(--borde); border-radius:.55rem; background:var(--papel);}
.cl-com span{flex:1; font-size:.82rem; font-weight:600; color:var(--navy);}
.cl-com input[type=checkbox]{accent-color:var(--teal); width:16px; height:16px;}
.cl-com input[type=number]{width:4.6rem; padding:.3rem .4rem; border:1px solid var(--borde); border-radius:.45rem; font-size:.8rem; font-family:inherit; text-align:right;}
.cl-com em{font-style:normal; font-size:.74rem; color:var(--tinta-suave); width:.8rem;}