/* ============================================================
   SODI · sistema visual
   Concepto: el mostrador. Superficie de trabajo, no escaparate.
   Lo comparten todas las pantallas del sistema.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&display=swap');

:root{
  /* superficie: rosa empolvado, no laca oscura */
  --laca:      #fdf3f1;   /* fondo, rosa empolvado claro */
  --mostrador: #ffffff;   /* superficie de trabajo, tarjetas blancas */
  --repisa:    #f8e4e0;   /* piezas apoyadas encima */
  --filo:      #ecccc7;   /* bordes */

  /* tinta */
  --tiza:      #3d1626;   /* texto principal, vino oscuro */
  --ceniza:    #8c6167;   /* texto secundario */
  --susurro:   #8f666b;   /* texto terciario */

  /* señales */
  --laton:     #d9a635;   /* latón: acento de marca, foco */
  --orquidea:  #c9636f;   /* la flor del logo: lo que está vivo */
  --jade:      #4f8a70;   /* dinero cobrado, confirmado */
  --oxido:     #b23f38;   /* alertas, cancelar */

  --radio:     2px;
  --sombra:    0 18px 40px -18px rgba(61,22,38,.28);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  min-height:100%;
  background:var(--laca);
  color:var(--tiza);
  font-family:'Archivo', system-ui, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- tipografía ---------- */

h1,h2,h3{
  font-family:'Bricolage Grotesque', 'Archivo', sans-serif;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
}

h1{ font-size:clamp(30px, 4vw, 44px); }
h2{ font-size:24px; }
h3{ font-size:17px; font-weight:500; }

.dicho{
  color:var(--ceniza);
  font-size:14.5px;
  margin:6px 0 0;
}

/* Los números del negocio: tabulares, siempre alineados. */
.cifra{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  letter-spacing:-.01em;
}

/* ---------- controles ---------- */

label{
  display:block;
  font-size:13px;
  color:var(--ceniza);
  margin-bottom:7px;
}

input, select, textarea{
  width:100%;
  padding:12px 14px;
  background:var(--laca);
  border:1px solid var(--filo);
  border-radius:var(--radio);
  color:var(--tiza);
  font-family:'Archivo', sans-serif;
  font-size:15.5px;
  transition:border-color .15s ease, box-shadow .15s ease;
}

input::placeholder{ color:#b78d90; } /* placeholder más clarito a propósito, para que no se confunda con texto escrito */

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--laton);
  box-shadow:0 0 0 3px rgba(217,166,53,.18);
}

select{ cursor:pointer; }
select option{ background:var(--mostrador); color:var(--tiza); }

.campo{ margin-bottom:18px; }

/* ---------- botones ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  background:linear-gradient(120deg, #c69a3d 0%, #e9c975 22%, #f8efc9 42%, #e9c975 62%, #c69a3d 100%);
  background-size:260% 100%;
  animation:brillo-dorado 6.5s ease-in-out infinite;
  color:var(--tiza);
  border:1px solid #c69a3d;
  border-radius:var(--radio);
  font-family:'Archivo', sans-serif;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  transition:filter .15s ease, transform .06s ease;
}

@keyframes brillo-dorado{
  0%, 100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

.btn:hover:not(:disabled){ filter:brightness(1.12); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.btn:focus-visible{
  outline:2px solid var(--tiza);
  outline-offset:2px;
}

.btn.callado{
  background:transparent;
  color:var(--tiza);
  border-color:var(--filo);
}
.btn.callado:hover:not(:disabled){
  border-color:var(--ceniza);
  filter:none;
}

.btn.riesgo{
  background:transparent;
  color:var(--oxido);
  border-color:rgba(178,63,56,.4);
}
.btn.riesgo:hover:not(:disabled){
  background:rgba(178,63,56,.1);
  filter:none;
}

.btn.chico{ padding:7px 13px; font-size:13px; }
.btn.ancho{ width:100%; }

/* ---------- piezas sobre el mostrador ---------- */

.pieza{
  background:var(--mostrador);
  border:1px solid var(--filo);
  border-radius:var(--radio);
  padding:22px;
}

/* ---------- tablas ---------- */

table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}

th{
  text-align:left;
  font-weight:600;
  font-size:12.5px;
  color:var(--susurro);
  padding:0 14px 10px;
  border-bottom:1px solid var(--filo);
}

td{
  padding:13px 14px;
  border-bottom:1px solid rgba(61,22,38,.08);
  vertical-align:middle;
}

tbody tr:last-child td{ border-bottom:none; }

/* ---------- etiquetas de estado ---------- */

.marca{
  display:inline-block;
  padding:3px 9px;
  border-radius:var(--radio);
  font-size:12px;
  font-weight:600;
  border:1px solid;
}

.marca.viva   { color:var(--orquidea); border-color:rgba(201,99,111,.4); background:rgba(201,99,111,.08); }
.marca.hecha  { color:var(--jade);     border-color:rgba(79,138,112,.4); background:rgba(79,138,112,.08); }
.marca.quieta { color:var(--susurro);  border-color:var(--filo); }
.marca.alta   { color:var(--laton);    border-color:rgba(217,166,53,.4); background:rgba(217,166,53,.08); }

/* ---------- vacío ---------- */

.nada{
  padding:52px 24px;
  text-align:center;
  color:var(--ceniza);
  border:1px dashed var(--filo);
  border-radius:var(--radio);
}

.nada h3{ color:var(--tiza); margin-bottom:6px; }

/* ---------- aviso flotante ---------- */

.aviso{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:90;
  max-width:330px;
  padding:14px 18px;
  background:var(--repisa);
  border:1px solid var(--laton);
  border-left-width:3px;
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  font-size:14.5px;
  animation:entra .22s ease-out;
}

.aviso-error{ border-color:var(--oxido); }

@keyframes entra{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ---------- bloqueo de acceso ---------- */

.bloqueo{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:24px;
}

.bloqueo a{ color:var(--laton); }

/* ---------- accesibilidad ---------- */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}