:root { --fondo:#f6f7f9; --tarjeta:#fff; --texto:#1b1f24; --suave:#5b6572; --borde:#d8dde3; --acento:#1f5fbf; --error:#b3261e; --ok:#1a7f43; --aviso:#8a5a00; }
@media (prefers-color-scheme: dark) {
  :root { --fondo:#12151a; --tarjeta:#1b2027; --texto:#e8ebef; --suave:#9aa5b1; --borde:#2d353f; --acento:#6aa5ff; --error:#ff8a80; --ok:#59d38a; --aviso:#f0b954; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--fondo); color:var(--texto); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.barra { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:var(--tarjeta); border-bottom:1px solid var(--borde); }
.marca { font-weight:700; color:var(--texto); text-decoration:none; }
.salir { display:flex; align-items:center; gap:12px; margin:0; }
.usuario { color:var(--suave); font-size:.9rem; overflow:hidden; text-overflow:ellipsis; }
main { max-width:760px; margin:0 auto; padding:16px; }
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:12px; padding:20px; margin:16px 0; }
.angosta { max-width:420px; margin:48px auto; }
h1 { font-size:1.4rem; margin:0 0 12px; } h2 { font-size:1.1rem; margin:20px 0 8px; }
a { color:var(--acento); }
label { display:block; margin:12px 0; font-weight:600; }
input[type=email], input[type=password], input[type=file] { display:block; width:100%; margin-top:6px; padding:10px; border:1px solid var(--borde); border-radius:8px; background:var(--fondo); color:var(--texto); font:inherit; }
.casilla { display:flex; gap:10px; align-items:flex-start; font-weight:400; }
.casilla input { margin-top:5px; }
button { padding:10px 18px; border:0; border-radius:8px; background:var(--acento); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
@media (prefers-color-scheme: dark) { button { color:#0b1220; } }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--acento); outline-offset:2px; }
.boton-link { background:none; color:var(--acento); padding:4px 8px; font-weight:400; text-decoration:underline; }
.peligro { background:none; color:var(--error); border:1px solid var(--error); }
.nota { color:var(--suave); font-size:.92rem; }
.error { color:var(--error); font-weight:600; } .aviso { color:var(--aviso); font-weight:600; }
.lista { list-style:none; padding:0; margin:0; }
.lista li { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--borde); }
.lista li > a { overflow-wrap:anywhere; flex:1 1 220px; }
.fecha { color:var(--suave); font-size:.85rem; }
.estado { font-size:.8rem; font-weight:700; padding:2px 8px; border-radius:99px; border:1px solid var(--borde); }
.e-listo { color:var(--ok); border-color:var(--ok); } .e-error { color:var(--error); border-color:var(--error); }
.e-procesando, .e-en_cola { color:var(--aviso); border-color:var(--aviso); }
.vista { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--fondo); border:1px solid var(--borde); border-radius:8px; padding:12px; max-height:360px; overflow:auto; font-size:.85rem; }
.borrar { margin-top:24px; }

/* Visor dentro de la app */
.ancha { max-width:none; }
main:has(.ancha) { max-width:1100px; }
.pestanas { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--borde); margin:16px 0 0; }
.pestanas a { padding:10px 14px; text-decoration:none; color:var(--suave); font-weight:600; border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; }
.pestanas a.activa { color:var(--texto); background:var(--fondo); border-color:var(--borde); position:relative; top:1px; }
.panel { padding:16px 0; }
.pagina { margin:0 0 20px; padding:0 0 12px; border-bottom:1px dashed var(--borde); }
.pagina h3 { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; margin:0 0 8px; font-size:1rem; }
.metodo { font-size:.75rem; font-weight:600; padding:1px 8px; border-radius:99px; border:1px solid var(--borde); color:var(--suave); }
.bloque { white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0; }
.tabla-caja { overflow-x:auto; margin:8px 0; border:1px solid var(--borde); border-radius:8px; }
table { border-collapse:collapse; width:100%; font-size:.9rem; }
th, td { padding:6px 10px; text-align:left; border-bottom:1px solid var(--borde); vertical-align:top; overflow-wrap:break-word; word-break:normal; min-width:4.5em; }
th { position:sticky; top:0; background:var(--fondo); font-weight:700; }
tr:last-child td { border-bottom:0; }
.tabla-det { margin:10px 0; }
.tabla-det summary { cursor:pointer; font-weight:600; padding:6px 0; }
.pager { display:flex; justify-content:space-between; align-items:center; margin:8px 0 14px; }
.galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.miniatura { display:flex; flex-direction:column; gap:4px; text-decoration:none; }
.miniatura img { width:100%; height:130px; object-fit:cover; border:1px solid var(--borde); border-radius:8px; background:var(--fondo); }
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:10; padding:56px 16px 16px; text-align:center; overflow:auto; }
.lightbox:target { display:block; }
.lightbox img { max-width:100%; max-height:calc(100vh - 80px); background:#fff; border-radius:8px; }
.lightbox .cerrar { position:fixed; top:12px; right:16px; background:var(--tarjeta); color:var(--texto); padding:8px 14px; border-radius:8px; text-decoration:none; font-weight:700; }
.descargas { margin-top:20px; border-top:1px solid var(--borde); padding-top:12px; }
.descargas summary { cursor:pointer; font-weight:600; }
.datos { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:0; }
.datos dt { color:var(--suave); font-weight:600; } .datos dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:520px) { .pestanas a { padding:8px 10px; font-size:.9rem; } .datos { grid-template-columns:1fr; } .datos dd { margin-bottom:8px; } }