/* Panel del taller. Misma marca que la página —blanco, líneas de un pelo y la
   geométrica en versalitas— pero sin foto ni aire de más: esto se usa desde el
   celular y con prisa. */

:root{
  --tinta:#14110E; --tinta2:#5C554C; --tinta3:#918878;
  --papel:#FFFFFF; --hueso:#F7F4EF; --linea:#E4DFD6; --linea2:#CFC7B9;
  --oro:#B0872F; --oro-claro:#E8D5A8; --hilo:#B3402A; --verde:#1EA85A;
  --display:'Jost',Futura,'Trebuchet MS',sans-serif;
  --sans:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

body{margin:0;background:var(--hueso);color:var(--tinta);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--oro)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--oro);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.1;letter-spacing:.01em}

/* ═══════════════════════════════════════════════════════ botones y campos ═ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:1px solid var(--tinta);background:var(--tinta);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.btn:disabled{opacity:.45;cursor:default}
.btn--oro{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.btn--oro:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn--linea{background:none;color:var(--tinta);border-color:var(--linea2)}
.btn--linea:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn--wa{background:var(--verde);border-color:var(--verde);color:#fff}
.btn--wa:hover{background:var(--tinta);border-color:var(--tinta)}
.btn--rojo{background:none;color:var(--hilo);border-color:#E7C9C1}
.btn--rojo:hover{background:var(--hilo);border-color:var(--hilo);color:#fff}
.btn--mini{font-size:9.5px;padding:8px 13px;letter-spacing:.16em}
.btn--ancho{width:100%}

.campo{display:grid;gap:6px}
.campo label{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta3)}
.campo input,.campo textarea,.campo select{width:100%;padding:10px 12px;background:var(--papel);
  border:1px solid var(--linea2);color:var(--tinta);font-family:var(--sans);font-size:16px;outline:0;
  transition:border-color .18s}
.campo textarea{resize:vertical;min-height:70px}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--oro)}
.campo small{color:var(--tinta2);font-size:12.5px}
.pareja{display:grid;gap:12px}
@media (min-width:640px){.pareja{grid-template-columns:1fr 1fr}}

.aviso{padding:12px 15px;font-size:14px;border-left:2px solid var(--tinta3);background:var(--papel)}
.aviso--mal{border-left-color:var(--hilo);background:#FBF0EC;color:#8A2F1E}
.aviso--ojo{border-left-color:var(--oro);background:#FBF6EA}
.aviso--bien{border-left-color:var(--verde);background:#EFF9F3}

/* ══════════════════════════════════════════════════════════════════ entrar ═ */
.entrar{min-height:100vh;display:grid;place-items:center;padding:24px}
.entrar-caja{width:100%;max-width:360px;display:grid;gap:14px;padding:34px 28px;
  background:var(--papel);border:1px solid var(--linea)}
.entrar-caja img{margin:0 auto}
.entrar-caja h1{font-size:22px;font-weight:300;text-align:center;letter-spacing:.04em}
.entrar-caja p{margin:0;text-align:center;color:var(--tinta2);font-size:14px}

