/* ============================================================================
   LAS SIETE PIEZAS. Lienzo "Anatomia de pagina" (aprobado 2026-09-22).
   Ver public/piezas.js para el porque de cada una.

   SOLO TOKENS de cuarto-oscuro.css (mas los de tipografia y radio de styles.css).
   Ni un color, ni una sombra, ni una duracion escrita a mano: `paridad-cuarto-oscuro`
   cuenta este archivo desde el dia uno y su deuda es CERO.

   Va DESPUES de cuarto-oscuro.css en el HTML para poder ganarle a lo viejo sin !important.
   ============================================================================ */

/* ------------------------------- 1. cabecera ------------------------------- */
/* Sin raya divisoria: la separacion es aire. `phead` tenia border-bottom y eso era
   una caja, que es justo lo que Cuarto Oscuro quita. */
.pz-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e-4); margin-bottom:var(--e-5); flex-wrap:wrap; }
.pz-cab-txt{ min-width:0; }
.pz-t{ margin:0; font-family:var(--serif); font-weight:400; font-size:var(--t-saludo); letter-spacing:-.012em; line-height:1.05; }
.pz-sub{ margin:var(--e-2) 0 0; max-width:64ch; font-size:var(--t-texto); color:var(--medio); line-height:1.5; }
.pz-cab-acc{ display:flex; align-items:center; gap:var(--e-2); flex:none; }

/* Un solo boton relleno por pantalla. El secundario es texto, no una caja con borde. */
.pz-b-p{ display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 var(--e-4);
  border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t);
  font-family:inherit; font-size:var(--t-texto); font-weight:500; text-decoration:none; cursor:pointer;
  transition:opacity var(--d-toque) var(--curva-cambia); }
.pz-b-s{ display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 var(--e-3);
  border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio);
  font-family:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
.pz-b-p[disabled], .pz-b-s[disabled]{ opacity:.45; cursor:default; }
@media (hover:hover){
  .pz-b-p:hover{ opacity:.88; }
  .pz-b-s:hover{ background:var(--tinte-toque); color:var(--tinta); }
}

/* ------------------------------- 2. pestanas ------------------------------- */
/* Son enlaces (rutas), no botones con estado local: por eso `a` y no `button`. */
/* NUNCA se parten en dos renglones: se deslizan. Con el chat abierto al CRM le tocan ~420 px
   aunque la VENTANA mida 1280, asi que la regla de telefono (max-width:860px) no entraba y las
   seis pestanas del portal caian en dos filas. Es la misma trampa que ya costo en #/saber: un
   componente hereda el ancho de su COLUMNA, no el de la ventana. Y ademas una barra que reflowea
   mueve la pestana activa debajo del cursor. */
.pz-tabs{ display:flex; gap:2px; flex-wrap:nowrap; align-items:center; margin-bottom:var(--e-5);
  overflow-x:auto; scrollbar-width:none; }
.pz-tabs::-webkit-scrollbar{ display:none; }
.pz-tab{ display:inline-flex; align-items:center; min-height:34px; padding:0 var(--e-3); border:0;
  border-radius:var(--r-pildora); background:transparent; color:var(--medio);
  font-family:inherit; font-size:var(--t-texto); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--d-toque) var(--curva-cambia), color var(--d-toque) var(--curva-cambia); }
.pz-tab.on{ background:var(--tinta); color:var(--pag); }
@media (hover:hover){ .pz-tab:not(.on):hover{ background:var(--tinte-toque); color:var(--tinta); } }
/* Pegada arriba en telefono: es lo unico que los tres lienzos aprobados pedian y no existia. */
@media (max-width:860px){
  .pz-tabs{ position:sticky; top:0; z-index:var(--z-pegajoso); background:var(--pag);
    padding:var(--e-2) 0; margin-bottom:var(--e-4); }
}

/* --------------------------------- 3. fila --------------------------------- */
/* Sin cajas ni rayas (regla 2 de Cuarto Oscuro): las filas se separan por aire.
   48 px de alto minimo porque se tocan. */
.pz-filas{ display:flex; flex-direction:column; }
.pz-fila{ display:flex; align-items:center; gap:var(--e-3); width:100%; min-height:48px;
  padding:var(--e-2) var(--e-2) var(--e-2) 0; border:0; border-radius:var(--r);
  background:transparent; color:var(--texto); font-family:inherit; font-size:var(--t-texto);
  text-align:left; cursor:pointer; }
