/* Inter, self-hosted. @font-face con display:swap NO bloquea el primer pintado
   (a diferencia de un <link> a Google): pinta con fuente de sistema y cambia a
   Inter al llegar el .woff2 desde el propio origen. El archivo (subset latin,
   eje 300–800) cubre €, ñ y tildes. Ver config.php mr_inter_fontface() para las
   páginas standalone que no cargan este CSS. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/assets/fonts/inter-var.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

/* El hueco de la barra de scroll se reserva SIEMPRE. Sin esto, cualquier lista
   filtrable (precios, pedidos, taller, usuarios…) da un salto horizontal en cada
   tecla: al quedar pocos resultados la página deja de desbordar, desaparece la
   barra y el contenido —centrado con margin:0 auto— se desplaza y se ensancha.
   El peaje es una franja vacía de ~15px en las páginas que nunca hacen scroll. */
html { scrollbar-gutter: stable; }

body { font-family: 'Inter', sans-serif; }

/* ── Lucide SVG sizing in sidebar ─────────────────────────── */
.adm-nav-link svg,
.adm-icon-btn svg,
.adm-ham-btn svg { pointer-events: none; }

/* ── Page layout helpers for migrated admin pages ──────────── */
/* Ancho de página. Tres medidas, elegidas por el tipo de contenido — no por
   página. Antes había siete (820/860/960/980/1280/1300/1400) y el título
   saltaba de sitio al navegar.
     .adm-wrap            → tablas y dashboards, necesitan densidad
     .adm-wrap--medium    → editor o formulario con panel de preview
     .adm-wrap--narrow    → formularios de pocos campos; a más ancho los inputs
                            se estiran absurdamente (un email de 660px) */
/* width:100% es obligatorio, no decorativo: #adm-main es una columna flex (para
   anclar el footer) y en flexbox un margen auto en el eje transversal ANULA el
   stretch — sin ancho definido el wrap mediría fit-content y la página cambiaría
   de ancho según lo que hubiera dentro (p.ej. al aparecer el tag "Sin precio"). */
.adm-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 32px 24px 60px; }
.adm-wrap--medium { max-width: 980px; }
.adm-wrap--narrow { max-width: 860px; }

/* ── Page header ────────────────────────────────────────────── */
.adm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.adm-page-header h1 {
    display: flex; align-items: center; gap: 10px;
    font-size: 22px; font-weight: 700; color: var(--adm-txt);
    line-height: 1.2;
}
.adm-page-header h1 svg { width: 22px; height: 22px; color: var(--verde); flex-shrink: 0; }
.adm-page-header p { font-size: 13px; color: rgba(var(--clr-on-bg),0.4); margin-top: 3px; }
.adm-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 500; line-height: 1;
    cursor: pointer; text-decoration: none; white-space: nowrap; border: none;
    transition: transform 160ms cubic-bezier(0.23,1,0.32,1),
                background-color 120ms ease,
                box-shadow 120ms ease,
                color 120ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn--copper {
    background: var(--verde);
    color: var(--verde-txt);
}
@media (hover: hover) and (pointer: fine) {
    .btn--copper:hover { background: var(--verde-osc); }
}

.btn--ghost {
    background: rgba(var(--clr-on-bg),0.06);
    color: rgba(var(--clr-on-bg),0.65);
    border: 1px solid rgba(var(--clr-on-bg),0.12);
}
@media (hover: hover) and (pointer: fine) {
    .btn--ghost:hover { background: rgba(var(--clr-on-bg),0.10); color: rgba(var(--clr-on-bg),0.85); }
}

.btn--danger-outline {
    background: rgba(var(--error-rgb),0.08);
    color: var(--error);
    border: 1px solid rgba(var(--error-rgb),0.25);
}
@media (hover: hover) and (pointer: fine) {
    .btn--danger-outline:hover { background: rgba(var(--error-rgb),0.16); }
}

/* Destructivo sólido. Usa --danger (no --error, que está calibrado como texto y
   con blanco encima no llega a AA). */
.btn--danger {
    background: var(--danger);
    color: var(--danger-txt);
}
@media (hover: hover) and (pointer: fine) {
    .btn--danger:hover { filter: brightness(0.9); }
}

.btn--sm { padding: 6px 12px; font-size: 12px; }
.btn--sm svg { width: 13px; height: 13px; }

