/* ═══════════════════════════════════════════════════════════════════════
   El panel de LTW — «Galería Blanca» de la web, en versión herramienta

   Mismos colores y letras que lucianotorreswatches.com (blanco, tinta,
   Prata en títulos, Montserrat en el texto), pero pensado para usar con una
   mano en el celular: botones grandes, una columna, la barra abajo.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{ font-family:'Prata'; font-style:normal; font-weight:400; font-display:swap; src:url(/fuentes/prata.woff2) format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fuentes/montserrat.woff2) format('woff2'); }

:root{
  --fondo:#FFFFFF; --superficie:#F4F3F0; --superficie-2:#ECEAE5;
  --tinta:#111111; --humo:#3D3D3D; --humo-bajo:#6B6B6B; --filete:#E4E2DD;
  --rojo:#C8102E; --verde:#1E7F4F; --ambar:#9A6200;
  --display:'Prata', Georgia, serif; --texto:'Montserrat', 'Helvetica Neue', sans-serif;
  --radio:2px; --margen:16px; --barra:64px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--fondo); color:var(--tinta); font:15px/1.5 var(--texto); padding-bottom:calc(var(--barra) + 24px); }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:-.006em; margin:0; }
h1{ font-size:26px; line-height:1.2; }
h2{ font-size:19px; margin:28px 0 10px; }
h3{ font-size:16px; }
.envoltorio{ max-width:880px; margin:0 auto; padding:16px var(--margen); }
.cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:8px; }
.cabeza small{ color:var(--humo-bajo); font-size:12px; }
.rotulo{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--humo-bajo); }
.vacio{ color:var(--humo-bajo); padding:12px 0; }
.aviso{ background:var(--superficie); border-left:3px solid var(--tinta); padding:10px 12px; margin:12px 0; border-radius:0; }
.aviso[data-tipo="error"]{ border-color:var(--rojo); }
.aviso[data-tipo="ok"]{ border-color:var(--verde); }
.oculto{ display:none !important; }

/* ── La barra de abajo ── */
.barra{ position:fixed; left:0; right:0; bottom:0; height:var(--barra); background:var(--fondo); border-top:1px solid var(--filete);
        display:flex; justify-content:space-around; align-items:stretch; z-index:10; padding-bottom:env(safe-area-inset-bottom); }
.barra a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none;
          font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--humo-bajo); gap:2px; }
.barra a[aria-current="page"]{ color:var(--tinta); font-weight:600; }
.barra a::before{ content:''; width:22px; height:2px; background:transparent; margin-bottom:6px; }
.barra a[aria-current="page"]::before{ background:var(--tinta); }