div.pz-fila{ cursor:default; }
@media (hover:hover){ .pz-fila:hover{ background:var(--tinte-toque); } }
.pz-fila-ico{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; color:var(--medio); }
.pz-fila-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pz-fila-t{ color:var(--tinta); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pz-fila-m{ font-size:var(--t-meta); color:var(--medio); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pz-fila-tag{ font-size:var(--t-meta); color:var(--medio); white-space:nowrap; flex:none; }
.pz-fila-acc{ flex:none; display:flex; align-items:center; }
/* El `···`: hereda de .co-acc-fila (aparece al pasar el cursor y al llegar con Tab). */
.pz-acc{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0;
  border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio);
  font-size:var(--t-texto); line-height:1; cursor:pointer; }
@media (hover:hover){ .pz-acc:hover{ background:var(--tinte-toque); color:var(--tinta); } }

/* -------------------------------- 4. cifra --------------------------------- */
/* Esto NO se invento: es el bloque de cifras del Inicio (`.ini-cifra` en cuarto-oscuro.css) tal como
   quedo en su lienzo aprobado, que era la mejor version que ya existia. La primera escritura de esta
   pieza se le parecia pero no era: numeros a --t-titulo en vez de --t-saludo, flex en vez de rejilla,
   y sin tabular-nums -- que el odometro necesita, porque rueda una columna por caracter y con cifras
   de ancho distinto la columna se mueve mientras gira.
   REJILLA y no flex-wrap: un tablero de 4 columnas iguales se lee de un golpe; con flex, la cifra mas
   larga se queda con el ancho y las columnas dejan de alinearse. `data-n` lo pone pzCifras(). */
.pz-cifras{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--e-5);
  margin:var(--e-3) 0 var(--e-5); }
.pz-cifras[data-n="3"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.pz-cifras[data-n="2"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.pz-cifras[data-n="1"]{ grid-template-columns:minmax(0, 1fr); }
.pz-cifra{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-1); min-width:0;
  padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; }
button.pz-cifra{ cursor:pointer; }
.pz-cifra-v{ font-size:var(--t-saludo); letter-spacing:-.02em; line-height:1.1; color:var(--tinta);
  font-variant-numeric:tabular-nums; }
.pz-cifra-v.urge{ color:var(--urge); }
.pz-cifra-e{ font-size:var(--t-meta); color:var(--apagado); }
/* El sub va MAS claro que la etiqueta, no mas apagado: ahi vive el dato que cambia ("+12% vs agosto",
   "3 vencidas"), y la etiqueta es la que solo nombra. */
.pz-cifra-s{ font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }
.pz-cifra-barra{ display:block; align-self:stretch; height:3px; margin-top:var(--e-1);
  border-radius:var(--r-pildora); background:var(--piedra-on); overflow:hidden; }
.pz-cifra-barra > span{ display:block; width:calc(var(--p) * 1%); height:100%; border-radius:inherit; background:var(--texto); }
/* Una cifra que se toca tiene que DECIR que se toca: sin esto era un numero grande que abria una
   pantalla sin ningun aviso. Solo con hover de verdad (en tactil no existe y no se finge). */
@media (hover:hover){ button.pz-cifra:hover .pz-cifra-e{ color:var(--tinta); text-decoration:underline; } }
@media (max-width:860px){
  /* En un telefono cuatro columnas dejan cada numero en 70 px: de dos en dos, y un paso mas chico. */
  .pz-cifras, .pz-cifras[data-n="3"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-4) var(--e-5); }
  .pz-cifra-v{ font-size:var(--t-titulo); }
}

/* -------------------------------- 5. vacio --------------------------------- */
.pz-vacio{ display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:var(--e-7) var(--e-4); color:var(--medio); }
.pz-vacio-img{ width:min(220px,60vw); aspect-ratio:1; background:var(--ave) center/contain no-repeat; margin-bottom:var(--e-4); }
.pz-vacio-t{ margin:0; font-size:var(--t-campo); line-height:1.5; color:var(--medio); max-width:38ch; }
.pz-vacio-acc{ margin-top:var(--e-4); }
/* Por un filtro: una linea, sin ilustracion y sin aire de pagina vacia. */
.pz-vacio-filtro{ display:block; padding:var(--e-5) 0; text-align:left; font-size:var(--t-texto); color:var(--medio); }
.pz-link{ border:0; padding:0; background:transparent; color:var(--tinta); font-family:inherit;
  font-size:inherit; cursor:pointer; border-bottom:1px solid var(--urge); }

/* --------------------------------- 6. hoja --------------------------------- */
.pz-hoja-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e-3); padding:var(--e-4) var(--e-5) var(--e-3); }
.pz-hoja-t{ font-size:var(--t-sub); line-height:1.25; color:var(--tinta); }
.pz-hoja-sub{ margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
.pz-hoja-x{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none;
  padding:0; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); cursor:pointer; }
@media (hover:hover){ .pz-hoja-x:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.pz-hoja-cuerpo{ padding:0 var(--e-5) var(--e-2); }
.pz-hoja-pie{ display:flex; justify-content:flex-end; align-items:center; gap:var(--e-2); padding:var(--e-4) var(--e-4) var(--e-5); }

/* ------------------------------ 7. menuFila -------------------------------- */
/* El menu en si es `.co-menu`, que ya vive en cuarto-oscuro.css desde 2026-09-16.
   Aqui solo el icono que puede traer un item. */
.co-menu-it > .ico + span{ min-width:0; }