/* Panel de licencias: sobrio y denso, para revisar de un vistazo quién pagó. */

:root {
    --tinta: #111827;
    --tenue: #6b7280;
    --borde: #e5e7eb;
    --fondo: #f7f8fa;
    --papel: #ffffff;
    --acento: #1d4ed8;
    --ok: #15803d;
    --alerta: #b45309;
    --mal: #b91c1c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/* --- Barra superior --- */
.barra {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    height: 56px;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
}

.marca { font-weight: 700; color: var(--tinta); text-decoration: none; letter-spacing: -.01em; }
.barra nav { display: flex; gap: 1.25rem; flex: 1; }
.barra nav a { color: var(--tenue); text-decoration: none; }
.barra nav a:hover { color: var(--acento); }
.salir { margin: 0; }

.contenido { max-width: 76rem; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }

/* --- Textos --- */
h1 { font-size: 1.5rem; margin: 0 0 .35rem; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; }
.sub { color: var(--tenue); margin: 0 0 1.5rem; }

/* --- Tarjetas y tablas --- */
.tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

table { width: 100%; border-collapse: collapse; background: var(--papel); }
.envoltura-tabla { border: 1px solid var(--borde); border-radius: 10px; overflow-x: auto; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); background: #fafbfc; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }
td a { color: var(--acento); text-decoration: none; }
td a:hover { text-decoration: underline; }
.clave { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85rem; }

/* --- Etiquetas de estado --- */
.etiqueta {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.etiqueta.ok { background: #dcfce7; color: var(--ok); }
.etiqueta.alerta { background: #fef3c7; color: var(--alerta); }
.etiqueta.mal { background: #fee2e2; color: var(--mal); }
.etiqueta.gris { background: #f3f4f6; color: var(--tenue); }

/* --- Formularios --- */
label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }
.campo { margin-bottom: 1rem; }
input[type=text], input[type=password], input[type=date], input[type=number], textarea, select {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font: inherit;
    background: var(--papel);
    color: var(--tinta);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
textarea { min-height: 5rem; resize: vertical; }
.ayuda { color: var(--tenue); font-size: .85rem; margin-top: .3rem; }

button, .boton {
    display: inline-block;
    padding: .55rem 1rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--acento);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
button:hover, .boton:hover { filter: brightness(1.08); }
button.secundario, .boton.secundario { background: var(--papel); color: var(--tinta); border-color: var(--borde); }
button.peligro { background: var(--mal); }
button.enlace { background: none; color: var(--tenue); border: none; padding: 0; font-weight: 400; }
button.enlace:hover { color: var(--acento); text-decoration: underline; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* --- Avisos --- */
.aviso { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; border: 1px solid; }
.aviso.ok { background: #f0fdf4; border-color: #bbf7d0; color: var(--ok); }
.aviso.mal { background: #fef2f2; border-color: #fecaca; color: var(--mal); }

/* --- Pantalla de entrar --- */
.entrar { max-width: 22rem; margin: 12vh auto; }

/* --- Detalle en dos columnas --- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.dato { margin-bottom: .6rem; }
.dato dt { color: var(--tenue); font-size: .8rem; margin: 0; }
.dato dd { margin: 0; font-weight: 500; }
.vacio { color: var(--tenue); padding: 2.5rem; text-align: center; }