/* ── Tarjetas y listas ── */
.tarjeta{ border:1px solid var(--filete); border-radius:var(--radio); padding:14px; margin:10px 0; background:var(--fondo); }
.tarjeta h3 a{ text-decoration:none; }
.tarjeta .meta{ color:var(--humo-bajo); font-size:13px; margin-top:2px; }
.tarjeta .texto{ white-space:pre-wrap; background:var(--superficie); padding:10px 12px; margin:10px 0; font-size:14px; }
.tarjeta[data-estado="enviado"], .tarjeta[data-estado="descartado"]{ opacity:.55; }
.fila{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lista{ list-style:none; margin:0; padding:0; }
.lista > li{ border-bottom:1px solid var(--filete); padding:12px 0; }
.lista > li a{ text-decoration:none; }
.lista .nombre{ font-weight:600; }
.lista .detalle{ color:var(--humo-bajo); font-size:13px; }

/* ── Chapitas ── */
.chapa{ display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px;
        border:1px solid var(--filete); border-radius:var(--radio); color:var(--humo); background:var(--fondo); white-space:nowrap; }
.chapa[data-t="caliente"]{ border-color:var(--rojo); color:var(--rojo); }
.chapa[data-t="tibio"]{ border-color:var(--ambar); color:var(--ambar); }
.chapa[data-e="vendido"]{ border-color:var(--verde); color:var(--verde); }
.chapa[data-e="perdido"]{ text-decoration:line-through; }
.chapa.grupo{ background:var(--tinta); color:#fff; border-color:var(--tinta); }

/* ── Botones y campos ── */
.boton, button{ font:600 13px/1 var(--texto); letter-spacing:.04em; padding:12px 14px; min-height:44px; border-radius:var(--radio);
                border:1px solid var(--tinta); background:var(--fondo); color:var(--tinta); cursor:pointer; text-decoration:none;
                display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.boton.principal, button.principal{ background:var(--tinta); color:#fff; }
.boton.suave, button.suave{ border-color:var(--filete); color:var(--humo); }
button[disabled]{ opacity:.5; cursor:default; }
label{ display:block; font-size:12px; color:var(--humo); margin:10px 0 4px; }
input, select, textarea{ width:100%; font:15px var(--texto); padding:11px 12px; border:1px solid var(--filete); border-radius:var(--radio);
                         background:var(--superficie); color:var(--tinta); min-height:44px; }
textarea{ min-height:80px; resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--tinta); outline-offset:0; background:var(--fondo); }
.campos{ display:grid; grid-template-columns:1fr; gap:0 12px; }
@media (min-width:640px){ .campos{ grid-template-columns:1fr 1fr; } .campos .ancho{ grid-column:1 / -1; } }
.buscador{ display:flex; gap:8px; margin:12px 0; }
.buscador input{ flex:1; }
form.tarjeta button[type="submit"]{ margin-top:14px; }

/* ── La conversación ── */
.chat{ display:flex; flex-direction:column; gap:6px; margin:10px 0; max-height:60vh; overflow:auto; padding:8px; background:var(--superficie); }
.burbuja{ max-width:85%; padding:8px 10px; border-radius:8px; font-size:14px; white-space:pre-wrap; word-wrap:break-word; }
.burbuja[data-d="entra"]{ align-self:flex-start; background:var(--fondo); border:1px solid var(--filete); }
.burbuja[data-d="sale"]{ align-self:flex-end; background:var(--tinta); color:#fff; }
.burbuja time{ display:block; font-size:10px; opacity:.6; margin-top:3px; }

/* ── Números del día ── */
.numeros{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:12px 0; }
@media (min-width:640px){ .numeros{ grid-template-columns:repeat(4, 1fr); } }
.numero{ background:var(--superficie); padding:12px; }
.numero b{ display:block; font-family:var(--display); font-weight:400; font-size:26px; line-height:1.1; }
.numero span{ font-size:12px; color:var(--humo-bajo); }

/* ── Barras del tablero (el ancho lo pone tablero.js por CSSOM, que la CSP permite) ── */
.fila-barra{ display:grid; grid-template-columns:70px 1fr 36px; gap:10px; align-items:center; padding:4px 0; }
.fila-barra .rotulo{ font-size:11px; }
.fila-barra b{ text-align:right; font-weight:600; }
.barra-fondo{ background:var(--superficie); height:10px; display:block; }
.barra-llena{ background:var(--tinta); height:10px; display:block; width:0; }

details{ border-bottom:1px solid var(--filete); }
details > summary{ list-style:none; cursor:pointer; padding:12px 0; display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
details > summary::-webkit-details-marker{ display:none; }
details > summary .cuenta{ font-family:var(--display); font-size:20px; }
details > summary .detalle{ display:block; color:var(--humo-bajo); font-size:13px; font-weight:400; }
details[open] > summary{ font-weight:600; }

/* ── Entrar (sin barra de abajo) ── */
body.sin-barra{ padding-bottom:24px; }
.entrar{ max-width:420px; padding-top:12vh; }
.entrar h1{ font-size:34px; }
.entrar form button[type="submit"]{ width:100%; margin-top:16px; }
.cabeza small a{ text-decoration:none; border-bottom:1px solid var(--filete); }