/* Today's Coffee Taiwan — páginas en PHP (panel de Emi /admin/ y páginas de vendedores /vendedor/) con el mismo look que el
   sitio (pedido de Emi, 22/10/2026: «todas las páginas … con el estilo de nosotros con los cafés de efecto»): fondo oscuro con
   brillo terracota, letras Inter + Sora, botones terracota, tarjetas de vidrio y la lluvia de granos (js/lluvia-cafe.js).
   Mismos tonos que css/oscuro.css. Tres anchos: body (vendedor, 760), body.angosto (ingresos, 440), body.emi (panel, 1100). */
:root {
  --papel: #060708; --papel-2: #101416; --tinta: #eef3f1; --tinta-suave: #a7b2b0; --linea: #232a2d; --linea-2: rgba(255, 255, 255, .16);
  --superficie: #0d1113; --acento: #a9532c; --acento-2: #943a2a; --claro-1: #f6be82; --vidrio: rgba(255, 255, 255, .04); --vidrio-2: rgba(255, 255, 255, .08);
  --verde: #9fd4b4; --verde-fondo: rgba(80, 160, 120, .16); --rojo: #f6be82; --rojo-fondo: rgba(169, 83, 44, .24);
  --serif: Sora, Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --sans: Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--tinta); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1100px 560px at 12% -8%, rgba(169, 83, 44, .26), transparent 62%),
    radial-gradient(900px 480px at 92% -6%, rgba(246, 190, 130, .10), transparent 60%), var(--papel);
  background-repeat: no-repeat; min-height: 100vh;
}
::selection { background: rgba(169, 83, 44, .55); color: #fff; }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 72px; }
body.angosto main { max-width: 440px; padding-top: 48px; }
body.emi main { max-width: 1100px; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
:lang(zh) h1, :lang(zh) h2 { letter-spacing: 0; }
h1 { font-size: 1.8rem; margin: 0 0 6px; }
h1 small { font-size: .62em; font-weight: 600; color: var(--tinta-suave); }
h2 { font-size: 1.25rem; margin: 36px 0 12px; }
a { color: var(--claro-1); text-underline-offset: 3px; }
a:hover { color: #fff; }
small, .ayuda { color: var(--tinta-suave); }
code { font: .9em ui-monospace, monospace; color: var(--claro-1); }

/* Tarjetas de vidrio */
.caja, .numeros div {
  background: linear-gradient(180deg, var(--vidrio-2), var(--vidrio)), var(--superficie);
  border: 1px solid var(--linea); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.caja { padding: 18px; margin-top: 16px; overflow-x: auto; }
body.emi .caja { padding: 0; }
body.emi .caja[style] { padding: 14px 16px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.numeros div { padding: 14px 16px; color: var(--tinta-suave); }
.numeros strong { display: block; font: 600 1.7rem/1.2 var(--serif); color: #fff; }
.tablas-gente { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tablas-gente .caja { margin-top: 0; }

/* Formularios */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
label small { font-weight: 400; }
input, select, textarea {
  width: 100%; min-height: 46px; padding: 8px 12px; font: inherit; color: var(--tinta);
  background: var(--papel-2); border: 1.5px solid var(--linea-2); border-radius: 12px;
}
input::placeholder, textarea::placeholder { color: #7f8a89; }
textarea { min-height: 110px; }
input[name=codigo] { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.marcas label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 4px 14px 4px 0; }
input[type=checkbox] { width: auto; min-height: 0; accent-color: var(--acento); }
.mal { border-color: #e8956b; box-shadow: 0 0 0 3px rgba(232, 149, 107, .2); }
.trampa { position: absolute; left: -9999px; }

/* Botones: terracota con texto blanco; .suave = de vidrio */
button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; margin-top: 16px;
  border: 0; border-radius: 999px; font: 600 1rem var(--sans); color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(100deg, var(--acento) 0%, var(--acento-2) 100%);
  box-shadow: inset 0 1px 0 rgba(246, 190, 130, .45), 0 14px 34px -14px rgba(169, 83, 44, .75);
  transition: transform .35s cubic-bezier(.19, 1, .22, 1), filter .2s;
}
button:hover, .boton:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
button.suave, .boton.suave { background: var(--vidrio); color: var(--tinta); border: 1px solid var(--linea-2); box-shadow: none; }
body.angosto button { width: 100%; margin-top: 20px; }
/* Panel de Emi: muchos botones por fila → de vidrio y chicos; el que confirma (.si) en terracota */
body.emi form { display: inline; }
body.emi button, body.emi .boton { min-height: 38px; padding: 0 14px; margin: 4px 4px 4px 0; font-size: .92rem; background: var(--vidrio); color: var(--tinta); border: 1px solid var(--linea-2); box-shadow: none; }
body.emi button.si { background: linear-gradient(100deg, var(--acento) 0%, var(--acento-2) 100%); color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(246, 190, 130, .45); }
body.emi button.chico { min-height: 30px; padding: 0 10px; font-size: .85rem; }
body.emi input[type=number], body.emi input[type=date] { width: 90px; min-height: 36px; }
body.emi input[type=date] { width: 150px; }
body.emi input[name=nota], body.emi input[name=motivo], body.emi input[name=email] { width: 240px; min-height: 38px; }

/* Tablas del panel */
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); font-weight: 600; }
td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tablas-gente table { min-width: 0; }
.tablas-gente td:last-child { text-align: right; width: 4em; font-variant-numeric: tabular-nums; }

/* Avisos y estados */
.aviso, .ok { background: var(--verde-fondo); color: var(--verde); padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(159, 212, 180, .25); }
.error, .alarma { background: var(--rojo-fondo); color: var(--rojo); padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(240, 168, 119, .3); }
.alarma { margin: 8px 0; }
.vacio { color: var(--tinta-suave); padding: 16px; }
.estado { display: inline-block; font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--vidrio-2); color: var(--tinta-suave); }
.estado.aprobado, .estado.publicado { background: var(--verde-fondo); color: var(--verde); }
.estado.rechazado { background: var(--rojo-fondo); color: var(--rojo); }
.barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.barra select { width: auto; }
body.emi textarea { font: 13px/1.4 ui-monospace, monospace; min-height: 140px; }
details summary { cursor: pointer; }

/* QR de los 2 pasos: fondo blanco para que la cámara lo lea */
.qr { background: #fff; padding: 10px; display: inline-block; border-radius: 12px; }
.secreto { font: 14px/1.5 ui-monospace, monospace; word-break: break-all; background: var(--papel-2); padding: 8px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--claro-1); outline-offset: 2px; }

/* Lluvia de granos (js/lluvia-cafe.js), igual que en css/oscuro.css */
.llu-c { position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden; contain: strict; }
.llu { position: absolute; display: block; margin: 0; padding: 0; line-height: 0; pointer-events: none; will-change: transform, opacity; }
.llu svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .llu-c { display: none; } button:hover, .boton:hover { transform: none; } }