:root{
  --tinta:#16181d; --fondo:#f4f5f7; --panel:#fff;
  --linea:#dcdee4; --suave:#5c6273; --acento:#067660;
  --bien:#067660; --bien-f:#e3f4ee; --mal:#a8382b; --mal-f:#f9eae8;
  --aviso-f:#eef4f2;
}
@media (prefers-color-scheme:dark){
  :root{--tinta:#e7e9ef;--fondo:#0e1014;--panel:#181b21;--linea:#2c313b;
        --suave:#9aa2b3;--acento:#2fd4a3;--bien:#2fd4a3;--bien-f:#10281f;
        --mal:#e08277;--mal-f:#2a1917;--aviso-f:#1a2320;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:16px/1.6 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acento)}
main{margin:0 auto;padding:32px 20px 80px}
main.ancho{max-width:900px}
main.angosto{max-width:400px;padding-top:80px}

.barra{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo{height:25px;width:auto;display:block}
.logo.oscuro{display:none}
@media (prefers-color-scheme:dark){.logo.claro{display:none}.logo.oscuro{display:block}}
.modulo{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--acento);
  border:1px solid var(--acento);border-radius:3px;padding:2px 6px;line-height:1}
.logotipo{margin:0 0 18px}
.logotipo .logo{height:34px}
.barra nav{display:flex;gap:18px;flex:1}
.barra nav a{text-decoration:none;color:var(--suave);font-size:.93rem}
.barra nav a:hover{color:var(--tinta)}
.quien{font-size:.85rem;color:var(--suave)}

h1{font-size:1.7rem;line-height:1.2;margin:0 0 6px}
h2{font-size:1.15rem;margin:32px 0 12px}
.sub{color:var(--suave);margin:0 0 28px}

.panel{background:var(--panel);border:1px solid var(--linea);border-radius:4px;padding:20px 22px;margin-bottom:14px}
.cuenta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cuenta .nom{font-weight:600;flex:1;min-width:180px}
.cuenta .id{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;color:var(--suave)}
.chip{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:3px;background:var(--bien-f);color:var(--bien);white-space:nowrap}
.chip.mal{background:var(--mal-f);color:var(--mal)}

label{display:block;font-size:.85rem;color:var(--suave);margin:14px 0 5px}
input[type=text],input[type=email],input[type=password]{
  width:100%;padding:10px 12px;font-size:1rem;color:var(--tinta);
  background:var(--panel);border:1px solid var(--linea);border-radius:4px}
input:focus{outline:2px solid var(--acento);outline-offset:1px}
.boton{display:inline-block;margin-top:18px;padding:10px 20px;font:inherit;font-weight:600;
  color:#fff;background:var(--acento);border:0;border-radius:4px;cursor:pointer;text-decoration:none}
.boton.sec{background:transparent;color:var(--acento);border:1px solid var(--acento)}
.boton:hover{filter:brightness(1.08)}
@media (prefers-color-scheme:dark){
  .boton{color:#08130f}          /* sobre el verde claro, texto oscuro */
  .boton.sec{color:var(--acento)}
}

.aviso{padding:11px 14px;border-radius:4px;font-size:.93rem;margin:0 0 18px}
.aviso.bien{background:var(--bien-f);color:var(--bien)}
.aviso.mal{background:var(--mal-f);color:var(--mal)}
.aviso.info{background:var(--aviso-f);color:var(--tinta)}

table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--panel)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
code{font-family:ui-monospace,Menlo,monospace;font-size:.85em}
.vacio{color:var(--suave);padding:26px 0;text-align:center}

/* --- usuarios --- */
select{padding:7px 10px;font:inherit;font-size:.9rem;color:var(--tinta);
  background:var(--panel);border:1px solid var(--linea);border-radius:4px}
form.enlinea{display:inline}
.acciones{white-space:nowrap}
.acciones details{display:inline-block;vertical-align:top}
.acciones summary{cursor:pointer;color:var(--acento);font-size:.85rem;list-style:none}
.acciones summary::-webkit-details-marker{display:none}
.acciones details form{display:flex;gap:6px;align-items:center;margin-top:8px}
.acciones details input{width:180px;padding:6px 9px;font-size:.85rem}
.boton.chico{margin:0;padding:6px 12px;font-size:.82rem}
button.enlace{background:none;border:0;padding:0;margin-left:14px;font:inherit;
  font-size:.85rem;color:var(--mal);cursor:pointer;text-decoration:underline}
.chip{display:inline-block;margin-left:6px}

/* --- enlace para compartir --- */
h3{font-size:.98rem;margin:0 0 2px}
.copiar{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.copiar input{flex:1;min-width:240px;font-family:ui-monospace,Menlo,monospace;font-size:.78rem;
  padding:9px 11px;color:var(--suave)}
.copiar .boton{margin:0;white-space:nowrap}