/* Mystical App — estilo compartido. Tarot noche-azul + dorado, un solo tema oscuro. */
:root{
  --bg:#09080a; --panel:#120f14; --panel-2:#171219; --well:#0b090d;
  --line:rgba(201,162,75,.16); --line-gold:rgba(201,162,75,.32); --line-dim:rgba(236,228,211,.06);
  --gold:#c9a24b; --gold-soft:#c3a775; --gold-bright:#ead9b0; --gold-deep:#7d6228;
  --fg:#ece4d3; --muted:#a69c88; --muted-2:#8a8272;
  --ok:#74b382; --ok-bg:rgba(47,90,60,.15); --ok-ln:#30583c;
  --bad:#d4746a; --bad-bg:rgba(90,47,43,.18); --bad-ln:#5a2f2b;
  --warn:#dbb24a; --warn-bg:rgba(90,74,31,.15); --warn-ln:#5a4a1f;
  --r:14px; --maxw:520px;
  --f-display:"Cinzel",Georgia,serif; --f-ui:"Jost","Segoe UI",system-ui,sans-serif; --f-serif:"Cormorant Garamond",Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(125% 86% at 50% -4%, #19130c 0%, #0c0809 24%, #060406 58%, #010002 100%) fixed;
  color:var(--fg); font-family:var(--f-ui); line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
h1,h2,h3{text-wrap:balance;margin:0;font-family:var(--f-display);font-weight:500}
a{color:var(--gold)}
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 37% at 50% 2%, rgba(216,176,88,.20) 0%, rgba(201,162,75,0) 60%),
    radial-gradient(130% 100% at 50% 28%, rgba(0,0,0,0) 32%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.92) 100%);}
.atmos::before{content:"";position:absolute;inset:0;opacity:.4;
  background:
    radial-gradient(1.4px 1.4px at 20% 9%, rgba(234,217,176,.6),transparent),
    radial-gradient(1px 1px at 72% 6%, rgba(234,217,176,.4),transparent),
    radial-gradient(1.2px 1.2px at 86% 15%, rgba(234,217,176,.4),transparent),
    radial-gradient(1px 1px at 33% 4%, rgba(234,217,176,.35),transparent),
    radial-gradient(1px 1px at 9% 19%, rgba(234,217,176,.3),transparent);}
.wrap{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:18px 16px 96px}

/* header */
.top{display:flex;align-items:center;gap:12px;padding:6px 2px 16px;border-bottom:1px solid var(--line-dim);margin-bottom:18px}
.top .mark{font-family:var(--f-display);letter-spacing:3px;font-size:15px;color:var(--gold);flex:1;line-height:1.2}
.top .mark small{display:block;font-family:var(--f-ui);letter-spacing:4px;font-size:12px;color:var(--muted)}
.top .who{font-size:12px;color:var(--muted);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.top .who b{color:var(--fg);display:block;text-transform:uppercase;letter-spacing:1px;font-size:12px;overflow:hidden;text-overflow:ellipsis}
.btn-exit{background:none;border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:0 12px;min-height:44px;font-size:12px;cursor:pointer;letter-spacing:1px;flex:0 0 auto}
.btn-exit:hover{color:var(--fg);border-color:var(--line-gold)}

/* bloques */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:18px 16px;margin-bottom:16px}
.card h2{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px;
  font-family:var(--f-ui);font-weight:600;display:flex;align-items:center;gap:8px}
.hr{height:1px;background:var(--line-dim);margin:14px 0;border:0}

/* formularios */
label{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 6px 2px}
input,select{width:100%;background:var(--well);border:1px solid var(--line);color:var(--fg);
  border-radius:10px;padding:13px 14px;font-size:16px;font-family:var(--f-ui);outline:none;appearance:none}
input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.12)}
input::placeholder{color:var(--muted-2)}
/* el input[type=datetime-local] tiene ancho intrínseco grande: que pueda achicarse y no desborde */
input[type="datetime-local"],input[type="date"],input[type="time"]{min-width:0;max-width:100%}
/* el checkbox NO debe tomar width:100% (si no, queda como una caja negra enorme) */
input[type="checkbox"]{width:18px;height:18px;min-width:18px;padding:0;accent-color:var(--gold);cursor:pointer;appearance:auto}
.switch{cursor:pointer}
.field{margin-bottom:14px;min-width:0}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
@media(max-width:560px){.row{flex-direction:column;gap:0}}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a24b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}

/* botones */
.btn{width:100%;border:0;border-radius:11px;padding:15px;font-size:14px;letter-spacing:2px;text-transform:uppercase;
  font-family:var(--f-ui);font-weight:600;cursor:pointer;transition:filter .15s, transform .05s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold) 60%,var(--gold-deep));color:#1a1206;
  box-shadow:0 6px 18px rgba(201,162,75,.22)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--well);color:var(--fg);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--line-gold)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ok{background:linear-gradient(180deg,#8fce9d,var(--ok));color:#07130a}
.btn-bad{background:linear-gradient(180deg,#e59389,var(--bad));color:#1a0706}
.btns{display:flex;gap:10px}.btns>*{flex:1}

/* chips / estados */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:1px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line)}
.chip .d{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.chip.off .d{background:var(--muted-2);box-shadow:none}
.statusbar{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;letter-spacing:1.5px;
  padding:10px;border-radius:10px;margin-bottom:16px;text-transform:uppercase}
.statusbar.open{background:var(--ok-bg);border:1px solid var(--ok-ln);color:var(--ok)}
.statusbar.closed{background:var(--bad-bg);border:1px solid var(--bad-ln);color:var(--bad)}
.statusbar.neutral{background:var(--well);border:1px solid var(--line);color:var(--muted)}
.statusbar b{color:var(--fg)}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--well);border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center}
.stat .n{font-family:var(--f-ui);font-weight:600;font-size:34px;line-height:1;color:var(--gold-bright);font-variant-numeric:lining-nums tabular-nums}
.stat .l{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.stat.wide{grid-column:span 3;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:14px}
.stat.wide .n{font-size:26px}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(140px);z-index:50;
  background:var(--panel-2);border:1px solid var(--line-gold);color:var(--fg);padding:13px 18px;border-radius:12px;
  font-size:14px;max-width:88vw;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .28s cubic-bezier(.2,.9,.3,1);text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
body.modal-open #toast{bottom:auto;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-140px)}
body.modal-open #toast.show{transform:translateX(-50%) translateY(0)}
#toast.bad{border-color:var(--bad-ln);color:#f0b3ab}
#toast.ok{border-color:var(--ok-ln);color:#a9e0b6}

/* foco accesible */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn:active{filter:brightness(.92)}
.toast-act{background:none;border:0;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:1px;
  font-size:13px;cursor:pointer;padding:4px 10px;min-height:44px}

/* util */
.muted{color:var(--muted)}.gold{color:var(--gold)}.center{text-align:center}
.small{font-size:12px}.mono{font-variant-numeric:tabular-nums}
.spin{width:18px;height:18px;border:2px solid rgba(201,162,75,.25);border-top-color:var(--gold);border-radius:50%;
  display:inline-block;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.hidden{display:none!important}