/* ═════════════════════════════════════════════════════════════ estructura ═ */
.barra{position:sticky;top:0;z-index:30;background:var(--tinta);color:#CFC7B7;
  border-bottom:1px solid #2A251E}
.barra-in{display:flex;align-items:center;gap:14px;max-width:1180px;margin:0 auto;
  padding:11px 18px;flex-wrap:wrap}
.barra-marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.barra-marca span{display:flex;flex-direction:column;line-height:1.1;font-family:var(--display);
  font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:#fff}
.barra-marca em{font-style:normal;font-size:8px;font-weight:700;letter-spacing:.24em;
  color:var(--oro);margin-top:5px}

.pestanas{display:flex;gap:22px;overflow-x:auto;flex:1;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestana{flex:none;padding:6px 0;background:none;border:0;border-bottom:1px solid transparent;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#8D857A;cursor:pointer;transition:.18s}
.pestana:hover{color:#fff}
.pestana.activa{color:#fff;border-bottom-color:var(--oro)}
.barra .btn--linea{color:#CFC7B7;border-color:#3A342C}
.barra .btn--linea:hover{background:#fff;border-color:#fff;color:var(--tinta)}

.lienzo{max-width:1180px;margin:0 auto;padding:24px 18px 80px;display:grid;gap:20px}
.cab-vista{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--linea)}
.cab-vista h2{font-size:26px;font-weight:300;letter-spacing:.02em}
.cab-vista p{margin:5px 0 0;color:var(--tinta2);font-size:13.5px}

/* ════════════════════════════════════════════════════════════════ pedidos ═ */
.marcadores{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea)}
@media (min-width:720px){.marcadores{grid-template-columns:repeat(5,1fr)}}
.marcador{padding:16px 14px;background:var(--papel);border:0;cursor:pointer;text-align:left;
  transition:background .18s}
.marcador:hover{background:#FBF9F5}
.marcador.activo{background:var(--tinta);color:#fff}
.marcador b{display:block;font-family:var(--display);font-size:30px;font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums}
.marcador span{display:block;margin-top:6px;font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta3)}
.marcador.activo span{color:var(--oro-claro)}

.pedidos{display:grid;gap:14px}
.pedido{display:grid;gap:12px;padding:18px;background:var(--papel);border:1px solid var(--linea);
  border-left:3px solid var(--linea2)}
.pedido[data-estado="nuevo"]{border-left-color:var(--oro)}
.pedido[data-estado="agendado"]{border-left-color:#3C6FB5}
.pedido[data-estado="taller"]{border-left-color:var(--hilo)}
.pedido[data-estado="entregado"]{border-left-color:var(--verde)}
.pedido[data-estado="cancelado"]{border-left-color:#B9B1A5}

.pedido-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pedido-ref{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--oro)}
.pedido-cuando{font-size:12px;color:var(--tinta3);margin-left:auto}
.pedido h3{font-size:19px;font-weight:400;width:100%}
.pedido-datos{display:grid;gap:4px;font-size:14px}
.pedido-datos b{color:var(--tinta3);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase}
.pedido-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.pedido-acts .campo{flex:1;min-width:150px}
.pedido-crm{font-size:12px;color:var(--verde);font-weight:700;letter-spacing:.04em}
.pedido .aviso .btn{margin-left:8px}
.etiqueta{display:inline-block;padding:3px 10px;border:1px solid var(--linea2);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2)}

/* ═══════════════════════════════════════════════ listas del catálogo ═ */
.filas{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.fila{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:12px;
  background:var(--papel)}
.fila img{width:76px;height:57px;object-fit:cover;background:var(--hueso)}
.fila-txt b{display:block;font-family:var(--display);font-size:15px;font-weight:400;line-height:1.2}
.fila-txt span{font-size:12.5px;color:var(--tinta2)}
.fila-acts{display:flex;gap:8px}
.fila.apagada{opacity:.45}
.fila > .etiqueta{justify-self:center}

.mosaico{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:620px){.mosaico{grid-template-columns:repeat(4,1fr)}}
.mosaico figure{margin:0;background:var(--papel);border:1px solid var(--linea)}
.mosaico img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--hueso)}
.mosaico figcaption{padding:10px 12px 2px}
.mosaico b{display:block;font-family:var(--display);font-size:13.5px;font-weight:400;line-height:1.2}
.mosaico span{display:block;font-size:11.5px;color:var(--tinta3);letter-spacing:.1em;
  text-transform:uppercase;margin-top:3px}
.mosaico .fila-acts{padding:10px 12px 12px}
.mosaico .apagada{opacity:.45}

/* ════════════════════════════════════════════════════════════════ ajustes ═ */
.tablero{display:grid;gap:18px}
.bloque{display:grid;gap:14px;padding:22px;background:var(--papel);border:1px solid var(--linea)}
.bloque h3{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);font-family:var(--sans);padding-bottom:12px;border-bottom:1px solid var(--linea)}
.bloque > p{margin:-6px 0 0;color:var(--tinta2);font-size:13px}

.subefoto{display:flex;gap:14px;align-items:center}
.subefoto img{width:96px;height:64px;object-fit:cover;border:1px solid var(--linea);
  background:var(--hueso)}
.subefoto input[type=file]{display:none}

.mas-fotos{display:flex;gap:8px;flex-wrap:wrap}
.mas-foto{margin:0;position:relative;width:78px;height:58px;border:1px solid var(--linea)}
.mas-foto img{width:100%;height:100%;object-fit:cover}
.mas-foto button{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--tinta);background:var(--papel);cursor:pointer;font-size:10px;line-height:1}
.mas-vacio{margin:0;color:var(--tinta3);font-size:13px}

/* ══════════════════════════════════════════════════════════ capa y brindis ═ */
.capa{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.capa-fondo{position:absolute;inset:0;background:rgba(20,17,14,.55)}
.capa-caja{position:relative;width:100%;max-width:620px;max-height:92vh;overflow-y:auto;
  background:var(--papel);padding:26px 22px 28px}
@media (min-width:620px){.capa{align-items:center}}
.capa-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;
  background:var(--papel);border:1px solid var(--linea2);cursor:pointer;font-size:13px}
.capa-caja form{display:grid;gap:14px}
.capa-caja h2{font-size:24px;font-weight:300;padding-right:44px}

.brindis{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  padding:12px 22px;background:var(--tinta);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase}
.brindis.mal{background:var(--hilo)}

.cargando{padding:44px;text-align:center;color:var(--tinta3);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase}