/* Páginas de acceso y borradores del modo servidor. Autónoma (la hoja del panel no se sirve sin sesión).
   Regla: ningún color fuera de los dos bloques de tokens. */
:root {
  color-scheme: light dark;
  --fondo: #f5f5f7;
  --superficie: #ffffff;
  --tinta: #1d1d1f;
  --tinta-secundaria: #5f5f64;
  --separador: rgba(60, 60, 67, 0.2);
  --borde-campo: #8a8a8f;
  --acento: #1b6aad;
  --acento-hover: #14578f;
  --sobre-acento: #ffffff;
  --mal-tinta: #c0102c;
  --mal-fondo: #fdecee;
  --aviso-tinta: #875400;
  --aviso-fondo: #fdf5dc;
  --ok-tinta: #1a7450;
  --ok-fondo: #e5f4ec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1c1c1e;
    --superficie: #2c2c2e;
    --tinta: #f5f5f7;
    --tinta-secundaria: #a1a1a6;
    --separador: rgba(235, 235, 245, 0.2);
    --borde-campo: #8e8e93;
    --acento: #5aa9e6;
    --acento-hover: #7dbcec;
    --sobre-acento: #0b1a28;
    --mal-tinta: #ff8a98;
    --mal-fondo: #3a1d22;
    --aviso-tinta: #f0c36b;
    --aviso-fondo: #3a2f14;
    --ok-tinta: #7fd8ae;
    --ok-fondo: #163326;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.centro { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--separador); border-radius: 14px; padding: 24px; width: 100%; max-width: 380px; }
h1 { font-size: 1.25rem; margin: 0 0 16px; }
label { display: block; font-size: 0.875rem; color: var(--tinta-secundaria); margin: 12px 0 4px; }
input[type='text'], input[type='password'] {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--tinta); background: var(--fondo);
  border: 1px solid var(--borde-campo); border-radius: 8px;
}
button {
  font: inherit; cursor: pointer; border-radius: 8px; padding: 10px 16px; border: 1px solid var(--separador);
  background: var(--superficie); color: var(--tinta); min-height: 44px;
}
button.principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
button.principal:hover:not(:disabled) { background: var(--acento-hover); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.ancho { width: 100%; margin-top: 16px; }
.mensaje { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; }
.mensaje.mal { background: var(--mal-fondo); color: var(--mal-tinta); }
.mensaje.ok { background: var(--ok-fondo); color: var(--ok-tinta); }
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.oculto { display: none; }

main { max-width: 760px; margin: 0 auto; padding: 16px; }
.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cabecera nav { display: flex; gap: 8px; flex-wrap: wrap; }
.cabecera a { color: var(--acento); }
.borrador { background: var(--superficie); border: 1px solid var(--separador); border-radius: 14px; padding: 16px; margin: 12px 0; }
.borrador h2 { font-size: 1rem; margin: 0 0 4px; }
.meta { color: var(--tinta-secundaria); font-size: 0.85rem; margin: 0 0 8px; }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.tercero { border-left: 3px solid var(--separador); padding-left: 10px; color: var(--tinta-secundaria); white-space: pre-wrap; overflow-wrap: anywhere; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.confirmar { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--aviso-fondo); color: var(--aviso-tinta); }
.confirmar input { margin: 8px 0; }
ul.urls { padding-left: 18px; overflow-wrap: anywhere; font-size: 0.9rem; }