/* ===========================================================================
   Las piezas que son LAS MISMAS en las dos areas. UN solo archivo.
   ===========================================================================

   Lo cargan bodega (React) y compras (plantilla de Django) desde
   /static/piezas.css, igual que tokens.css. La diferencia entre los dos:
   tokens.css dice de que COLOR y de que LETRA es la casa; este dice como son
   las piezas que las dos usan tal cual.

   POR QUE EXISTE
   La franja de areas vivia escrita DOS veces —una en base.css y otra dentro
   del <style> de la plantilla— y ya se habian separado: la copia de compras
   habia perdido `font-family:var(--display)` en `.franja a`, asi que los
   rotulos BODEGA y COMPRAS salian en una letra en bodega y en otra en
   compras. Nadie decidio eso; se cayo solo, que es como se caen siempre estas
   cosas. Con dos palabras cortas casi no se notaba, y por eso llevaba semanas
   ahi.

   La regla, entonces: una pieza que las dos pantallas usan IGUAL se escribe
   aqui. Si alguna vez una de las dos la necesita distinta, se discute; no se
   copia y se retoca.
   =========================================================================== */

/* ---------- la franja de areas ---------- */
/* Fija y estrecha, con icono y nombre, como la de Power BI. Es lo primero
   que se ve y lo ultimo que cambia: elegir area es una decision de antes de
   ponerse a trabajar, no de mientras. */
.franja{
  /* 84 y no 76 desde el 13/10/2026: UBICACIONES mide 63 px en la letra de la
     casa y no cabía. Medido con Barlow Semi Condensed 600 a 10,5 px. */
  flex:0 0 84px; display:flex; flex-direction:column; gap:2px;
  padding:10px 8px; background:var(--surface-3);
  border-right:1px solid var(--line); overflow-y:auto;
}
/* Plegada queda una tira de 30 px con la marca redonda. No desaparece del
   todo a proposito: si no quedara nada, no habria donde hacer clic para
   traerla de vuelta y habria que explicarle a alguien donde esta el truco. */
html[data-franja="oculta"] .franja{flex-basis:30px; padding-left:0; padding-right:0}

/* Tres rayas arriba. El control va primero y en el mismo sitio este la
   franja abierta o cerrada: si se moviera, habria que buscarlo. */
.franja .plegar{
  appearance:none; border:0; background:none; cursor:pointer; color:var(--ink-3);
  display:flex; align-items:center; justify-content:center;
  padding:7px 0; margin-bottom:8px; border-radius:var(--radio);
}
.franja .plegar:hover{color:var(--ink); background:rgba(255,255,255,.72)}
.franja .plegar svg{
  width:19px; height:19px; stroke:currentColor; fill:none;
  stroke-width:1.9; stroke-linecap:round;
}

.franja .lista{display:flex; flex-direction:column; gap:2px}
html[data-franja="oculta"] .franja .lista{display:none}

/* El logo, abajo del todo. Plegada se cambia por la marca redonda, que a
   20 px se sigue leyendo y el logotipo largo no. */
.franja .logo{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  margin-top:auto; padding:14px 2px 4px;
}
.franja .logo .version{
  font-family:var(--display); font-size:9.5px; font-weight:600;
  letter-spacing:.08em; color:var(--ink-3);
}
.franja .logo img{display:block; height:auto}
.franja .logo .entera{width:52px}
.franja .logo .marca{width:20px; display:none}
html[data-franja="oculta"] .franja .logo .entera{display:none}
html[data-franja="oculta"] .franja .logo .marca{display:block}

.franja a{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:11px 2px 9px; border-radius:var(--radio-grande); text-decoration:none;
  color:var(--ink-3); font-family:var(--display); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; text-align:center; line-height:1.15;
}
.franja a svg{
  width:22px; height:22px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.franja a:hover{color:var(--ink-2); background:rgba(255,255,255,.72)}
.franja a[aria-current="page"]{color:var(--acento); background:var(--surface)}
/* La barrita pegada al borde: es la que dice DONDE estas de un vistazo,
   sin tener que leer. */
.franja a[aria-current="page"]::before{
  content:""; position:absolute; left:-8px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--acento);
}


/* ---------- el texto de pista de las casillas ---------- */
/* Una pista NO es un valor, y tiene que verse que no lo es. El gris que trae
   Chrome de fabrica para los placeholder es bastante mas oscuro que --ink-3, y
   basto para que la casilla «Nombre y apellido» del formulario de usuarios
   —que llevaba un nombre de persona de ejemplo— se leyera como una cuenta ya
   escrita. Se pregunto literalmente «¿por que aparece ese nombre?».

   Se pone aqui, a todas de una vez, porque el problema no era de esa casilla:
   era que solo tres sitios sueltos se habian acordado de pintar su pista.
   Cada regla mas concreta (.celda, .nombre de la tabla) sigue mandando sobre
   esta. */
input::placeholder, textarea::placeholder{color:var(--ink-3)}

/* ---------- los botones de la esquina ---------- */
/* Usuarios y Salir. Eran dos enlaces subrayados de HTML sin vestir: lo unico
   que quedaba en pantalla con pinta de documento y no de aplicacion, y encima
   ocupaban el ancho de su texto, que es mucho para algo que se pulsa una vez
   al dia. Ahora son iconos con la misma forma, el mismo gris y el mismo
   redondeo que el boton de tres rayas de la franja: una sola manera de decir
   «esto se pulsa».

   Van con title Y aria-label. Un icono solo no se lee: el que no reconozca el
   engranaje tiene que poder dejar el raton encima y enterarse, y el que use
   lector de pantalla tiene que oir la palabra. */
.icono{
  appearance:none; border:1px solid transparent; background:none; cursor:pointer;
  width:30px; height:30px; padding:0; border-radius:var(--radio);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-3); flex:none;
}
.icono svg{
  width:17px; height:17px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.icono:hover{color:var(--ink); background:var(--surface-3); border-color:var(--line)}
/* Salir es el unico de los dos que te saca de donde estas: hay que volver a
   escribir la contrasena para deshacerlo. No es un error —por eso en reposo es
   gris como el otro— pero al pasar por encima se avisa. Es la excepcion a «el
   color es el dato»: aqui el color no describe un dato, advierte de lo que va
   a pasar si se pulsa, que es la otra cosa para la que sirve. */
.icono.fuera:hover{color:var(--grave); background:var(--grave-suave); border-color:transparent}