/* Panel de la Central. Hoja propia y no la de `conta`: son orígenes distintos y la CSP de este
   (`style-src 'self'`) no deja traer nada de fuera. Es una pantalla de administración, así que
   se parece a Petunia sin intentar ser Petunia: sobria, densa y legible. */

:root {
    --tinta: #23282d;
    --tinta-suave: #6a7278;
    --linea: #dfe3e6;
    --fondo: #f4f6f7;
    --blanco: #fff;
    --acento: #6c3f8f;          /* la petunia */
    --acento-flojo: #f2ecf7;
    --rojo: #b0303a;
    --verde: #2f7a44;
    --radio: 8px;
}

* { box-sizing: border-box; }

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

/* --- Barra superior --- */
.barra {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--acento); color: #fff;
    padding: .6rem 1.2rem;
}
.barra .marca { font-weight: 700; letter-spacing: .02em; }
.barra .marca .sufijo { font-weight: 400; opacity: .75; }
.barra nav { display: flex; gap: 1rem; flex: 1; }
.barra nav a { color: #fff; text-decoration: none; opacity: .85; padding: .15rem 0;
               border-bottom: 2px solid transparent; }
.barra nav a:hover { opacity: 1; }
.barra nav a.activa { opacity: 1; border-bottom-color: #fff; }
.barra .quien { font-size: .85rem; opacity: .9; }
.barra .quien a { color: #fff; }

main { max-width: 62rem; margin: 1.5rem auto; padding: 0 1.2rem; }

h1 { font-size: 1.45rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
h3 { font-size: .98rem; margin: 1.2rem 0 .4rem; }

a { color: var(--acento); }

.ayuda { color: var(--tinta-suave); font-size: .87rem; margin: .2rem 0 .9rem; }
.migas { font-size: .85rem; color: var(--tinta-suave); margin: 0 0 .4rem; }

/* --- Avisos --- */
.error, .ok {
    padding: .6rem .8rem; border-radius: var(--radio); margin: .8rem 0; font-size: .92rem;
}
.error { background: #fdeaec; border: 1px solid #f0c2c7; color: var(--rojo); }
.ok    { background: #eaf6ee; border: 1px solid #bfe0c9; color: var(--verde); }

/* --- Tarjetas --- */
.tarjeta {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1rem 1.1rem; margin: 1rem 0;
}
.tarjeta.estrecha { max-width: 26rem; margin: 3rem auto; }
.aviso-clave { border-color: var(--acento); background: var(--acento-flojo); }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; background: var(--blanco);
        border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--linea);
         font-size: .9rem; vertical-align: top; }
th { background: #fafbfb; font-size: .78rem; text-transform: uppercase;
     letter-spacing: .04em; color: var(--tinta-suave); }
tr:last-child td { border-bottom: 0; }
tr.baja td { opacity: .55; }
td.acciones { text-align: right; white-space: nowrap; }

/* --- Formularios --- */
label { display: block; margin: .6rem 0; font-size: .88rem; }
input[type=text], input[type=email], input[type=password], select {
    display: block; width: 100%; margin-top: .2rem;
    padding: .45rem .55rem; border: 1px solid #c8ced2; border-radius: 6px;
    font: inherit; background: var(--blanco);
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

button {
    font: inherit; cursor: pointer; padding: .45rem .9rem; border-radius: 6px;
    border: 1px solid var(--acento); background: var(--acento); color: #fff;
}
button:hover { filter: brightness(1.08); }
button.sec { background: var(--blanco); color: var(--acento); }

form.en_linea { display: inline-block; margin: 0 .4rem .4rem 0; }
.botonera { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .8rem; }
.botonera .ayuda { margin: 0 .8rem 0 .2rem; }

/* --- Piezas sueltas --- */
.etiqueta {
    display: inline-block; font-size: .72rem; padding: .05rem .4rem; border-radius: 999px;
    background: var(--acento-flojo); color: var(--acento); border: 1px solid #dcc9ea;
    vertical-align: middle;
}
.etiqueta.roja { background: #fdeaec; color: var(--rojo); border-color: #f0c2c7; }

.codigos {
    background: #f7f8f9; border: 1px solid var(--linea); border-radius: var(--radio);
    padding: .8rem; font: 1.05rem/1.7 ui-monospace, Consolas, monospace;
    letter-spacing: .08em; text-align: center; margin: .6rem 0;
    white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere;
}
.mono { font-family: ui-monospace, Consolas, monospace; }
.grande { font-size: 1.2rem; letter-spacing: .3em; text-align: center; }
.estados { margin: .3rem 0; padding-left: 1.1rem; font-size: .9rem; }
.estados li { margin: .15rem 0; }

.pie {
    max-width: 62rem; margin: 2rem auto 3rem; padding: 0 1.2rem;
    color: var(--tinta-suave); font-size: .8rem;
}

.sin2fa {
    display: inline-block; background: var(--rojo); color: #fff; font-size: .7rem;
    padding: .05rem .4rem; border-radius: 999px; margin-right: .4rem; letter-spacing: .04em;
}

.qr { text-align: center; margin: .6rem 0; }
.qr canvas { max-width: 100%; height: auto; }

/* Botón que está trabajando: se ve que la copia está en marcha y no se puede volver a pulsar. */
button:disabled { opacity: .55; cursor: default; }
button.trabajando { position: relative; }
button.trabajando::after {
    content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .45em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    vertical-align: -1px; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* La política de este origen no admite atributos `style` en el HTML (`style-src 'self'`),
   así que hasta los retoques mínimos viven aquí. */
.sin-margen { margin: 0; }

/* Buscador y enlaces con aspecto de botón. */
.buscador { display: flex; gap: .6rem; align-items: flex-end; margin: .8rem 0; flex-wrap: wrap; }
.buscador label { flex: 1 1 22rem; margin: 0; }
.boton-enlace {
    display: inline-block; padding: .35rem .8rem; border: 1px solid var(--acento);
    border-radius: 6px; color: var(--acento); text-decoration: none; font-size: .85rem;
    background: var(--blanco); white-space: nowrap;
}
.boton-enlace:hover { background: var(--acento-flojo); }
input[type=search] {
    display: block; width: 100%; margin-top: .2rem; padding: .45rem .55rem;
    border: 1px solid #c8ced2; border-radius: 6px; font: inherit;
}

/* Una casilla se lee al revés que un campo: primero la marca y luego el texto, en la misma línea. */
label.casilla { display: flex; align-items: center; gap: .45rem; font-size: .92rem; }
label.casilla input { width: auto; margin: 0; }

/* Los pasos de un alta: se enseñan porque una operación de seis fases que se queda a medias
   necesita decir DÓNDE se quedó, no solo que falló. */
ol.pasos { margin: .4rem 0 .8rem 1.2rem; font-size: .9rem; line-height: 1.5; }
ol.pasos li { margin: .15rem 0; }