/* Panel MDESIGN. Comparte la tipografia y el acento del sitio, pero
   con una piel sobria: esto es una herramienta de trabajo, no una
   pagina de venta. */

@font-face { font-family:"Outfit"; src:url("../fonts/outfit-600-latin.woff2") format("woff2");
             font-weight:600; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("../fonts/manrope-400-latin.woff2") format("woff2");
             font-weight:400; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("../fonts/manrope-600-latin.woff2") format("woff2");
             font-weight:600; font-display:swap; }

:root {
  --tinta:#101820; --suave:#5b6773; --linea:#dfe4e8;
  --fondo:#f4f6f8; --papel:#ffffff; --acento:#c2410c;
  --mal:#b42318; --bien:#15803d;
  --r:14px;
}
@media (prefers-color-scheme: dark) {
  :root { --tinta:#e9eef2; --suave:#9aa6b1; --linea:#2a343d;
          --fondo:#0e1519; --papel:#161f26; }
}

* { box-sizing:border-box; }
body { margin:0; background:var(--fondo); color:var(--tinta);
       font-family:"Manrope", system-ui, sans-serif; font-size:16px; line-height:1.55; }
h1,h2,h3 { font-family:"Outfit", system-ui, sans-serif; font-weight:600; line-height:1.2; margin:0 0 .5rem; }
h1 { font-size:1.6rem; } h2 { font-size:1.2rem; } h3 { font-size:1.1rem; }
a { color:var(--acento); }

/* ---------- pantallas centradas (entrar, codigo) ---------- */
body.centrado { display:grid; place-items:center; min-height:100dvh; padding:1.5rem; }
.caja { width:100%; max-width:380px; background:var(--papel); border:1px solid var(--linea);
        border-radius:var(--r); padding:2rem; }
.sub { color:var(--suave); font-size:.92rem; margin:0 0 1.25rem; }
.pie { color:var(--suave); font-size:.82rem; margin:1.25rem 0 0; }

/* ---------- formularios ---------- */
label { display:block; font-weight:600; font-size:.88rem; margin:.9rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=file], select {
  width:100%; padding:.65rem .8rem; font:inherit; color:inherit;
  background:var(--fondo); border:1px solid var(--linea); border-radius:10px;
}
input:focus-visible, select:focus-visible, button:focus-visible, .fila:focus-visible {
  outline:2px solid var(--acento); outline-offset:2px;
}
.otp { font-size:1.6rem; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums; }
small { display:block; color:var(--suave); font-size:.8rem; margin-top:.3rem; }

button { font:inherit; font-weight:600; cursor:pointer; border:0; border-radius:999px;
         background:var(--acento); color:#fff; padding:.7rem 1.3rem; margin-top:1.1rem; }
button:hover { filter:brightness(1.08); }
.enlace { background:none; color:var(--acento); padding:0; margin:0; text-decoration:underline; font-weight:400; }
.chico { padding:.4rem .9rem; font-size:.85rem; margin:0; }
.borrar { background:var(--mal); }
.oculto { display:none; }
.secundario { margin-top:.6rem; }

/* ---------- avisos ---------- */
.msg { padding:.7rem .9rem; border-radius:10px; font-size:.9rem; margin:0 0 1rem; }
.msg--mal  { background:color-mix(in srgb, var(--mal) 12%, transparent);  color:var(--mal);  }
.msg--bien { background:color-mix(in srgb, var(--bien) 12%, transparent); color:var(--bien); }

/* ---------- panel ---------- */
.barra { background:var(--papel); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:5; }
.barra__in { max-width:920px; margin:0 auto; padding:.9rem 1.25rem;
             display:flex; align-items:center; gap:1rem; }
.quien { color:var(--suave); font-size:.85rem; margin-left:auto; }
.salir { margin:0; }
.salir button { margin:0; }

.ancho { max-width:920px; margin:0 auto; padding:1.5rem 1.25rem 4rem; }
.tarjeta { background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
           padding:1.5rem; margin-bottom:1.5rem; }
.tarjeta__cab { display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem; margin-bottom:1rem; }
.cuenta { background:var(--fondo); border:1px solid var(--linea); border-radius:999px;
          padding:.1rem .6rem; font-size:.85rem; color:var(--suave); font-family:"Manrope",sans-serif; }
.ayuda { color:var(--suave); font-size:.85rem; margin:0; }
.vacio { color:var(--suave); }
.campo { margin-bottom:.4rem; }

/* ---------- lista de fotos ---------- */
.lista { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.fila { display:flex; align-items:center; gap:1rem; padding:.6rem;
        background:var(--fondo); border:1px solid var(--linea); border-radius:12px;
        cursor:grab; }
.fila.tomada { opacity:.4; }
.fila img { width:120px; height:90px; object-fit:cover; border-radius:8px; flex:none; background:var(--linea); }
.fila__txt { min-width:0; flex:1; display:grid; gap:.15rem; }
.fila__txt small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.tag { justify-self:start; font-size:.75rem; color:var(--acento);
       border:1px solid currentColor; border-radius:999px; padding:0 .5rem; }
.fila__bot { flex:none; }
#bOrden { position:sticky; bottom:1rem; }

/* ---------- modal ---------- */
.modal { position:fixed; inset:0; z-index:20; background:rgb(0 0 0 / .55);
         display:grid; place-items:center; padding:1.25rem; }
.modal[hidden] { display:none; }
.modal__caja { background:var(--papel); border-radius:var(--r); padding:1.75rem;
               width:100%; max-width:460px; max-height:90dvh; overflow:auto; }
.modal__pie { display:flex; align-items:center; gap:1rem; }
.peligro { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--linea); }

@media (max-width:560px) {
  .fila { flex-wrap:wrap; }
  .fila img { width:100%; height:150px; }
  .quien { width:100%; margin-left:0; order:3; }
}

/* casilla de "recordar este equipo" */
.check { display:flex; align-items:flex-start; gap:.6rem; margin:1rem 0 0;
         font-weight:400; font-size:.88rem; color:var(--suave); cursor:pointer; }
.check input { width:18px; height:18px; margin:.15rem 0 0; accent-color:var(--acento); flex:none; }
.equipos { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--linea); }
.equipos li { font-size:.85rem; color:var(--suave); }

/* pestanas del panel */
.tabs { display:flex; gap:.25rem; }
.tabs a { text-decoration:none; color:var(--suave); font-size:.9rem; font-weight:600;
          padding:.35rem .8rem; border-radius:999px; }
.tabs a:hover { background:var(--fondo); color:var(--tinta); }
.tabs a.on { background:var(--fondo); color:var(--acento); }
small.mal { color:var(--mal); font-weight:600; }
input[aria-invalid="true"] { border-color:var(--mal); }
@media (max-width:560px){ .tabs { order:4; width:100%; } }