/* Objetivo táctil mínimo. Con ratón, .btn mide ~29px de alto y .btn--sm ~25px:
   bien para un puntero de 1px, insuficiente para un dedo (~44px, WCAG 2.5.5).
   Solo aplica en pantallas táctiles, así que el escritorio no cambia. */
@media (pointer: coarse) {
    .btn, .btn--sm { min-height: 44px; }
}

/* ── Diálogo integrado (aviso / confirmar) ───────────────────── */
/* Sustituye a alert()/confirm() nativos, que DESIGN.md prohíbe. El markup y el
   JS viven en admin-nav.php, fuera de <main>, para sobrevivir a los swaps del
   SPA y estar disponibles en todas las páginas. */
.adm-dlg-ov {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--overlay);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.adm-dlg-ov[hidden] { display: none; }
/* `.btn` es display:inline-flex, y eso gana al display:none que el atributo
   [hidden] trae de serie. Sin esta regla, aviso() —que oculta el botón de
   cancelar con btnCan.hidden = true— seguía enseñando un "Cancelar" en un
   diálogo que solo informa. Afectaba a todos los aviso() del panel. */
.btn[hidden] { display: none; }
.adm-dlg {
    background: var(--card);
    border: 1px solid var(--adm-brd);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%; max-width: 440px;
    padding: 24px;
}
.adm-dlg-title { font-size: 16px; font-weight: 700; color: var(--adm-txt); margin-bottom: 8px; }
.adm-dlg-msg   { font-size: 13.5px; color: var(--adm-txt2); line-height: 1.6; white-space: pre-line; }
.adm-dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

/* ── Toast ───────────────────────────────────────────────────── */
/* Unifica los dos que había (uno arriba, otro abajo, con radios distintos). */
.adm-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 3100;
    display: flex; align-items: center; gap: 8px;
    max-width: min(520px, calc(100vw - 40px));
    padding: 11px 18px;
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: 13.5px; font-weight: 500; line-height: 1.45;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: opacity 160ms var(--adm-ease-out), transform 160ms var(--adm-ease-out);
}
.adm-toast[hidden] { display: none; }
.adm-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.adm-toast--ok    { background: var(--ok-bg);    border-color: var(--ok);    color: var(--ok); }
.adm-toast--error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.adm-toast--warn  { background: var(--warn-bg);  border-color: var(--warn);  color: var(--warn); }
.adm-toast--info  { background: var(--info-bg);  border-color: var(--info);  color: var(--info); }

@media (prefers-reduced-motion: reduce) {
    .adm-toast { transition: none; }
    .adm-toast.is-visible { transform: translateX(-50%); }
}

/* ── Cards ───────────────────────────────────────────────────── */
.adm-card {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    border: 1px solid var(--adm-brd2);
}
.adm-card-title {
    font-size: 11px; font-weight: 600;
    color: rgba(var(--clr-on-bg),0.35);
    text-transform: uppercase; letter-spacing: 0.07em;
    margin-bottom: 14px;
}

/* ── Badges ──────────────────────────────────────────────────── */
.adm-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 500; line-height: 1.6;
    white-space: nowrap;
}
.adm-tag--ok      { background: var(--ok-bg);    color: var(--ok); }
.adm-tag--warn    { background: var(--warn-bg);  color: var(--warn); }
.adm-tag--error   { background: var(--error-bg); color: var(--error); }
.adm-tag--neutral { background: rgba(var(--clr-on-bg),0.07); color: rgba(var(--clr-on-bg),0.5); }
.adm-tag--copper  { background: var(--verde-bg); color: var(--verde-ink); }
/* Aquí había overrides [data-admin-theme="light"] para cada tag. Sobran: los
   tokens ya giran con el tema. Además traían valores propios (#15803d, #b45309)
   distintos de los del tema — dos sistemas compitiendo. */

/* ── Alerts ──────────────────────────────────────────────────── */
.adm-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-md);
    font-size: 13.5px; line-height: 1.5;
    border-left: 3px solid;
}
.adm-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.adm-alert--ok    { background: var(--ok-bg);    border-color: var(--ok);    color: var(--ok); }
.adm-alert--warn  { background: var(--warn-bg);  border-color: var(--warn);  color: var(--warn); }
.adm-alert--error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.adm-alert--info  { background: var(--info-bg);  border-color: var(--info);  color: var(--info); }
/* Mismo caso que los tags: los overrides de tema claro sobran con los tokens. */

