:root { color-scheme: light; }

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    color: #1e293b;
    background: #f8fafc;
}

/* Ambar sobre pizarra, como el producto: es el mismo sistema visto por atras. */
.barra {
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem 1.25rem;
    background: #0f172a; color: #fff;
}

.barra .marca { color: #fff; font-weight: 700; text-decoration: none; }
.barra .marca span { color: #f59e0b; }
.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.barra .quien { color: #94a3b8; font-size: .9rem; }

main { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }

.tarjeta {
    background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1.5rem;
}

.entrar { max-width: 22rem; margin: 4rem auto; }

label { display: block; margin-bottom: 1rem; }
label span { display: block; margin-bottom: .25rem; font-size: .9rem; color: #475569; }

input[type=email], input[type=password], input[type=text] {
    width: 100%; padding: .6rem .75rem;
    border: 1px solid #cbd5e1; border-radius: .5rem; font-size: 1rem;
}

input:focus { outline: none; border-color: #0f172a; }

button.principal {
    width: 100%; padding: .7rem; border: 0; border-radius: .5rem;
    background: #f59e0b; color: #0f172a; font-size: 1rem; font-weight: 600; cursor: pointer;
}

button.enlace {
    border: 0; background: none; color: #cbd5e1; cursor: pointer;
    font-size: .9rem; padding: 0;
}

.error {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    border-radius: .5rem; padding: .75rem; margin-bottom: 1rem; font-size: .9rem;
}

.nota { color: #64748b; font-size: .9rem; }

/* ---- Listado y ficha ---- */

.titulo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.titulo h1 { margin: 0; }
.cuenta { color: #94a3b8; font-weight: 400; font-size: 1rem; }
.buscar { margin-left: auto; display: flex; gap: .5rem; }
.buscar input { width: 16rem; padding: .45rem .6rem; }

button.chico {
    padding: .45rem .9rem; border: 1px solid #cbd5e1; border-radius: .5rem;
    background: #fff; cursor: pointer;
}

h2 { font-size: 1.05rem; margin: 1.75rem 0 .6rem; }

.tarjeta.sin-relleno { padding: 0; overflow: hidden; }

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
thead { background: #f8fafc; }
th { text-align: left; font-weight: 600; color: #475569; padding: .6rem .9rem; }
td { padding: .6rem .9rem; border-top: 1px solid #f1f5f9; }
td.der, th.der { text-align: right; }
td a { color: #0f172a; font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
.tenue { color: #64748b; }

tr.apagada td:first-child { color: #94a3b8; }

.etiqueta {
    display: inline-block; margin-left: .4rem; padding: .1rem .45rem;
    background: #fef3c7; color: #92400e; border-radius: .3rem;
    font-size: .72rem; font-weight: 600; vertical-align: middle;
}

/* Verde: entró esta semana. Rojo: hace más de un mes que no entra nadie. */
.reciente { color: #047857; font-weight: 600; }
.lejano   { color: #b91c1c; }
.nunca    { color: #94a3b8; font-style: italic; }

a.orden { color: #475569; text-decoration: none; }
a.orden:hover { text-decoration: underline; }
a.orden.activo { color: #0f172a; font-weight: 700; }
a.orden.activo::after { content: " ↓"; }

a.volver { color: #64748b; text-decoration: none; font-size: .9rem; }

.cifras { display: flex; flex-wrap: wrap; gap: 2rem; }
.cifras div { font-size: 1.05rem; font-weight: 600; }
.cifras span { display: block; font-size: .8rem; color: #64748b; font-weight: 400; margin-bottom: .15rem; }

/* ---- Acciones ---- */

.aviso {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .92rem;
}

/* La contrasena temporal se muestra una vez y hay que poder copiarla sin errores. */
.tarjeta.secreto { border-color: #f59e0b; background: #fffbeb; margin-bottom: 1rem; }
.titulo-secreto { margin: 0 0 .5rem; font-size: .9rem; color: #92400e; font-weight: 600; }
.clave {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.6rem; font-weight: 700; letter-spacing: .04em;
    color: #0f172a; margin: 0 0 .75rem; user-select: all;
}

.acciones { display: flex; flex-direction: column; gap: 1rem; }
.acciones form { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.acciones .nota { margin: 0; }

button.peligro, button.secundario {
    padding: .55rem 1rem; border-radius: .5rem; cursor: pointer; font-weight: 600;
    border: 1px solid #cbd5e1; background: #fff; color: #0f172a;
}
button.peligro { border-color: #fca5a5; color: #b91c1c; }
.acciones button.principal { width: auto; padding: .55rem 1rem; }

.boton-enlace {
    padding: .5rem .9rem; border-radius: .5rem; background: #0f172a; color: #fff;
    text-decoration: none; font-size: .9rem; font-weight: 600; margin-left: auto;
}

.suplantar label { margin-bottom: .75rem; }
.suplantar button.principal { width: auto; padding: .55rem 1rem; }

button.enlace-oscuro {
    border: 0; background: none; color: #b91c1c; cursor: pointer;
    font-size: .85rem; font-weight: 600; padding: 0;
}