/* Lemon v3 · Estilo común de las pantallas: el óxido de la carta, mostaza, naranja y efectos al tocar */
:root {
    --orange: #f39c1b; --mustard: #d4a106; --lemon: #f7ca18; --white: #f5f1e8; --soft: #d9cfc0; --mut: #b7aa98;
    --ink: #1a120c; --rust: #2a1a10; --ok: #5fd36f; --bad: #e8553d; --blue: #5aa9ff;
    --card: rgba(26, 18, 12, .84); --card2: rgba(255, 255, 255, .06); --line: rgba(243, 156, 27, .28);
    --r: 16px; --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--white); font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 400; background: var(--rust); -webkit-tap-highlight-color: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg, url('../img/63988.webp?v=7')) center / cover; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at top, rgba(26,18,12,.15), rgba(26,18,12,.55)); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--lemon); }
h1, h2, h3 { font-weight: 500; letter-spacing: .3px; }
.brush { font-family: 'Londrina Solid', Oswald, sans-serif; font-weight: 400; text-transform: uppercase; color: var(--orange); letter-spacing: 1px; text-shadow: 2px 3px 0 rgba(0,0,0,.35); }
.muted { color: var(--mut); }
.hide { display: none !important; }

/* Cabecera de las pantallas internas */
.lm-head { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: rgba(26,18,12,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 2px solid var(--mustard); }
.lm-head .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lm-head img { height: 34px; width: auto; display: block; }
.lm-head h1 { margin: 0; font-size: 1.15rem; color: var(--lemon); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-head .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Botones con efecto al pulsar */
.btn { --b: var(--mustard); --c: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 10px 18px; background: var(--b); color: var(--c); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-size: .92rem; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .12s cubic-bezier(.2,.9,.3,1.4), box-shadow .12s, filter .15s; user-select: none; position: relative; overflow: hidden; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active, .btn.press { transform: scale(.94); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.line { --b: transparent; --c: var(--white); border: 2px solid rgba(245,241,232,.75); box-shadow: none; padding: 8px 16px; }
.btn.dark { --b: rgba(255,255,255,.1); --c: var(--white); box-shadow: none; border: 1px solid rgba(255,255,255,.18); }
.btn.ok { --b: var(--ok); --c: #0d2412; }
.btn.bad { --b: var(--bad); --c: #fff; }
.btn.blue { --b: var(--blue); --c: #08213a; }
.btn.orange { --b: var(--orange); --c: var(--ink); }
.btn.sm { padding: 6px 12px; font-size: .8rem; }
.btn.lg { padding: 14px 22px; font-size: 1.05rem; }
.btn.block { display: flex; width: 100%; }
.btn .rip { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: lmRip .55s ease-out forwards; pointer-events: none; }
@keyframes lmRip { to { transform: scale(4); opacity: 0; } }

/* Tarjetas y paneles */
.card { background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pop { animation: lmPop .35s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes lmPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.tapfx { transition: transform .12s; } .tapfx:active { transform: scale(.97); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.grid { display: grid; gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: var(--card); border-radius: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.07); }
.kpi b { display: block; font-size: 1.45rem; line-height: 1.1; color: var(--white); }
.kpi span { color: var(--mut); font-size: .85rem; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .8rem; background: rgba(255,255,255,.1); }
.pill.ok { background: rgba(95,211,111,.2); color: #9ff0a9; } .pill.bad { background: rgba(232,85,61,.25); color: #ffb2a5; } .pill.y { background: rgba(247,202,24,.22); color: var(--lemon); }

/* Formularios */
.fld { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); color: var(--white); font-size: 1rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.fld:focus { border-color: var(--lemon); box-shadow: 0 0 0 3px rgba(247,202,24,.18); }
select.fld { appearance: auto; }
label.chk { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--soft); cursor: pointer; }
label.chk input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--mustard); flex: 0 0 auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); color: var(--soft); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: transform .12s; }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--mustard); color: var(--ink); border-color: var(--mustard); font-weight: 700; }

/* Botón "?" de ayuda */
.q { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: var(--lemon); font-weight: 700; font-size: .8rem; line-height: 1; cursor: pointer; padding: 0; vertical-align: middle; margin-left: 4px; flex: 0 0 auto; transition: transform .15s, background .15s; }
.q:hover { background: rgba(247,202,24,.15); transform: scale(1.1); }

/* Ventanas */
.lm-ov { position: fixed; inset: 0; z-index: 9900; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,6,4,.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: lmFade .2s ease both; }
@keyframes lmFade { from { opacity: 0; } }
.lm-box { width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; background: #20160f; border: 2px solid var(--mustard); border-radius: 18px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: lmPop .3s cubic-bezier(.2,.9,.3,1.3) both; }
.lm-box h3 { margin: 0 0 10px; color: var(--lemon); font-size: 1.35rem; text-transform: uppercase; }
.lm-box p { color: var(--soft); line-height: 1.35; }
.lm-box .acts { display: grid; gap: 8px; margin-top: 14px; }
.lm-box.wide { max-width: 640px; }

/* Avisos cortos */
.lm-toast { position: fixed; left: 50%; bottom: 22px; z-index: 9990; transform: translate(-50%, 30px); opacity: 0; max-width: 92vw; background: #1e140f; color: #fff; border: 2px solid var(--lemon); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow); transition: opacity .2s, transform .25s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; }
.lm-toast.on { opacity: 1; transform: translate(-50%, 0); }
.lm-toast.bad { border-color: var(--bad); } .lm-toast.ok { border-color: var(--ok); }

/* Fuegos artificiales */
.lm-fw { position: fixed; inset: 0; z-index: 9950; pointer-events: none; }
.lm-vip { position: fixed; inset: 0; z-index: 9960; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.lm-vip div { font-family: 'Londrina Solid', Oswald, sans-serif; font-size: clamp(2.4rem, 11vw, 5rem); color: var(--lemon); text-transform: uppercase; text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 40px rgba(247,202,24,.5); animation: lmVip 3s ease both; line-height: 1; padding: 0 20px; }
.lm-vip small { display: block; font-family: Oswald, sans-serif; font-size: 1.1rem; color: var(--white); text-shadow: 0 2px 6px #000; margin-top: 10px; text-transform: none; }
@keyframes lmVip { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 15% { transform: scale(1.12) rotate(2deg); opacity: 1; } 25% { transform: scale(1) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }

/* Acceso del personal */
.lm-login { max-width: 360px; margin: 9vh auto; padding: 24px; text-align: center; }
.lm-login img { width: 180px; height: auto; margin: 0 auto 8px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.lm-login .fld { margin-bottom: 10px; }
.err { color: #ffb2a5; min-height: 1.2em; margin-top: 8px; }

/* Tablas */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
th { color: var(--mut); font-weight: 400; font-size: .85rem; }
td.n, th.n { text-align: right; white-space: nowrap; }

@keyframes lmBlink { 50% { box-shadow: 0 0 0 6px rgba(247,202,24,.0), 0 0 30px rgba(247,202,24,.65); border-color: var(--lemon); } }
.blink { animation: lmBlink 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pop, .lm-box, .blink, .lm-vip div { animation: none !important; } }