/* ── Spinner ─────────────────────────────────────────────────── */
.adm-spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(var(--clr-on-bg),0.12);
    border-top-color: var(--verde);
    border-radius: 50%;
    animation: admSpin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes admSpin { to { transform: rotate(360deg); } }

/* ── Focus ring ──────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* Filas de tabla que actúan como botón (role="button" + tabindex). Un <tr> no
   dibuja bien un outline hacia fuera, así que aquí va por dentro. Sin esto, la
   fila recibiría el foco de forma invisible: peor que no ser enfocable. */
tr[tabindex]:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: -2px;
}

/* Contenido solo para lectores de pantalla. No usar [hidden] ni
   display:none para esto: eso lo saca del árbol de accesibilidad y deja
   de anunciarse. */
.adm-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Layout del <main>: columna flex a altura de pantalla ─────
   Igual que .main-content en portal.css: así el footer (.mr-footer, con
   margin-top:auto) se ancla abajo aunque la página sea corta, en vez de
   quedarse pegado al final del módulo a media pantalla.
   En móvil el body lleva padding-top: var(--adm-topbar-h) (ver admin-nav.php),
   así que hay que descontarlo o toda página admin gana scroll fantasma. */
#adm-main { display: flex; flex-direction: column; min-height: 100vh; }
@media (max-width: 1023px) {
    #adm-main { min-height: calc(100vh - var(--adm-topbar-h)); }
}

/* ── SPA loading transition ─────────────────────────────────── */
#adm-main { transition: opacity 160ms ease; }
/* El SPA enfoca el <main> tras cada swap (ver admin-spa.js). Es un destino de
   foco programático, no alcanzable con Tab, así que no debe dibujar anillo. */
#adm-main:focus { outline: none; }
body.adm-loading #adm-main { opacity: 0.4; pointer-events: none; transition: opacity 120ms ease; }

/* ── Forms ───────────────────────────────────────────────────── */
.adm-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.adm-form-label {
    display: block;
    font-size: 11px; font-weight: 600;
    color: rgba(var(--clr-on-bg),0.45);
    text-transform: uppercase; letter-spacing: 0.07em;
}
.adm-form-input,
.adm-form-select,
.adm-form-textarea {
    width: 100%; padding: 8px 11px;
    border-radius: var(--radius-md);
    border: 1px solid var(--adm-brd);
    background: var(--adm-s2);
    color: var(--adm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    transition: border-color 120ms ease;
    outline: none;
}
.adm-form-input:focus,
.adm-form-select:focus,
.adm-form-textarea:focus { border-color: var(--verde); }
.adm-form-textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
/* Había aquí un override de tema claro que forzaba los inputs a blanco,
   contradiciendo la regla base de este mismo archivo: el input va en --adm-s2
   (gris claro) sobre una superficie --card (blanca), que es lo que los separa. */

/* ── Tables ──────────────────────────────────────────────────── */
.adm-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--adm-brd);
    background: var(--adm-s1);
}
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th {
    padding: 10px 14px; text-align: left;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(var(--clr-on-bg),0.4);
    border-bottom: 1px solid var(--adm-brd);
    background: var(--adm-s2);
    white-space: nowrap;
}
.adm-table td { padding: 11px 14px; border-bottom: 1px solid var(--adm-brd2); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
    .adm-table tbody tr:hover { background: rgba(var(--clr-on-bg),0.03); }
}

/* ── Filter bar ──────────────────────────────────────────────── */
.adm-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-filter-label { font-size: 12px; font-weight: 600; color: rgba(var(--clr-on-bg),0.4); white-space: nowrap; }

