/* =====================================================================
   COSTA ERP · MATERIA · hoja de estilo unica
   =====================================================================
   Fuente de verdad: 01 Entregables/diseno/2026-08-28_v2_00_Sistema_Visual
   Ni un color, ni una medida, ni una tipografia fuera de este fichero.

   Las dos reglas que ordenan todo el color:

     EL COLOR DE MODULO dice DONDE ESTAS.  Vive en la periferia:
     rail y franja de cabecera. Se cambia con --acento y sus dos tintes.

     EL COLOR DE ESTADO dice QUE PASA CON EL DINERO. Vive dentro de la
     tabla, sobre fondo de fila. Nunca se mueve entre modulos.

   No compiten porque no comparten superficie.
   ===================================================================== */


/* ------------------------------------------------------------------
   TIPOGRAFIAS
   ------------------------------------------------------------------
   Servidas desde el propio hosting: el ERP tiene que funcionar sin
   salida a internet. Los ficheros van en publico/tipos/ y su lista
   exacta esta en publico/tipos/LEEME.md.

   Si todavia no estan, la pagina NO se rompe: cae a la pila de
   respaldo, que esta elegida por metrica parecida. Se vera algo
   distinta, nunca rota.                                              */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
           src:url('../tipos/archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
           src:url('../tipos/archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
           src:url('../tipos/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
           src:url('../tipos/archivo-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
           src:url('../tipos/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
           src:url('../tipos/plexmono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
           src:url('../tipos/plexmono-600.woff2') format('woff2')}


/* ------------------------------------------------------------------
   01 · COLOR, TIPOGRAFIA Y MEDIDAS
   ------------------------------------------------------------------ */

:root{
  /* --- aprobado, no se toca --- */
  --fondo:        #faf8f4;   /* lienzo de toda la app                 */
  --fondo-alt:    #f0ebe2;   /* cabeceras, zebra, totales             */
  --tinta:        #241d1b;   /* texto, cifras, descripcion corta      */
  --tinta-2:      #574a46;   /* descripcion larga, etiquetas          */
  --borde:        #e7e2d9;   /* separador de fila y de celda          */
  --borde-fuerte: #d8d1c5;   /* campos, corte entre bloques           */
  --hover:        #e9e3d8;   /* fila y boton secundario al pasar      */
  --deshab:       #847870;   /* texto sin permiso o sin dato          */

  /* --- estado: NO se mueve nunca entre modulos --- */
  --verde:        #4e8a6a;   /* pagado, cerrado, conforme             */
  --azul:         #46688f;   /* informativo, en curso, pedido         */
  --morado:       #6f5a8f;   /* extras y anexos fuera de contrato     */
  --coral:        #c8746a;   /* alerta, sin cobrar, sin pagar         */
  --ambar:        #a8842f;   /* margen por debajo del objetivo        */
  --ambar-fondo:  #f5efe1;   /* fondo del aviso de margen             */

  /* --- MODULO: lo unico que cambia entre modulos ---
     MATERIA es terracota. Para otro modulo se pisan estas tres en
     el <body>, y solo estas tres.                                    */
  --acento:        #b8663f;  /* accion, foco, fila seleccionada       */
  --acento-sel:    #f1e4db;  /* fondo de fila seleccionada, al 14 %   */
  --acento-franja: #f3e9e2;  /* franja de cabecera y rail, al 10 %    */

  /* --- tipografia --- */
  --ui:   'Archivo', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;

  /* --- la barra de arriba, oscura como en la maqueta ---
     Texto crema sobre tinta. Los tintes son el crema con transparencia
     para que sigan valiendo si un dia cambia --tinta.                */
  --cima-texto:   rgba(250,248,244,.62);
  --cima-hover:   rgba(250,248,244,.10);
  --cima-borde:   rgba(250,248,244,.26);
  --ambar-claro:  #e6c67a;  /* el ambar legible sobre la barra negra  */
  --verde-claro:  #8fcfae;  /* el verde legible sobre la barra negra  */

  /* --- medidas --- */
  --r-chico:    4px;
  --r:          6px;
  --r-grande:   8px;
  --toque:      44px;   /* objetivo tactil minimo en movil            */
}

*{box-sizing:border-box}

html,body{
  margin:0; padding:0;
  background:var(--fondo); color:var(--tinta);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--acento); text-decoration:none}
a:hover{color:var(--tinta)}

/* El foco de teclado va en acento pleno y SIEMPRE se ve: es
   accesibilidad, no decoracion. Nunca se pone outline:none a secas. */
:focus-visible{outline:2px solid var(--acento); outline-offset:2px; border-radius:var(--r-chico)}

/* Toda cifra en monoespaciada, alineada a la derecha, y con las cifras
   de igual ancho para poder compararlas en vertical.                 */
.cifra{font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums;
       white-space:nowrap}


/* ------------------------------------------------------------------
   02 · ARMAZON · la barra de arriba + contenido
   ------------------------------------------------------------------
   DESDE EL 05/09/2026 LA PIEL ES LA DE LA MAQUETA APROBADA
   (01 Entregables/maquetas/pantalla-1-presupuesto.png): menu ARRIBA
   con las secciones escritas, en una barra oscura. Hasta entonces habia
   un carril vertical de tres letras a la izquierda, copiado de los
   ficheros de diseno v2, y Jose dijo al verlo que no era la maqueta.
   Los colores y las tipografias siguen siendo los del sistema visual;
   lo que cambia es la estructura.                                     */

.armazon{display:flex; flex-direction:column; min-height:100vh}

.cima{
  display:flex; align-items:center; gap:26px;
  background:var(--tinta); color:var(--fondo);
  padding:0 22px; min-height:56px;
  position:sticky; top:0; z-index:40;
}
.cima-marca{
  display:inline-flex; align-items:baseline; gap:7px;
  font:700 17px/1 var(--ui); letter-spacing:.16em; color:var(--fondo);
  text-decoration:none; white-space:nowrap;
}
.cima-marca span{font:600 9px/1 var(--mono); letter-spacing:.2em; color:var(--acento)}
.cima-marca:hover{color:var(--fondo)}

.cima-menu{display:flex; gap:2px; flex-wrap:wrap}
.cima-menu a{
  display:block; padding:8px 13px; border-radius:var(--r);
  font:400 13px/1 var(--ui); color:var(--cima-texto); text-decoration:none;
  white-space:nowrap;
}
.cima-menu a:hover{background:var(--cima-hover); color:var(--fondo)}
.cima-menu a.activo{background:var(--cima-hover); color:var(--fondo); font-weight:500}

/* Quien eres: la pildora de la maqueta. Al pulsarla se despliega lo que
   antes iba suelto en la barra. */
.cima-yo{margin-left:auto; position:relative}
.cima-yo summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 12px; border:1px solid var(--cima-borde); border-radius:99px;
  font:500 10.5px/1 var(--mono); letter-spacing:.09em; color:var(--fondo);
  white-space:nowrap;
}
.cima-yo summary::-webkit-details-marker{display:none}
.cima-yo summary:hover,.cima-yo[open] summary{background:var(--cima-hover)}
.cima-punto{width:7px; height:7px; border-radius:99px; background:var(--verde-claro)}

/* El desplegable, comun a la pildora y a la pestana «Documentos». */
.desplegable{
  position:absolute; top:calc(100% + 8px); right:0; z-index:50;
  min-width:220px; padding:6px;
  background:var(--fondo); border:1px solid var(--borde-fuerte);
  border-radius:var(--r-grande);
  box-shadow:0 14px 34px -16px rgba(36,29,27,.45);
  display:flex; flex-direction:column; gap:2px;
}
.desplegable a,.desplegable .enlace-boton{
  display:block; width:100%; text-align:left;
  padding:10px 11px; border-radius:var(--r);
  font:500 10.5px/1 var(--mono); letter-spacing:.07em;
  color:var(--tinta-2); text-decoration:none;
}
.desplegable a:hover,.desplegable .enlace-boton:hover{background:var(--hover); color:var(--tinta)}
.desplegable .en-linea{display:block}

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


/* ------------------------------------------------------------------
   03 · MIGAS
   ------------------------------------------------------------------
   Debajo del menu y pequenas. Dicen en que obra estas cuando la
   pantalla no lleva cabecera de obra.                                */

.migas{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
       padding:12px 24px 0; max-width:1500px; width:100%;
       font:400 11.5px/1 var(--ui); color:var(--tinta-2)}
.migas .sep{color:var(--deshab)}
.migas a{color:var(--tinta-2)}
.migas a:hover{color:var(--acento)}
.migas .actual{color:var(--tinta); font-weight:600}

.lienzo{padding:18px 24px 60px; max-width:1500px; width:100%}


/* ------------------------------------------------------------------
   04 · CABECERA DE OBRA · titulo, estado y cifras grandes
   ------------------------------------------------------------------ */

.obra-cab{display:flex; align-items:flex-start; justify-content:space-between;
          gap:28px; flex-wrap:wrap; margin-bottom:6px}
.obra-titulo{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
h1.obra{font:600 28px/32px var(--ui); letter-spacing:-.02em; margin:0; color:var(--tinta)}
h1.seccion{font:600 19px/24px var(--ui); letter-spacing:-.01em; margin:0}
.obra-nota{font:400 11px/14px var(--ui); color:var(--tinta-2); margin-top:6px}

/* Las cifras grandes de cabecera. Mono 22/600, como manda el sistema. */
.cifras{display:flex; gap:26px; flex-wrap:wrap}
.cifra-bloque{min-width:96px}
.cifra-rotulo{font:500 10px/12px var(--mono); letter-spacing:.09em;
              color:var(--tinta-2); margin-bottom:5px}
.cifra-valor{font:600 22px/1 var(--mono); color:var(--tinta);
             font-variant-numeric:tabular-nums; white-space:nowrap}
.cifra-valor.ambar{color:var(--ambar)}
.cifra-valor.verde{color:var(--verde)}
.cifra-valor.coral{color:var(--coral)}
.cifra-sub{font:400 10px/12px var(--ui); color:var(--tinta-2); margin-top:4px}

/* --- LA CABECERA DE OBRA DE LA MAQUETA · 05/09/2026 ---
   Arriba a la izquierda: codigo, cliente y estado; el nombre grande; y
   una linea con donde, quien y cuando. A la derecha, las CUATRO cifras
   en cajas pegadas: COSTE · VENTA · BENEFICIO · MARGEN. Quien no ve
   venta ve COSTE y PENDIENTE DE PEDIR en las mismas cajas.           */

.obra-cabecera{display:flex; align-items:flex-start; justify-content:space-between;
               gap:36px; flex-wrap:wrap}
.obra-identidad{display:flex; flex-direction:column; gap:8px; min-width:0}
.obra-meta{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.chip-codigo{font:500 11px/1 var(--mono); letter-spacing:.13em; color:var(--acento);
             background:var(--acento-franja); padding:4px 8px; border-radius:var(--r-chico);
             white-space:nowrap}
.obra-cliente{font:500 11px/1 var(--mono); letter-spacing:.13em; color:var(--tinta-2);
              text-transform:uppercase}
.obra-cabecera h1.obra{font:700 29px/1.05 var(--ui); letter-spacing:-.025em}
.obra-cabecera .obra-nota{font:400 13px/1.4 var(--ui); margin-top:0}

.kpis{display:flex; gap:1px; background:var(--borde-fuerte);
      border:1px solid var(--borde-fuerte); border-radius:9px; overflow:hidden;
      flex:none}
.kpi{background:var(--fondo); padding:11px 17px; min-width:132px;
     display:flex; flex-direction:column; gap:4px}
.kpi-rotulo{font:500 9.5px/1 var(--mono); letter-spacing:.12em; color:var(--tinta-2)}
.kpi-valor{font:600 18px/1 var(--mono); color:var(--tinta);
           font-variant-numeric:tabular-nums; white-space:nowrap;
           display:flex; align-items:baseline; gap:6px}
.kpi-obj{font:500 10px/1 var(--mono); color:var(--tinta-2)}
.kpi-sub{font:400 10px/12px var(--ui); color:var(--tinta-2)}
.kpi-verde .kpi-valor{color:var(--verde)}
.kpi-coral .kpi-valor{color:var(--coral)}
/* El margen por debajo del objetivo: la caja entera en ambar (regla 15). */
.kpi-ambar{background:var(--ambar-fondo)}
.kpi-ambar .kpi-rotulo,.kpi-ambar .kpi-valor,.kpi-ambar .kpi-obj{color:var(--ambar)}

/* --- LAS PESTANAS DE LA OBRA --- */
.pestanas{display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap;
          margin-top:20px; border-bottom:1px solid var(--borde-fuerte)}
.pestanas a,.pestanas summary{
  display:block; padding:6px 0 11px; margin-bottom:-1px;
  font:400 13.5px/1 var(--ui); color:var(--tinta-2); text-decoration:none;
  border-bottom:2px solid transparent; cursor:pointer; list-style:none;
  white-space:nowrap;
}
.pestanas summary::-webkit-details-marker{display:none}
.pestanas a:hover,.pestanas summary:hover{color:var(--tinta)}
.pestanas a.activa{color:var(--tinta); font-weight:600; border-bottom-color:var(--acento)}
.pestana-menu{position:relative}
.pestana-menu .desplegable{right:auto; left:0; top:100%}

/* --- LA BARRA DE HERRAMIENTAS · buscar a la izquierda, acciones a la derecha --- */
.herramientas{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:14px}
.herramientas .buscador{flex:1; min-width:250px}
.herramientas .buscador input{max-width:340px}
.herramientas-derecha{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* Lo que va DEBAJO de la tabla: el aviso del margen y el estado de los
   precios. La maqueta los pone ahi, donde llega el ojo tras el total.  */
.bajo-tabla{margin-top:14px}
.bajo-tabla .aviso{margin-top:0}
.bajo-tabla .aviso + .aviso,.bajo-tabla .aviso + .panel{margin-top:14px}


/* ------------------------------------------------------------------
   05 · ETIQUETAS DE ESTADO
   ------------------------------------------------------------------
   Van sobre fondo de fila o sobre su propio tinte, NUNCA sobre la
   franja de modulo: asi ninguna franja las apaga.                    */

.eti{display:inline-flex; align-items:center; gap:4px;
     font:500 9.5px/1 var(--mono); letter-spacing:.06em;
     border-radius:99px; padding:5px 9px; white-space:nowrap;
     border:1px solid transparent}
.eti-verde {color:#2f6247; background:#e4efe8; border-color:#cbe0d5}
.eti-azul  {color:#31506f; background:#e3eaf2; border-color:#ccd9e6}
.eti-morado{color:#54426e; background:#e9e4f0; border-color:#d8d0e4}
.eti-coral {color:#93463e; background:#f6e3e0; border-color:#ecd0cb}
.eti-ambar {color:#6f5717; background:var(--ambar-fondo); border-color:#e8dcc2}
.eti-gris  {color:var(--tinta-2); background:var(--fondo-alt); border-color:var(--borde-fuerte)}
.eti-apagada{color:var(--deshab); background:transparent; border-color:var(--borde)}


/* ------------------------------------------------------------------
   06 · BOTONES
   ------------------------------------------------------------------ */

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
     font:600 12.5px/1 var(--ui); border-radius:var(--r);
     padding:10px 15px; cursor:pointer; border:1px solid var(--borde-fuerte);
     background:var(--fondo); color:var(--tinta); text-decoration:none}
.btn:hover{background:var(--hover); color:var(--tinta)}
/* Acento pleno. UNO por pantalla: es la regla del sistema visual. */
.btn-primario{background:var(--acento); border-color:var(--acento); color:var(--fondo)}
.btn-primario:hover{background:#a25836; border-color:#a25836; color:var(--fondo)}
.btn:disabled,.btn[aria-disabled=true]{color:var(--deshab); background:var(--fondo-alt);
     border-color:var(--borde); cursor:not-allowed}
.btn-ancho{width:100%; padding:14px}


/* ------------------------------------------------------------------
   07 · AVISO DE MARGEN · el ambar de la regla 15
   ------------------------------------------------------------------ */

.aviso{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
       background:var(--ambar-fondo); border:1px solid #e8dcc2;
       border-radius:var(--r-grande); padding:11px 14px; margin:14px 0 0;
       font:400 12px/1.55 var(--ui); color:var(--tinta-2)}
.aviso strong{color:var(--tinta); font-weight:600}
.aviso .accion{margin-left:auto; font:500 11px/1 var(--mono); letter-spacing:.04em;
               color:#6f5717; text-decoration:underline; white-space:nowrap}
.aviso-info{background:#e9eef4; border-color:#d3dde8}
.aviso-info .accion{color:#31506f}


/* ------------------------------------------------------------------
   08 · LA TABLA DEL PRESUPUESTO
   ------------------------------------------------------------------
   No es <table>: es rejilla. Las columnas cambian con el ROL, y esa
   rejilla se define en el HTML con --cols, porque el servidor es quien
   decide cuantas columnas hay. Aqui solo esta el aspecto.

     GERENCIA / JEFATURA  12 columnas, con venta y margen
     EQUIPO / ADMON        9 columnas, sin venta y con proveedor ancho

   Ojo: que EQUIPO vea menos columnas NO es lo que protege el dato. Lo
   que lo protege es que su consulta va contra v_partida_equipo, que no
   tiene esas columnas. Esto es solo la consecuencia visual.          */

.tabla{border:1px solid var(--borde-fuerte); border-radius:var(--r-grande);
       overflow:hidden; margin-top:14px; background:var(--fondo)}
.tabla-scroll{overflow-x:auto}

.fila{display:grid; grid-template-columns:var(--cols); align-items:center}

.fila-cab{background:var(--fondo-alt); border-bottom:1px solid var(--borde-fuerte)}
.fila-cab > div{padding:8px 9px; font:500 9.5px/1 var(--mono); letter-spacing:.07em;
                color:var(--tinta-2)}

/* --- capitulo: la fila que agrupa --- */
.fila-cap{background:var(--fondo-alt); border-top:1px solid var(--borde-fuerte);
          border-bottom:1px solid var(--borde)}
.fila-cap > div{padding:9px}
.cap-cod{font:500 11px/1.2 var(--mono); color:var(--tinta-2)}
.cap-nombre{font:600 14px/18px var(--ui); color:var(--tinta)}
.cap-n{font:400 11px/14px var(--ui); color:var(--tinta-2)}

/* --- partida --- */
.fila-par{border-bottom:1px solid var(--borde)}
.fila-par:hover{background:var(--hover)}
.fila-par > div{padding:7px 9px}
/* Fila seleccionada: barra de 3 px en acento pleno + fondo al 14 %. */
.fila-par.sel{background:var(--acento-sel); box-shadow:inset 3px 0 0 var(--acento)}
/* 6.5 · recorrer el presupuesto con las flechas. El resalte lo pone el
   foco, no una clase de JavaScript: asi la fila se marca igual llegando
   con Tab que con la flecha, y sin JavaScript sigue marcandose. */
.fila-par:focus-within{background:var(--acento-sel); box-shadow:inset 3px 0 0 var(--acento)}
.atajos{font:500 10.5px/1.5 var(--mono); letter-spacing:.04em;
        color:var(--tinta-2); margin-top:6px}
.atajos kbd{font:inherit; border:1px solid var(--borde); border-radius:3px;
            padding:1px 5px; background:var(--fondo-2)}
.par-cod{font:500 11px/1.2 var(--mono); color:var(--tinta-2)}
.par-corta{font:400 12.5px/17px var(--ui); color:var(--tinta)}
.par-larga{font:400 11px/15px var(--ui); color:var(--tinta-2); margin-top:2px}
.par-prov{font:400 11.5px/15px var(--ui); color:var(--tinta-2);
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.par-ud{font:400 11px/1 var(--mono); color:var(--tinta-2); text-align:center}

/* importes dentro de la tabla: mono 13/500 */
.imp{font:500 13px/1.2 var(--mono); text-align:right; color:var(--tinta);
     font-variant-numeric:tabular-nums; white-space:nowrap}
.imp-flojo{font:400 12px/1.2 var(--mono); text-align:right; color:var(--tinta-2);
           font-variant-numeric:tabular-nums; white-space:nowrap}
.imp-vacio{color:var(--deshab)}
.imp.ambar{color:var(--ambar)}

/* --- totales de obra, al pie de la tabla --- */
.total-rot{font:600 11px/1 var(--mono); letter-spacing:.07em; color:var(--tinta)}
.total-imp{font:600 15px/1.2 var(--mono); text-align:right; color:var(--tinta);
           font-variant-numeric:tabular-nums; white-space:nowrap}
/* LA BARRA NEGRA DE LA MAQUETA. Tinta de fondo, crema encima. El ambar
   y el verde del margen cambian a su version clara: los de las filas no
   se leen sobre oscuro.                                             */
.fila-total{background:var(--tinta); border-top:0}
.fila-total > div{padding:15px 9px}
.fila-total .total-rot{font:600 13px/1.2 var(--ui); letter-spacing:-.01em;
                       color:var(--fondo); white-space:nowrap}
.fila-total .total-rot .cap-n{color:var(--cima-texto); margin-left:9px; font-size:11px}
.fila-total .total-imp{color:var(--fondo)}
.fila-total .total-imp.ambar{color:var(--ambar-claro)}
.fila-total .total-imp.verde{color:var(--verde-claro)}


/* ------------------------------------------------------------------
   09 · LISTA DE OBRAS
   ------------------------------------------------------------------ */

.obras{display:grid; gap:10px; margin-top:16px}
.obra-tarjeta{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
              background:var(--fondo); border:1px solid var(--borde-fuerte);
              border-radius:var(--r-grande); padding:14px 16px; text-decoration:none}
.obra-tarjeta:hover{background:var(--hover); border-color:var(--acento)}
.obra-tarjeta .cod{font:500 11px/1 var(--mono); letter-spacing:.05em;
                   color:var(--tinta-2); min-width:76px}
.obra-tarjeta .nom{font:600 15px/20px var(--ui); color:var(--tinta); flex:1; min-width:190px}
.obra-tarjeta .sub{font:400 11px/14px var(--ui); color:var(--tinta-2); margin-top:2px}
.obra-tarjeta .num{min-width:104px}


/* ------------------------------------------------------------------
   10 · ACCESO · la pantalla 7
   ------------------------------------------------------------------ */

.acceso{min-height:100vh; display:grid; grid-template-columns:1fr 400px}
.acceso-izq{background:var(--acento-franja); border-right:1px solid var(--borde-fuerte);
            padding:56px 48px; display:flex; flex-direction:column; justify-content:center}
.acceso-marca{width:44px; height:44px; border-radius:10px; background:var(--acento);
              color:var(--fondo); display:flex; align-items:center; justify-content:center;
              font:600 20px/1 var(--ui); margin-bottom:22px}
.acceso-izq h1{font:600 30px/34px var(--ui); letter-spacing:-.02em; margin:0 0 6px}
.acceso-izq .claim{font:500 10px/1 var(--mono); letter-spacing:.14em;
                   color:var(--acento); margin-bottom:10px}
.acceso-izq p{font:400 13px/1.6 var(--ui); color:var(--tinta-2); max-width:400px; margin:0 0 26px}
.acceso-cifras{display:flex; gap:30px; flex-wrap:wrap}
.acceso-pie{font:400 11px/1.5 var(--ui); color:var(--tinta-2); margin-top:34px}

.acceso-der{background:var(--fondo); padding:56px 40px;
            display:flex; flex-direction:column; justify-content:center}
.acceso-der h2{font:600 19px/24px var(--ui); margin:0 0 4px}
.acceso-der .ayuda{font:400 12px/1.55 var(--ui); color:var(--tinta-2); margin:0 0 22px}

.campo{margin-bottom:14px}
.campo label{display:block; font:500 10px/12px var(--mono); letter-spacing:.09em;
             color:var(--tinta-2); margin-bottom:6px}
.campo input{width:100%; font:400 13px/1 var(--ui); color:var(--tinta);
             background:var(--fondo); border:1px solid var(--borde-fuerte);
             border-radius:var(--r); padding:12px 12px}
.campo input[type=password]{font-family:var(--mono)}
.campo input:hover{border-color:var(--deshab)}
.campo input:focus{border-color:var(--acento); background:#fff; outline:none;
                   box-shadow:0 0 0 3px var(--acento-sel)}
.campo .pista{font:400 10.5px/1.4 var(--ui); color:var(--tinta-2); margin-top:5px}

/* Los mensajes que explican QUE hacer llevan dos parrafos: el problema
   y la salida. Sin esto salen pegados en un churro.                  */
.con-saltos{white-space:pre-line}
/* El codigo corto del rastro de acceso. Pequenito y en monoespaciada:
   esta para poder LEERLO Y DICTARLO por telefono, no para llamar la
   atencion. Va en su linea propia porque el mensaje de arriba lleva
   saltos y si no se pega al final del ultimo parrafo. */
.codigo-rastro{display:block; margin-top:8px; font:500 10.5px/1 var(--mono);
               letter-spacing:.08em; color:var(--tinta-2); opacity:.85}
.error{background:#f6e3e0; border:1px solid #ecd0cb; border-radius:var(--r-grande);
       padding:11px 13px; font:400 12px/1.5 var(--ui); color:#93463e; margin-bottom:16px}
.exito{background:#e4efe8; border:1px solid #cbe0d5; border-radius:var(--r-grande);
       padding:11px 13px; font:400 12px/1.5 var(--ui); color:#2f6247; margin-bottom:16px}

.acceso-menudo{display:flex; align-items:center; justify-content:space-between;
               margin-top:14px; font:400 11.5px/1 var(--ui); color:var(--tinta-2)}
.acceso-menudo .v{font:500 10px/1 var(--mono); color:var(--deshab)}


/* ------------------------------------------------------------------
   11 · LA PAGINA DE LA PRUEBA DE PERMISOS
   ------------------------------------------------------------------ */

.sql{background:#f4f1ea; border:1px solid var(--borde-fuerte); border-radius:var(--r);
     padding:12px 14px; font:400 11.5px/1.65 var(--mono); color:var(--tinta);
     white-space:pre-wrap; word-break:break-word; overflow-x:auto}
.cols-lista{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px}
.col-chip{font:500 10px/1 var(--mono); letter-spacing:.04em; border-radius:var(--r-chico);
          padding:5px 7px; background:var(--fondo-alt); color:var(--tinta-2);
          border:1px solid var(--borde)}
.col-chip.solo-mando{background:#e9e4f0; color:#54426e; border-color:#d8d0e4}
.col-chip.ausente{background:transparent; color:var(--deshab);
                  border-style:dashed; text-decoration:line-through}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px}
.panel{border:1px solid var(--borde-fuerte); border-radius:var(--r-grande);
       background:var(--fondo); overflow:hidden}
.panel-cab{background:var(--fondo-alt); border-bottom:1px solid var(--borde-fuerte);
           padding:10px 14px; font:500 10px/1 var(--mono); letter-spacing:.09em;
           color:var(--tinta-2)}
.panel-cuerpo{padding:14px}
.parrafo{font:400 12.5px/1.65 var(--ui); color:var(--tinta-2); max-width:760px}
.parrafo strong{color:var(--tinta); font-weight:600}


/* ------------------------------------------------------------------
   10b · VISTA DISCRETA
   ------------------------------------------------------------------
   Cuando esta puesta, la pantalla tiene que DECIRLO. Si no, quien la
   activa acaba creyendo que ha perdido permisos y busca un fallo que
   no existe.

   Va en ambar, no en coral: no es un error ni un aviso de dinero, es
   un estado deliberado. Y ocupa el ancho entero, debajo de la barra,
   para que no se pueda pasar por alto.                              */

.franja-discreta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--ambar-fondo); border-bottom:1px solid #e8dcc2;
  padding:9px 18px;
  font:400 12px/1.5 var(--ui); color:var(--tinta-2);
}
.franja-discreta strong{color:var(--ambar); font-weight:600;
                        font-family:var(--mono); font-size:10.5px;
                        letter-spacing:.08em}
.a-la-derecha-auto{margin-left:auto}

/* Un boton que parece un enlace: va en la barra, entre enlaces, y
   tiene que ser un boton de verdad porque manda un POST con testigo. */
.en-linea{display:inline; margin:0}
.enlace-boton{
  background:none; border:0; padding:0; cursor:pointer;
  font:500 10px/1 var(--mono); letter-spacing:.07em;
  color:var(--tinta-2); text-decoration:underline;
}
.enlace-boton:hover{color:var(--acento)}
.btn-menudo{font-size:11.5px; padding:7px 11px}


/* ------------------------------------------------------------------
   11c · PAGINAS DE EMERGENCIA
   ------------------------------------------------------------------
   Cuando no hay base de datos o el formulario ha caducado no se puede
   pintar el armazon, pero tampoco se pinta en crudo: usan esta hoja
   como todo lo demas. Con estilos en linea saldrian sin formato,
   porque la CSP los bloquea.                                        */

.pagina-error{max-width:640px; padding:48px 26px;
              font:400 14px/1.6 var(--ui); color:var(--tinta)}
.pagina-error h1{font:600 20px/1.3 var(--ui); margin:0 0 10px; letter-spacing:-.01em}
.pagina-error p{color:var(--tinta-2); margin:0 0 12px}
.pagina-error code{font-family:var(--mono); font-size:12.5px;
                   background:var(--fondo-alt); border:1px solid var(--borde);
                   border-radius:var(--r-chico); padding:1px 5px}


/* ------------------------------------------------------------------
   11a · PANTALLA DE USUARIOS
   ------------------------------------------------------------------
   Una ficha por cuenta, no una tabla: cada fila lleva cuatro botones y
   un desplegable, y eso en una tabla no cabe ni en un portatil.       */

.ficha-usuario{
  display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--borde); padding:14px 0;
}
.ficha-usuario:last-child{border-bottom:0}
/* Desactivada: se apaga, no se esconde. El historico sigue ahi. */
.ficha-usuario.inactiva{opacity:.55}

.ficha-quien{flex:1; min-width:210px}
.ficha-quien .nom{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
                  font:600 14px/18px var(--ui); color:var(--tinta)}
.ficha-quien .sub{font:400 11px/15px var(--ui); color:var(--tinta-2); margin-top:2px}

.ficha-etis{display:flex; align-items:center; gap:6px; flex-wrap:wrap;
            min-width:170px}

.ficha-acciones{display:flex; align-items:center; gap:6px; flex-wrap:wrap}

.selector{
  font:400 12px/1 var(--ui); color:var(--tinta);
  background:var(--fondo); border:1px solid var(--borde-fuerte);
  border-radius:var(--r); padding:9px 10px; min-height:var(--toque);
}
.selector:focus{border-color:var(--acento); outline:none;
                box-shadow:0 0 0 3px var(--acento-sel)}
.ancho-total{width:100%}

.casilla{display:flex; align-items:flex-start; gap:9px; cursor:pointer;
         font:400 12px/1.5 var(--ui); color:var(--tinta-2);
         letter-spacing:normal; text-transform:none}
.casilla input{margin-top:2px; width:17px; height:17px; accent-color:var(--acento)}

/* Para lectores de pantalla: la etiqueta existe aunque no se dibuje.
   No se usa display:none, que la quitaria tambien de ahi.            */
.oculto-visual{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ------------------------------------------------------------------
   11a-bis · EL CODIGO DE INVITACION
   ------------------------------------------------------------------
   Se ensena UNA sola vez, asi que tiene que verse a la primera y no
   confundirse al copiarlo. De ahi el tamano, el monoespaciado y el
   espaciado entre letras: se dicta por telefono sin equivocarse.     */

.panel-codigo{
  border:2px solid var(--acento); border-radius:var(--r-grande);
  background:var(--acento-franja); padding:18px 20px;
}
.panel-codigo .rotulo{font:500 10px/1 var(--mono); letter-spacing:.1em;
                      color:var(--tinta-2); margin-bottom:10px}
.panel-codigo .codigo{
  font:600 30px/1.1 var(--mono); letter-spacing:.16em;
  color:var(--tinta); word-break:break-all; margin-bottom:12px;
  -webkit-user-select:all; user-select:all;   /* un clic lo selecciona entero */
}
.btn-copiar{margin-bottom:8px}
.para-copiar{margin-top:14px}
.para-copiar textarea{
  width:100%; font:400 12px/1.6 var(--mono); color:var(--tinta);
  background:var(--fondo); border:1px solid var(--borde-fuerte);
  border-radius:var(--r); padding:10px 12px; resize:vertical;
}


/* ------------------------------------------------------------------
   11d · FICHA DE PARTIDA Y REJILLA DE MEDICION
   ------------------------------------------------------------------ */

/* Rejilla de formulario de 12 columnas. Se apila entera en movil: un
   formulario a dos columnas en un telefono se rellena mal y se rellena
   con errores.                                                        */
.rejilla-form{display:grid; grid-template-columns:repeat(12,1fr); gap:0 14px}
.col-2{grid-column:span 2}  .col-3{grid-column:span 3}
.col-4{grid-column:span 4}  .col-6{grid-column:span 6}
.col-8{grid-column:span 8}  .col-9{grid-column:span 9}
.col-12{grid-column:span 12}

.campo textarea{
  width:100%; font:400 13px/1.6 var(--ui); color:var(--tinta);
  background:var(--fondo); border:1px solid var(--borde-fuerte);
  border-radius:var(--r); padding:10px 12px; resize:vertical;
}
.campo textarea:focus{border-color:var(--acento); background:#fff; outline:none;
                      box-shadow:0 0 0 3px var(--acento-sel)}
.campo input:disabled,.campo textarea:disabled,.selector:disabled{
  background:var(--fondo-alt); color:var(--deshab); cursor:not-allowed}
.campo input[readonly]{background:var(--fondo-alt); color:var(--tinta-2)}

.barra-acciones{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* --- la rejilla de medicion, como la maqueta 01 --- */
.medicion{border:1px solid var(--borde-fuerte); border-radius:var(--r-grande);
          overflow:hidden; margin-top:12px}
/* La ultima columna paso de 34 a 108 px cuando entraron el asa de
   arrastre y las dos flechas de subir y bajar. Antes solo llevaba la
   × de quitar.                                                       */
.fila-med{display:grid; grid-template-columns:1fr 66px 74px 74px 74px 90px 108px;
          align-items:center; border-bottom:1px solid var(--borde)}
.fila-med:last-child{border-bottom:0}
.fila-med.cab{background:var(--fondo-alt); border-bottom:1px solid var(--borde-fuerte)}
.fila-med.cab > div{padding:8px 9px; font:500 9.5px/1 var(--mono);
                    letter-spacing:.07em; color:var(--tinta-2)}
.fila-med input{
  border:0; border-right:1px solid var(--borde); background:transparent;
  font:400 12.5px/1 var(--ui); color:var(--tinta);
  padding:10px 9px; min-height:var(--toque); width:100%;
}
.fila-med input.der{font-family:var(--mono); text-align:right;
                    font-variant-numeric:tabular-nums}
.fila-med input:focus{outline:none; background:var(--acento-sel);
                      box-shadow:inset 0 0 0 2px var(--acento)}
.fila-med .parcial{
  padding:10px 9px; font:500 13px/1 var(--mono); text-align:right;
  color:var(--tinta); font-variant-numeric:tabular-nums;
  background:var(--fondo-alt);
}
.fila-med.total{background:var(--fondo-alt); border-top:2px solid var(--tinta)}
.fila-med.total > div{padding:11px 9px; font:600 11px/1 var(--mono);
                      letter-spacing:.07em; color:var(--tinta)}
.fila-med.total .parcial{font-size:15px; letter-spacing:0}

.btn-quitar{
  border:0; background:transparent; cursor:pointer;
  font:400 18px/1 var(--ui); color:var(--deshab);
  min-height:var(--toque); width:34px;
}
.btn-quitar:hover{color:var(--coral)}
.btn-quitar:disabled{opacity:.3; cursor:not-allowed}

/* ------------------------------------------------------------------
   SUBIR Y BAJAR DE SITIO
   ------------------------------------------------------------------
   Dos caminos para lo mismo, y los dos tienen que estar:

     LAS FLECHAS   funcionan con el dedo, con Tab y con Intro, y
                   funcionan aunque no haya JavaScript: son botones de
                   un formulario de verdad.
     EL ARRASTRE   es comodidad encima. Lo monta publico/js/orden.js.

   Es la norma WCAG 2.2, criterio 2.5.7: nada puede depender de un
   movimiento de arrastre. Y hay un motivo practico ademas de la norma:
   Jose mira el ERP desde el telefono, donde arrastrar una fila dentro
   de una tabla que ya se desliza en horizontal es una pelea.

   Las flechas miden 24 px, que es el objetivo tactil minimo del
   criterio 2.5.8. No 44: en la celda del codigo no caben dos de 44 y
   una fila que crece 44 px por partida convierte el presupuesto en un
   listado imposible de recorrer. 24 con separacion cumple la excepcion
   de espaciado.                                                      */

.mover{display:flex; gap:2px; margin-top:4px}
.btn-mover{
  border:1px solid var(--borde-fuerte); background:var(--fondo);
  border-radius:3px; cursor:pointer; padding:0;
  width:24px; height:24px; min-width:24px;
  font:400 11px/1 var(--ui); color:var(--tinta-2);
}
.btn-mover:hover{background:var(--hover); color:var(--tinta)}
.btn-mover:focus-visible{outline:2px solid var(--acento); outline-offset:1px}
.btn-mover:disabled{opacity:.35; cursor:not-allowed}

/* El asa del arrastre. `cursor:grab` es la unica pista de que una fila
   se puede arrastrar; sin ella nadie lo descubre.

   Donde la fila lleva campos de texto —la rejilla de medicion, la
   tarjeta del capitulo— el arrastre arranca SOLO desde el asa. Si la
   fila entera fuera arrastrable, seleccionar con el raton lo que hay
   escrito en un campo empezaria un arrastre en vez de seleccionar.   */
.asa{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:24px; cursor:grab;
  font:400 12px/1 var(--ui); color:var(--deshab); letter-spacing:-2px;
  user-select:none;
}
.asa:active{cursor:grabbing}
.fila-par[draggable="true"] .par-cod{cursor:grab}
.fila-par.arrastrando{opacity:.4}
/* Donde va a caer. Una linea de 3 px en acento, arriba o abajo segun
   el lado por el que se suelte: sin ella el arrastre es a ciegas.    */
.fila-par.soltar-antes{box-shadow:inset 0 3px 0 var(--acento)}
.fila-par.soltar-despues{box-shadow:inset 0 -3px 0 var(--acento)}
.ficha-usuario.arrastrando{opacity:.4}
.ficha-usuario.soltar-antes{box-shadow:inset 0 3px 0 var(--acento)}
.ficha-usuario.soltar-despues{box-shadow:inset 0 -3px 0 var(--acento)}
.fila-med.arrastrando{opacity:.4}
.fila-med.soltar-antes{box-shadow:inset 0 3px 0 var(--acento)}
.fila-med.soltar-despues{box-shadow:inset 0 -3px 0 var(--acento)}

/* Las tres acciones de una linea de medicion, en la ultima columna. */
.med-acciones{display:flex; align-items:center; justify-content:flex-end;
              gap:2px; padding-right:6px}
.med-acciones .mover{margin-top:0}

/* EL AVISO DE GUARDADO. Un cambio que se guarda en silencio no se
   distingue de uno que se ha perdido, y con el arrastre es peor: la
   fila se queda donde la sueltas aunque el servidor haya dicho que no.
   Asi que se dice siempre, y el fallo se queda hasta que se lea.     */
.orden-aviso{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:60; max-width:min(560px, 92vw);
  border:1px solid var(--borde-fuerte); border-radius:var(--r-grande);
  background:var(--fondo); color:var(--tinta);
  font:500 12.5px/17px var(--ui); padding:10px 14px;
  box-shadow:0 6px 20px rgba(36,29,27,.18);
}
.orden-aviso.malo{border-color:var(--coral); color:var(--coral)}

@media (max-width: 760px){
  .rejilla-form{grid-template-columns:1fr}
  .col-2,.col-3,.col-4,.col-6,.col-8,.col-12{grid-column:span 1}
  /* La rejilla de medicion NO se apila: se desliza. Apilada se pierde
     la comparacion en vertical, que es justo para lo que sirve.      */
  .medicion{overflow-x:auto}
  .medicion > *{min-width:634px}
}


/* ------------------------------------------------------------------
   08a · LA FICHA QUE SE DESPLIEGA DEBAJO DE SU FILA
   ------------------------------------------------------------------
   Jose pulsaba el codigo de una partida y el ERP le abria otra
   pantalla: perdia el filtro, el scroll, los totales de arriba y las
   filas de al lado. Aqui la ficha se abre DENTRO de la tabla, pegada a
   su fila, y la fila abierta se marca con `.fila-par.sel`, que ya
   existia y no se duplica.

   UNA SOLA FICHA ABIERTA A LA VEZ. Lo dice la maqueta: si no, la tabla
   se convierte en un acordeon infinito y se deja de ver donde estaba
   cada cosa. De eso se encarga publico/js/ficha.js; aqui solo el
   aspecto.

   LA REJILLA DE MEDICION NO SE REPITE: la ficha usa `.medicion` /
   `.fila-med` de la seccion de arriba, la misma que la pantalla de la
   partida. Dos rejillas para lo mismo son dos sitios donde arreglar el
   dia que cambie una columna.                                        */

/* El hueco que crea el JavaScript entre dos filas. No pinta nada: solo
   saca al panel de la rejilla de la tabla, que tiene sus columnas. */
.det-hueco{display:block}

.det{background:var(--fondo-alt); border-top:1px solid var(--acento);
     border-bottom:1px solid var(--borde-fuerte); padding:14px 16px 16px}

.det-cab{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
         margin-bottom:12px}
.det-cod{font:500 11px/1 var(--mono); letter-spacing:.05em; color:var(--acento)}
.det-res{font:600 13.5px/18px var(--ui); color:var(--tinta); flex:1; min-width:180px}
.det-entera{font:400 11.5px/1 var(--ui); color:var(--tinta-2);
            text-decoration:underline}
.det-entera:hover{color:var(--acento)}
.det-cerrar{border:0; background:transparent; cursor:pointer;
            font:400 20px/1 var(--ui); color:var(--tinta-2);
            min-height:var(--toque); width:34px}
.det-cerrar:hover{color:var(--acento)}

/* Cuando no hay ficha que enseñar —sesion caida, partida borrada, el
   servidor que no contesta— sale esto. Un hueco vacio haria creer que
   la partida no tiene nada escrito, y eso es un dato falso. */
.det-aviso{font:400 12.5px/1.6 var(--ui); color:var(--tinta-2);
           background:var(--fondo); border:1px solid var(--borde-fuerte);
           border-radius:var(--r); padding:11px 13px}

.det-rotulo{margin:0 0 8px; font:600 10px/1 var(--mono); letter-spacing:.11em;
            color:var(--tinta-2)}

/* --- la descripcion para el cliente: lo que sale en el PDF --- */
.dlarga{background:var(--fondo); border:1px solid var(--borde-fuerte);
        border-radius:var(--r-grande); padding:9px 11px; margin-bottom:16px}
.dlarga textarea{width:100%; border:0; outline:none; background:transparent;
                 resize:vertical; font:400 12.5px/1.55 var(--ui);
                 color:var(--tinta); min-height:44px}
.dlarga textarea::placeholder{color:var(--deshab); font-style:italic}
.dlarga textarea:disabled{color:var(--tinta-2)}

/* --- los tres criterios --- */
/* UN CRITERIO VACIO NO PUEDE PARECERSE A UNO RELLENO. Si nadie ve que
   falta, no se rellena nunca, y lo que se mide y lo que entra en el
   precio acaban dependiendo de lo que cada uno recuerde. El que falta
   va en ambar —el color de «esto hay que mirarlo»— y ademas lleva la
   palabra FALTA escrita: el color solo no vale para quien no lo
   distingue.                                                         */
.crit{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px}
.crit .c{background:var(--fondo); border:1px solid var(--borde-fuerte);
         border-radius:var(--r-grande); padding:9px 11px}
.crit .c.falta{background:var(--ambar-fondo); border-color:var(--ambar)}
.crit .c .k{display:block; font:500 9.5px/1.3 var(--mono); letter-spacing:.1em;
            color:var(--tinta-2); margin-bottom:5px}
.crit .c.falta .k{color:var(--ambar)}
.crit .c textarea{width:100%; border:0; outline:none; background:transparent;
                  resize:vertical; font:400 12px/1.5 var(--ui);
                  color:var(--tinta); min-height:34px}
.crit .c textarea::placeholder{color:var(--deshab); font-style:italic}
.crit .c textarea:disabled{color:var(--tinta-2)}

/* --- una partida sin desglose de medicion --- */
.sindesglose{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
             background:var(--fondo); border:1px solid var(--borde-fuerte);
             border-radius:var(--r-grande); padding:11px 13px; margin-top:10px;
             font:400 12.5px/1.55 var(--ui); color:var(--tinta-2)}
.sindesglose strong{color:var(--tinta); font-weight:600}

/* La descripcion de la fila abre la ficha igual que el codigo, asi que
   es un boton de verdad: se tabula, se pulsa con Intro y lo anuncia el
   lector de pantalla. Lo que no puede es PARECER un boton, porque
   dentro de la tabla es texto. */
.par-abrir{display:block; width:100%; text-align:left; border:0; padding:0;
           background:transparent; cursor:pointer;
           font:400 12.5px/17px var(--ui); color:var(--tinta)}
.par-abrir:hover{color:var(--acento)}

@media (max-width: 860px){
  /* Tres columnas de criterio en un movil son tres columnas ilegibles. */
  .crit{grid-template-columns:1fr}
}


/* ------------------------------------------------------------------
   08b · EXTRAS, ANEXOS, ESTADO DE PRECIO Y BUSCADOR
   ------------------------------------------------------------------
   Regla 10: un extra NUNCA se mezcla con lo contratado. En pantalla eso
   son bloques separados, con su cabecera y su subtotal. El morado es el
   color de estado de «fuera de contrato», el mismo de la etiqueta de la
   partida: si el bloque y la etiqueta fueran de colores distintos,
   parecerian dos cosas.                                              */

.fila-origen{background:#e9e4f0; border-top:2px solid var(--morado);
             border-bottom:1px solid #d8d0e4}
.fila-origen > div{grid-column:1 / -1}
.og-rotulo{padding:10px 12px; font:600 10.5px/1 var(--mono);
           letter-spacing:.1em; color:#54426e}

.fila-subtotal{background:var(--fondo-alt); border-top:1px solid var(--borde-fuerte)}
.fila-subtotal > div{padding:10px 9px}
.fila-subtotal.extra,.fila-subtotal.anexo{background:#f3f0f7}

.fila-desglose{background:var(--fondo-alt)}
.fila-desglose > div{padding:8px 9px}
.og-desglose{grid-column:2 / -1; font:400 11px/1.5 var(--ui); color:var(--tinta-2)}

/* --- E.7 · el estado de los precios --- */
.estados{display:flex; gap:22px; flex-wrap:wrap}
.estado-bloque{min-width:120px}
.estado-bloque .imp{text-align:left; font-size:19px}

/* --- E.3 · el buscador --- */
.buscador{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.buscador input{
  flex:1; min-width:240px; max-width:520px;
  font:400 13px/1 var(--ui); color:var(--tinta);
  background:var(--fondo); border:1px solid var(--borde-fuerte);
  border-radius:var(--r); padding:11px 13px; min-height:var(--toque);
}
.buscador input:focus{border-color:var(--acento); background:#fff; outline:none;
                      box-shadow:0 0 0 3px var(--acento-sel)}
.buscador .resultado{font:500 11px/1 var(--mono); letter-spacing:.05em;
                     color:var(--tinta-2)}

/* Una fila que el buscador ha descartado. display:none y no
   visibility:hidden: si no, deja su hueco y la tabla queda con agujeros. */
.oculto-buscar{display:none !important}


/* --- 6.1 · las partidas sin criterios --- */
.detalle-criterios{width:100%; margin-top:8px}
.detalle-criterios summary{cursor:pointer; font:500 11px/1 var(--mono);
                           letter-spacing:.05em; color:#6f5717;
                           padding:6px 0; min-height:var(--toque);
                           display:flex; align-items:center}
.lista-criterios{margin:6px 0 0; padding-left:18px;
                 font:400 11.5px/1.7 var(--ui); color:var(--tinta-2);
                 max-height:280px; overflow-y:auto}
.lista-criterios code{margin-right:6px}


/* ------------------------------------------------------------------
   13 · MODULO 4 · PLANIFICACION Y GANTT
   ------------------------------------------------------------------
   EL GANTT SE PINTA CON CSS. Sin librerias, y no por gusto: la cabecera
   Content-Security-Policy dice `default-src 'self'`, asi que no entra
   nada de un CDN, y tampoco hay `style=` en linea con el que colocar
   una barra en su sitio.

   La solucion es la de toda la vida y ademas es la mas robusta: cada
   fila es una tira de celdas IGUALES —un dia, una semana o un mes, lo
   decide el servidor segun lo que dure la obra— y las celdas que caen
   dentro del tramo llevan la clase `en`. No hay que calcular ni un
   pixel: si la celda esta dentro, se pinta.

   Consecuencias buenas de hacerlo asi: se ve sin JavaScript, se
   imprime, y no hay ninguna forma de que las barras y el eje se
   descuadren, porque son la misma rejilla.

   El ancho de celda es lo unico que cambia entre las tres escalas, y
   vive aqui, en una variable por escala.                             */

.gantt-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;
              border:1px solid var(--borde-fuerte); border-radius:var(--r-grande)}
.gantt{min-width:max-content; --g-celda:26px; --g-rotulo:230px}
.gantt.dia   {--g-celda:20px}
.gantt.semana{--g-celda:28px}
.gantt.mes   {--g-celda:42px}

.g-fila{display:flex; align-items:stretch; border-bottom:1px solid var(--borde)}
.g-fila:last-child{border-bottom:0}
.g-fila:hover{background:var(--hover)}
.g-fila.g-cab{background:var(--fondo-alt); border-bottom:1px solid var(--borde-fuerte)}
.g-fila.g-cab:hover{background:var(--fondo-alt)}
/* Un capitulo que empieza antes de que acabe aquel del que depende. No
   se corrige la fecha: se marca la fila y se explica arriba con letras. */
.g-fila.incumple{box-shadow:inset 3px 0 0 var(--coral)}
/* Sin fechas: la fila existe, ocupa su sitio y NO tiene barra. Que se
   note que falta, en vez de desaparecer de la lista.                  */
.g-fila.sin-fechas{background:repeating-linear-gradient(
   45deg, transparent, transparent 7px, var(--fondo-alt) 7px, var(--fondo-alt) 14px)}

.g-rot{width:var(--g-rotulo); flex:none; padding:7px 10px;
       border-right:1px solid var(--borde-fuerte); background:var(--fondo)}
.g-fila.g-cab .g-rot{background:var(--fondo-alt);
                     font:500 9.5px/1 var(--mono); letter-spacing:.07em;
                     color:var(--tinta-2); display:flex; align-items:center}
.g-fila.sin-fechas .g-rot{background:transparent}
.g-cod{font:500 11px/1.2 var(--mono); color:var(--tinta-2)}
.g-nom{font:600 12.5px/16px var(--ui); color:var(--tinta); margin-top:2px}
.g-sub{font:400 10.5px/14px var(--mono); color:var(--tinta-2); margin-top:3px;
       font-variant-numeric:tabular-nums}

.g-celdas{display:flex; flex:none}
.c{width:var(--g-celda); flex:none; min-height:22px;
   border-right:1px solid var(--borde)}
.g-fila.g-cab .c{min-height:18px}

/* Cabecera: la fila de grupos (mes o año) y la de unidades. */
.g-grupo{font:500 9px/18px var(--mono); letter-spacing:.06em; color:var(--tinta-2);
         white-space:nowrap; overflow:visible; border-right:0}
.g-grupo.corte{border-left:1px solid var(--borde-fuerte)}
.g-unidad{font:400 9.5px/18px var(--mono); color:var(--tinta-2); text-align:center;
          font-variant-numeric:tabular-nums}

/* Sabado y domingo, apagados. Solo existen en la escala de dias. */
.c.finde{background:var(--fondo-alt)}
/* HOY. Es una linea, no un relleno: tiene que verse por encima de la
   barra y no confundirse con ella.                                    */
.c.hoy{box-shadow:inset -1px 0 0 var(--coral), inset 1px 0 0 var(--coral)}

/* LA BARRA. Un tramo continuo con las puntas redondeadas solo en los
   extremos: asi se ve donde empieza y donde acaba de verdad.          */
.c.en{background:var(--acento); border-right-color:var(--acento)}
.c.en.bi{border-top-left-radius:var(--r); border-bottom-left-radius:var(--r)}
.c.en.bf{border-top-right-radius:var(--r); border-bottom-right-radius:var(--r)}

/* La dependencia, dibujada donde de verdad esta: en la columna en la
   que ACABA el capitulo del que se depende. Es la unica clase de
   dependencia que existe hoy —fin a inicio— y por eso basta una marca,
   sin flechas ni holguras.                                            */
.c.dep{box-shadow:inset -2px 0 0 var(--azul)}
/* Fecha montaje, que viene de Notion: es un HITO, no un tramo. Un
   rombo, no una barra: si se pintara como barra parecerian dias de
   trabajo y son un dia solo.                                          */
.c.montaje{background-image:radial-gradient(circle at 50% 50%,
           var(--morado) 0 3.5px, transparent 3.5px)}

.g-nada{flex:1; display:flex; align-items:center; padding:7px 12px;
        font:500 10px/1 var(--mono); letter-spacing:.08em; color:var(--deshab);
        white-space:nowrap}

.leyenda{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
         font:400 11px/1.6 var(--ui); color:var(--tinta-2)}
.lg{display:inline-block; width:16px; height:11px; border-radius:3px;
    border:1px solid var(--borde-fuerte); margin-left:10px}
.lg:first-child{margin-left:0}
.lg-barra{background:var(--acento); border-color:var(--acento)}
.lg-hoy{background:var(--fondo); border-color:var(--coral); border-width:0 1px}
.lg-dep{background:var(--fondo); border-right:2px solid var(--azul)}
.lg-mon{background-image:radial-gradient(circle at 50% 50%,
        var(--morado) 0 3.5px, transparent 3.5px)}

.filtro-plan{margin-bottom:10px}

/* En movil no cabe una rejilla de cuarenta columnas: se cambia de
   componente, igual que el presupuesto. Fuera de movil, la lista sobra. */
.plan-movil{display:none}

/* ------------------------------------------------------------------
   GANTT POR PARTIDA · lo que anade la migracion 040 (puntos 17-18)
   ------------------------------------------------------------------
   El capitulo y el proveedor son REFERENCIA, no la unidad que se
   planifica: van en tipografia mas pequena y apagada, dentro de la
   misma linea `g-sub` que ya pintaba las fechas.                     */
.g-capref{font-weight:600; color:var(--tinta-2)}
.g-prov{color:var(--azul)}

/* La fila del BLOQUE: incluye varias partidas bajo un nombre propio.
   Se distingue con un fondo propio, no con color de texto —el color de
   texto ya lo usa `incumple`—.                                       */
.g-fila.g-bloque{background:var(--fondo-alt)}
.g-fila.g-bloque:hover{background:var(--fondo-alt)}
.g-fila.g-bloque .g-rot{background:transparent}
.c.bloquec.en{background:var(--morado); border-right-color:var(--morado)}

/* LA BARRA QUE SE ARRASTRA (punto 17). Un cursor de agarre es la unica
   pista visual que hace falta: el resto —que se puede soltar, que ha
   cuadrado o no— lo dice el aviso de `gantt.js`, igual que en el
   arrastre del presupuesto.                                          */
.c.en.arrastrable{cursor:grab}
.c.en.arrastrable:active{cursor:grabbing}
.g-fila.arrastrando{opacity:.55}


/* ------------------------------------------------------------------
   11b · UTILIDADES
   ------------------------------------------------------------------
   Existen por dos motivos, y el segundo es el que importa:

     - la regla del proyecto es «un solo fichero de estilos, nada de
       estilos sueltos por pagina»
     - la cabecera Content-Security-Policy que pone index.php BLOQUEA
       los estilos en linea. Un style="..." en una plantilla no se
       aplicaria, y la pantalla saldria descolocada sin decir por que.  */

.der{text-align:right}
.cen{text-align:center}
.mono{font-family:var(--mono)}
.mono-11{font-family:var(--mono);font-size:11px}
.menudo{font-size:11.5px}
.apagado{color:var(--deshab)}

.mt-4{margin-top:4px}   .mt-6{margin-top:6px}   .mt-8{margin-top:8px}
.mt-12{margin-top:12px} .mt-14{margin-top:14px} .mt-16{margin-top:16px}
.mt-18{margin-top:18px} .mt-22{margin-top:22px}
.mb-6{margin-bottom:6px}  .mb-10{margin-bottom:10px}

.ancho-texto{max-width:620px}
.ancho-form{max-width:460px;margin-top:16px}

/* La rejilla del presupuesto la decide el SERVIDOR segun el rol. Son
   las dos unicas formas que puede tomar, y estan aqui, juntas, para
   poder compararlas de un vistazo.                                   */
.tabla.gerencia{--cols:62px 1fr 34px 70px 70px 84px 132px 104px 74px 74px 88px 84px}
.tabla.equipo  {--cols:62px 1fr 34px 70px 70px 84px 180px 104px 74px}

/* Vista por proveedor. Misma idea: la columna de venta solo existe
   para quien la ve, y por eso son dos rejillas y no una con una
   columna escondida.                                              */
.tabla.prov-gerencia{--cols:1fr 74px 104px 104px 104px 96px 104px 90px}
.tabla.prov-equipo  {--cols:1fr 74px 116px 116px 116px 104px 90px}

/* MODULO 2 · CERTIFICACIONES.
   Dos rejillas y ninguna columna escondida: la de la LISTA de
   certificaciones de una obra y la de las LINEAS de una certificacion.
   La de lineas tiene tres columnas de dinero seguidas —lo anterior, lo
   de esta vez y el total a origen— porque esa es la pregunta que se
   hace en obra y no puede resolverse restando de cabeza.             */
.tabla.cert-lista {--cols:48px 1fr 132px 128px 104px 104px 104px 96px 104px}
.tabla.cert-lineas{--cols:76px 1fr 34px 74px 80px 58px 58px 96px 96px 96px 100px}
.tabla.retenciones{--cols:1fr 150px 96px 104px 104px 104px 112px}

/* MODULO 6 · EL BANCO DE PRECIOS.
   Nueve columnas: concepto (lo unico elastico), unidad, veces, los dos
   extremos, el ultimo precio, quien y cuando, si es fiable, y el boton.
   Las cifras van a ancho fijo para que se puedan comparar en vertical de
   un vistazo: con columnas elasticas, dos precios de la misma longitud
   quedan desalineados y hay que leerlos uno a uno.                    */
.tabla.banco-precios{--cols:1fr 48px 96px 104px 104px 116px 190px 84px 74px}

/* M2 · LA FICHA DEL INDUSTRIAL.
   Sin ninguna columna de dinero, y no por maquetacion: la consulta que
   la construye tampoco lo trae. Es la hoja que se imprime y sale de la
   empresa.                                                            */
.tabla.ficha-industrial{--cols:132px 1fr 104px 104px 74px 88px 128px}

/* MODULO 3 · LA CAJA.
   Tres rejillas, y las tres tienen la misma forma a proposito: una
   columna ancha con el nombre, las cifras a la derecha, y el estado al
   final. Quien lleva la caja pasa el dia entre las tres y no tiene por
   que aprenderse tres sitios distintos donde mirar.

   .facturas       vale para las de industrial y para las de cliente:
                   son la misma pregunta en las dos direcciones y por
                   eso llevan las mismas ocho columnas.
   .movimientos    pagos y cobros. Las tres columnas de dinero seguidas
                   —importe, repartido y SIN REPARTIR— van juntas
                   porque lo que hay que ver de un vistazo es si la
                   tercera no es cero: eso es dinero que ha salido del
                   banco y no esta apuntado en ninguna obra.
   .imputaciones   el reparto de UNA FACTURA. Lleva la columna
                   DIFERENCIA al lado de CERTIFICADO y FACTURADO, y no
                   al final, porque el descuadre solo significa algo
                   pegado a las dos cifras de las que sale.
   .reparto        el reparto de UN PAGO o de UN COBRO. Es otra rejilla
                   y no la misma con una columna vacia: aqui las tres
                   columnas del medio son los TRES justificantes
                   posibles —factura, certificacion, anticipo— y lo que
                   hay que ver de un vistazo es que al menos una tenga
                   algo. Con la rejilla de las facturas se leerian
                   desplazadas y esa comprobacion se perderia.         */
.tabla.facturas    {--cols:1fr 132px 104px 104px 112px 104px 84px 128px}
.tabla.movimientos {--cols:104px 1fr 116px 108px 108px 116px 128px}
.tabla.imputaciones{--cols:104px 1fr 132px 104px 104px 104px 108px 40px}
.tabla.reparto     {--cols:88px 120px 120px 1fr 160px 116px 40px}
.tabla.anticipos   {--cols:1fr 88px 104px 108px 112px 112px 120px 116px}

/* LA CAJA POR OBRA. Las cinco cifras van en este orden y no en otro:
   lo que ENTRA primero y lo que SALE despues, y el saldo al final. Se
   lee de izquierda a derecha como se cuenta: «he cobrado esto, me
   deben esto, he pagado esto, debo esto, y me queda esto».           */
.tabla.caja        {--cols:1fr 116px 132px 116px 132px 120px 76px}
.tabla.pendientes  {--cols:1fr 160px 152px 176px 152px}

/* Lo que se pasa de lo contratado se ve en rojo y con su cifra: es la
   unica celda de la pantalla que puede significar dinero perdido.    */
.exceso{color:var(--coral); font-weight:600}

/* LA CASCADA DE CIERRE. Es el corazon del modulo 2 y por eso tiene su
   propio componente y no una tabla: son SIETE pasos encadenados y lo
   que hay que poder seguir con el dedo es la resta, no la rejilla.
   Se lee igual en movil, que es donde se mira en obra.               */
.cascada{border:1px solid var(--borde-fuerte); border-radius:var(--r-grande);
         overflow:hidden; background:var(--fondo)}
.cascada .paso{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
               padding:9px 14px; border-bottom:1px solid var(--borde)}
.cascada .paso:last-child{border-bottom:0}
.cascada .rot{flex:1; min-width:180px; font:400 12px/1.5 var(--ui); color:var(--tinta-2)}
.cascada .val{font:500 14px/1.3 var(--mono); text-align:right; min-width:140px;
              font-variant-numeric:tabular-nums; color:var(--tinta)}
.cascada .paso.resta .val{color:var(--coral)}
.cascada .paso.parcial{background:var(--fondo-alt)}
.cascada .paso.parcial .rot{color:var(--tinta)}
.cascada .paso.final{background:var(--fondo-alt); border-top:2px solid var(--tinta)}
.cascada .paso.final .rot{color:var(--tinta); font-weight:600}
.cascada .paso.final .val{font-size:18px; font-weight:600}

/* El historico de estados: quien movio que y cuando. */
.historia{margin:0; padding:0; list-style:none}
.historia li{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
             padding:7px 0; border-bottom:1px solid var(--borde);
             font:400 12px/1.5 var(--ui); color:var(--tinta-2)}
.historia li:last-child{border-bottom:0}
.historia .cuando{font:400 10.5px/1 var(--mono); color:var(--deshab); min-width:118px}
.historia .quien{color:var(--tinta)}

/* Cuando lo medido y lo comprado no coinciden, se ve. */
.compra{font-size:10px;color:var(--acento)}

.cifra-valor.chica{font-size:15px}
.cifra-valor.media{font-size:17px}

.panel-cab.flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-cab .cuenta{margin-left:auto;font:400 10px/1 var(--mono);color:var(--deshab)}

.movil-cap.total{background:var(--fondo-alt);border-color:var(--tinta)}
.aviso.malo{background:#f6e3e0;border-color:#ecd0cb}

/* Las tarjetas de obra apilan rotulo y cifra: sin esto irian en linea. */
.obra-tarjeta .sub,
.obra-tarjeta .num .cifra-rotulo,
.obra-tarjeta .num .imp{display:block}
.obra-tarjeta .num .cifra-rotulo{text-align:right}


/* ------------------------------------------------------------------
   12 · MOVIL Y TABLET
   ------------------------------------------------------------------
   Reglas de la maqueta:
     - en movil no cabe una tabla: se vuelve lista de capitulos con su
       coste a la derecha, en mono y alineado, para poder compararlos
       en vertical
     - objetivos tactiles de 44 px
     - una sola accion primaria abajo, a lo ancho                     */

.movil-lista{display:none}

@media (max-width: 1180px){
  /* Entre 1180 y 900 la tabla no se rompe: se desliza. Antes de
     quitarle columnas al usuario, se le deja arrastrar.              */
  .tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tabla-scroll > *{min-width:1040px}
}

@media (max-width: 860px){
  .acceso{grid-template-columns:1fr}
  .acceso-izq{padding:40px 26px; border-right:none;
              border-bottom:1px solid var(--borde-fuerte)}
  .acceso-der{padding:32px 26px}
  .dos{grid-template-columns:1fr}
}

@media (max-width: 760px){
  .lienzo{padding:16px 14px 90px}
  .migas{padding:10px 14px 0}
  /* MEDIDO EL 29/08/2026 A 375 px, que es un movil de verdad: la barra
     de arriba medía 460 px con `white-space:nowrap`, y esos 85 px de
     mas hacian que TODAS las pantallas del ERP se pudieran arrastrar de
     lado. No era de ninguna pantalla: era de la plantilla, y por eso no
     lo cazaba mirar una pagina concreta.
     Con la barra de la maqueta (05/09) la regla es la misma: nada con
     nowrap que no quepa. La marca y la pildora van en la primera linea;
     el menu baja a una segunda y se desliza de lado si hace falta, que
     es lo que hace un menu en un movil.                               */
  .cima{padding:8px 14px; gap:8px 14px; flex-wrap:wrap; position:static}
  .cima-menu{order:3; width:100%; flex-wrap:nowrap; overflow-x:auto;
             -webkit-overflow-scrolling:touch}
  .cima-menu a{font-size:12.5px; padding:8px 10px}
  .cima-yo summary{font-size:9.5px; padding:6px 10px}
  .desplegable{min-width:190px}

  h1.obra{font-size:23px; line-height:27px}
  .obra-cabecera h1.obra{font-size:23px; line-height:1.1}
  .obra-cab{gap:14px}
  .cifras{gap:20px}
  .cifra-valor{font-size:19px}
  /* Las cuatro cajas no caben en 375 px: se deslizan, no se quitan. */
  .kpis{max-width:100%; overflow-x:auto}
  .kpi{min-width:112px; padding:10px 13px}
  .kpi-valor{font-size:16px}
  .pestanas{gap:18px; flex-wrap:nowrap; overflow-x:auto}
  .pestana-menu .desplegable{left:auto; right:0}

  /* La tabla se va y entra la lista. No se ocultan columnas con
     overflow: se cambia de componente, que es lo que dice la maqueta. */
  .tabla{display:none}
  .movil-lista{display:block; margin-top:14px}

  /* MODULO 4 · el Gantt tampoco cabe. Misma decision que la tabla: no
     se le quitan columnas, se cambia de componente. La lista de
     capitulos con sus dos fechas contesta la misma pregunta con el
     pulgar.
     El interruptor de «solo los que no tienen fechas» SI se queda: es
     la pregunta que se hace en obra y filtra las dos vistas.

     ARREGLADO EL 29/08/2026, Y MEDIDO. Este comentario se cerraba dos
     veces: llevaba una marca de cierre tres lineas mas arriba, y el
     texto que quedaba suelto se pegaba delante del selector de abajo.
     Resultado: la regla que esconde el Gantt en el movil NO se
     aplicaba, y salian A LA VEZ el Gantt ancho y la lista que existe
     para sustituirlo. Medido a 375 px antes de tocar nada:
     getComputedStyle de .gantt-scroll decia «block» y el de .leyenda
     «flex», cuando las dos tenian que decir «none». Un CSS mal cerrado
     no da ningun error: la pantalla sale, solo que mal.
     Y ojo con arreglarlo: dentro de un comentario CSS no se puede
     ESCRIBIR la marca de cierre, ni entre comillas. Cierra igual. Se
     tardo un rato en verlo la primera vez y otro rato la segunda.    */
  .gantt-scroll,.leyenda{display:none}
  .plan-movil{display:block; margin-top:14px}
  .movil-cap{display:flex; align-items:center; gap:12px;
             min-height:var(--toque);
             border:1px solid var(--borde-fuerte); border-radius:var(--r-grande);
             background:var(--fondo); padding:12px 14px; margin-bottom:8px;
             text-decoration:none}
  .movil-cap:hover{background:var(--hover)}
  .movil-cap .t{flex:1; min-width:0}
  /* Las flechas del capitulo, en columna: en un movil sobra alto y
     falta ancho, y asi el pulgar no las confunde con una sola. */
  .movil-cap .mover{margin-top:0; flex-direction:column; gap:4px}
  .movil-cap .cod{font:500 10px/1 var(--mono); letter-spacing:.05em; color:var(--tinta-2)}
  .movil-cap .nom{font:600 13.5px/18px var(--ui); color:var(--tinta); margin-top:3px}
  .movil-cap .n{font:400 10.5px/13px var(--ui); color:var(--tinta-2); margin-top:2px}
  .movil-par{display:flex; align-items:flex-start; gap:12px;
             border-bottom:1px solid var(--borde); padding:11px 14px}
  .movil-par .t{flex:1; min-width:0}

  /* Una sola accion primaria, abajo y a lo ancho, al alcance del pulgar. */
  .accion-movil{position:fixed; left:0; right:0; bottom:0; z-index:20;
                background:var(--fondo); border-top:1px solid var(--borde-fuerte);
                padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .solo-ancho{display:none}
}

@media (min-width: 761px){
  .accion-movil{display:none}
}

/* Imprimir: fuera el menu, las migas, las pestanas y los botones; la
   tinta al papel. */
@media print{
  .cima,.migas,.pestanas,.herramientas,.accion-movil,.btn{display:none !important}
  .fila-total{background:#fff; border-top:2px solid #000}
  .fila-total .total-rot,.fila-total .total-imp{color:#000}
  .armazon{display:block}
  .tabla{border-color:#999}
  body{background:#fff}
}

/* ------------------------------------------------------------------
   13 · PANEL DE GERENCIA · la pantalla 6
   ------------------------------------------------------------------
   Cuatro cifras grandes, la prevision de caja en tres tramos y una
   ficha por obra. NI UNA TABLA: la maqueta la dibuja como tabla porque
   es una maqueta de escritorio, y aqui la misma informacion tiene que
   caber en el telefono de Jose, que es donde la mira a primera hora.

   Por eso el layout es una REJILLA QUE SE PLIEGA -grid con auto-fit y
   un minimo en px-: a 1440 px salen cuatro columnas, a 900 dos y a 375
   una sola, sin media queries y sin scroll lateral. Una tabla de siete
   columnas no hace eso: o se desliza o se le quitan columnas.

   LAS BARRAS VAN EN PASOS DE 5 %, y no con un style= en el HTML,
   porque la politica de contenido del navegador -style-src 'self'-
   bloquea ese atributo sin decir una palabra: la barra se quedaria a
   cero y nadie lo notaria, porque una barra vacia parece un dato. Con
   clases el ancho lo pone la hoja de estilos, se imprime, y no depende
   de que corra ningun script. La cifra exacta va SIEMPRE escrita al
   lado: la barra es la forma, el numero es el dato.                   */

.pan-cifras{display:grid; gap:1px; margin-top:16px;
            grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
            background:var(--borde); border:1px solid var(--borde-fuerte);
            border-radius:var(--r-grande); overflow:hidden}
.pan-cifra{background:var(--fondo); padding:18px 18px 20px}
.pan-cifra .cifra-sub{margin-top:11px; line-height:16px}
.cifra-valor.grande{font-size:29px; letter-spacing:-.02em}

/* Los tres tramos de la prevision. Cada uno es una tarjeta entera y no
   una columna de una tabla: apilados en el movil siguen contando lo
   mismo, en el mismo orden.                                          */
.pan-tramos{display:grid; gap:10px; margin-top:12px;
            grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.pan-tramo{border:1px solid var(--borde-fuerte); border-radius:var(--r-grande);
           background:var(--fondo); padding:14px 15px 15px}
.pan-tramo .plazo{font:600 13px/1 var(--ui); color:var(--tinta)}
.pan-tramo .hasta{font:400 10.5px/1 var(--mono); color:var(--deshab); margin-left:8px}

/* Una linea de la tarjeta: rotulo, barra y cifra. En el movil la barra
   se encoge y el numero no, que es el orden correcto de sacrificio.   */
.pan-linea{display:flex; align-items:center; gap:9px; margin-top:10px}
.pan-linea .rot{flex:none; width:52px;
                font:500 9.5px/1 var(--mono); letter-spacing:.06em; color:var(--tinta-2)}
.pan-linea .imp{flex:none; width:96px}
.pan-barra{flex:1; min-width:24px; height:9px; border-radius:2px;
           background:var(--fondo-alt); overflow:hidden}
.pan-relleno{display:block; height:100%; background:var(--tinta-2)}
.pan-relleno.entra{background:var(--verde)}
.pan-relleno.sale{background:var(--coral)}
.pan-relleno.mide{background:var(--azul)}
  .pan-relleno.b0{width:0%} .pan-relleno.b5{width:5%} .pan-relleno.b10{width:10%} .pan-relleno.b15{width:15%} .pan-relleno.b20{width:20%} .pan-relleno.b25{width:25%}
  .pan-relleno.b30{width:30%} .pan-relleno.b35{width:35%} .pan-relleno.b40{width:40%} .pan-relleno.b45{width:45%} .pan-relleno.b50{width:50%} .pan-relleno.b55{width:55%}
  .pan-relleno.b60{width:60%} .pan-relleno.b65{width:65%} .pan-relleno.b70{width:70%} .pan-relleno.b75{width:75%} .pan-relleno.b80{width:80%} .pan-relleno.b85{width:85%}
  .pan-relleno.b90{width:90%} .pan-relleno.b95{width:95%} .pan-relleno.b100{width:100%}

.pan-neto{display:flex; align-items:baseline; justify-content:space-between;
          gap:10px; margin-top:12px; padding-top:10px;
          border-top:1px solid var(--borde)}
.pan-neto .rot{font:500 9.5px/1 var(--mono); letter-spacing:.06em; color:var(--tinta-2)}
.pan-neto .val{font:600 16px/1 var(--mono); color:var(--verde)}
.pan-neto .val.exceso{color:var(--coral)}

/* La ficha de una obra. Dos zonas: identidad arriba y cifras abajo en
   otra rejilla que se pliega. Sin min-width grande en ninguna, que es
   lo que obliga al scroll lateral.                                    */
.pan-obra{border:1px solid var(--borde-fuerte); border-radius:var(--r-grande);
          background:var(--fondo); padding:13px 15px 14px; margin-bottom:9px}
.pan-obra.tira{border-left:3px solid var(--ambar)}
.pan-obra-cab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.pan-obra-cab .cod{font:500 10.5px/1 var(--mono); letter-spacing:.05em; color:var(--tinta-2)}
.pan-obra-cab .nom{font:600 14.5px/19px var(--ui); color:var(--tinta);
                   flex:1; min-width:150px}
.pan-obra-cab a{text-decoration:none}
.pan-obra-datos{display:grid; gap:10px 14px; margin-top:11px;
                grid-template-columns:repeat(auto-fit, minmax(112px, 1fr))}
.pan-dato .cifra-rotulo{margin-bottom:4px}
.pan-dato .imp{text-align:left}
.pan-dato .imp.coral{color:var(--coral)}
.pan-dato .imp.verde{color:var(--verde)}
.pan-obra-barra{margin-top:11px}

/* El pie de la pantalla: de donde sale cada cifra. Se escribe porque a
   los tres dias nadie se acuerda de si «ejecutado» era coste o venta. */
.pan-leyenda{font:400 11.5px/1.6 var(--ui); color:var(--tinta-2); max-width:760px}
.pan-leyenda b{color:var(--tinta); font-weight:600}
.pan-leyenda .escala{font:500 9.5px/1 var(--mono); letter-spacing:.05em;
                     color:var(--deshab)}

@media (max-width: 760px){
  /* A 375 px una cifra de 29 px con siete digitos y sus puntos de miles
     se sale de la caja. Se baja, y sigue siendo la mayor de la pantalla. */
  .cifra-valor.grande{font-size:23px}
  .pan-cifra{padding:15px 14px 16px}
  .pan-linea .imp{width:82px}
  .pan-linea .rot{width:46px}
}