/* Portal del servidor — mismo lenguaje visual que el panel: papel cálido, tinta, filetes gruesos y etiquetas en monoespaciada.
   Sin recursos externos y sin estilos en línea (la política de seguridad no los admite). */
:root {
  --papel: #f2eee4; --papel-2: #e7e1d2; --filete: #d3cbb9; --tinta: #1d1c18; --tinta-2: #4d483e; --apagado: #625c51;
  --ok: #2f7a2b; --aviso: #a96500; --fallo: #b02a1c;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", "Noto Sans", "DejaVu Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #171612; --papel-2: #211f1a; --filete: #37342c; --tinta: #eee9dc; --tinta-2: #c2bbaa; --apagado: #9a9383;
    --ok: #62b85c; --aviso: #e3a43a; --fallo: #f0705e; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.55 var(--sans); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
h1, h2, p { margin: 0; }
h1 { font: 650 28px/1.15 var(--sans); letter-spacing: -.02em; margin-bottom: 14px; }
h2 { font: 600 12.5px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; }
.etq { font: 500 11.5px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--apagado); margin-bottom: 6px; }
.suave { color: var(--apagado); }
.peq { font-size: 13px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.rompe { overflow-wrap: anywhere; }
.mt-m { margin-top: 14px; } .mt-l { margin-top: 22px; }

.regla-sup { height: 14px; background: linear-gradient(var(--tinta), var(--tinta)) top / 100% 6px no-repeat, repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 10px) bottom / 100% 8px no-repeat; }
.cab { max-width: 1100px; margin: 0 auto; padding: 18px 24px 0; }
.cab-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; border-bottom: 2px solid var(--tinta); padding-bottom: 14px; }
.marca { font: 650 22px/1 var(--sans); letter-spacing: -.02em; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font: 600 12.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--tinta); }
.nav form { margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 32px 24px 56px; }

.caja { border-top: 2px solid var(--tinta); padding: 16px 0 24px; margin-bottom: 28px; }
.caja.estrecha { max-width: 460px; }
.centro { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.login { width: 100%; max-width: 400px; }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.alinea-fin { align-items: end; }

.campo { margin-bottom: 16px; }
.campo label { display: block; font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); margin-bottom: 6px; }
input[type=text], input[type=password], input[type=email], select {
  width: 100%; font: 15px var(--sans); color: var(--tinta); background: transparent; border: 1.5px solid var(--tinta); border-radius: 0; padding: 10px 12px;
}
select { width: auto; }
.ayuda { font-size: 12.5px; color: var(--apagado); margin-top: 5px; }
.btn { display: inline-block; font: 600 12px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--papel); background: var(--tinta); border: 1.5px solid var(--tinta); padding: 11px 16px; }
.btn.sec { color: var(--tinta); background: transparent; }
.btn.peq { padding: 7px 10px; font-size: 11px; }
.btn.peligro { background: var(--fallo); border-color: var(--fallo); color: var(--papel); }
.btn:hover { opacity: .88; }
.fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.aviso-caja { border: 1.5px solid var(--tinta); padding: 11px 16px; margin: 0 0 22px; max-width: 640px; }
.aviso-caja.error { border-color: var(--fallo); }
.aviso-caja.ok { border-color: var(--ok); }
.aviso-caja.info { border-color: var(--aviso); }
.pill { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px 3px; border: 1.5px solid var(--tinta); }
.pill.ok { border-color: var(--ok); color: var(--ok); } .pill.aviso { border-color: var(--aviso); color: var(--aviso); } .pill.neutro { border-color: var(--filete); color: var(--apagado); }

.tabla-caja { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); text-align: left; padding: 0 14px 8px 0; border-bottom: 1px solid var(--tinta); white-space: nowrap; }
td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.vacio { text-align: left; color: var(--apagado); }

.qr { display: block; margin: 12px 0; background: #fff; padding: 6px; }
.texto-clave { overflow-wrap: anywhere; user-select: all; }
.secreto { border: 1.5px solid var(--aviso); padding: 14px 16px; margin-bottom: 18px; }
.secreto .clave { font: 600 18px var(--mono); margin: 10px 0 12px; overflow-wrap: anywhere; user-select: all; }

@media (max-width: 760px) {
  .dos { grid-template-columns: minmax(0, 1fr); }
  .cab, main { padding-left: 16px; padding-right: 16px; }
}