/* ── Modal ───────────────────────────────────────────────────── */
.adm-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 700; padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 150ms ease;
}
.adm-modal-overlay.open { opacity: 1; pointer-events: auto; }
.adm-modal {
    background: var(--adm-s1);
    border-radius: var(--radius-lg);
    border: 1px solid var(--adm-brd);
    width: min(520px, 100%);
    max-height: 90vh; overflow-y: auto;
    transform: scale(0.97);
    transition: transform 200ms ease, opacity 150ms ease;
}
.adm-modal-overlay.open .adm-modal { transform: scale(1); }
.adm-modal-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--adm-brd2);
    display: flex; align-items: center; justify-content: space-between;
}
.adm-modal-title { font-size: 15px; font-weight: 700; color: var(--adm-txt); }
.adm-modal-body  { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.adm-modal-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--adm-brd2);
    display: flex; gap: 10px; justify-content: flex-end;
}
.adm-modal-close {
    background: none; border: none;
    color: rgba(var(--clr-on-bg),0.4);
    cursor: pointer; font-size: 22px; line-height: 1; padding: 2px;
    transition: color 120ms ease;
}
.adm-modal-close:hover { color: rgba(var(--clr-on-bg),0.8); }

/* ── Volver arriba (botón flotante) ──────────────────────────────
   El markup y el JS viven en admin-nav.php, fuera de <main>, para sobrevivir a
   los swaps del SPA. z-index 190: por debajo del sidebar/topbar (200) y de
   cualquier overlay, por encima del contenido.
   Oculto con visibility:hidden, no solo con opacity — así tampoco lo alcanza el
   tabulador mientras no se ve. */
.adm-top-btn {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 190;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--verde); color: var(--verde-txt);
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
    cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, background 150ms ease, bottom 180ms ease;
}
.adm-top-btn.is-visible { opacity: 1; visibility: visible; transform: none; }
.adm-top-btn svg { width: 20px; height: 20px; }
.adm-top-btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .adm-top-btn:hover { background: var(--verde-osc); }
}
@media (max-width: 1023px) {
    .adm-top-btn { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 2-col grid ──────────────────────────────────────────────── */
.adm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
@media (max-width: 768px) { .adm-grid-2 { grid-template-columns: 1fr; } }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   FOOTER GENÉRICO + CHANGELOG
   (mismo componente que en portal; aquí, tema admin copper)
   ============================================ */
.mr-footer {
    background: var(--verde);
    text-align: center;
    padding: 14px 24px;
    font-size: 11px;
    color: rgba(0,0,0,0.72);
    flex-shrink: 0;
    margin-top: auto;   /* empuja el footer al fondo de #adm-main (flex column) */
}
.mr-footer a { color: rgba(0,0,0,0.9); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .mr-footer a:hover { color: #000; } }

.mr-footer-version {
    background: none; border: none; padding: 0;
    font: inherit; color: rgba(0,0,0,0.9);
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.mr-footer-version--static { cursor: default; text-decoration: none; color: rgba(0,0,0,0.72); }
@media (hover: hover) and (pointer: fine) {
    .mr-footer-version:not(.mr-footer-version--static):hover { color: #000; }
}

.mr-changelog-backdrop {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,0.6);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}
.mr-changelog-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mr-changelog {
    background: var(--adm-s3); color: var(--adm-txt);
    border: 1px solid var(--adm-brd);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    width: 100%; max-width: 440px; max-height: 80vh;
    display: flex; flex-direction: column;
    text-align: left;
    transform: translateY(8px) scale(0.98);
    transition: transform .18s ease;
}
.mr-changelog-backdrop.is-open .mr-changelog { transform: none; }
.mr-changelog-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--adm-brd2);
}
.mr-changelog-head h2 { font-size: 15px; font-weight: 700; color: var(--adm-txt); }
.mr-changelog-x {
    background: none; border: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--gris); padding: 2px 6px;
    border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) {
    .mr-changelog-x:hover { color: var(--adm-txt); background: var(--adm-s4); }
}
.mr-changelog-body { padding: 8px 18px 18px; overflow-y: auto; }
.mr-changelog-entry { padding: 14px 0; border-bottom: 1px solid var(--adm-brd2); }
.mr-changelog-entry:last-child { border-bottom: none; }
.mr-changelog-ver { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mr-changelog-badge {
    font-size: 12px; font-weight: 700; color: var(--verde-txt);
    background: var(--verde); padding: 2px 9px; border-radius: var(--radius-full, 9999px);
}
.mr-changelog-date { font-size: 11px; color: var(--gris); }
.mr-changelog-notes { margin: 0; padding-left: 18px; }
.mr-changelog-notes li { font-size: 13px; color: var(--adm-txt2); line-height: 1.5; margin: 3px 0; }
.mr-changelog-empty { font-size: 13px; color: var(--gris); padding: 12px 0; }
body.mr-changelog-lock { overflow: hidden; }