/* ==========================================================================
   /public/assets/css/admin.css
   Estilos del panel. Bootstrap 5 hace el trabajo pesado; aquí solo va la
   estructura propia (barra lateral, tarjetas de métricas, gráfico) y los
   ajustes de marca.
   ========================================================================== */

:root {
    --admin-sidebar-width: 250px;
    --admin-sidebar-bg: #111827;
    --admin-sidebar-fg: #d1d5db;
    --admin-sidebar-active: #0b5fff;
    --admin-bg: #f5f6f8;
    --admin-border: #e5e7eb;
    --admin-radius: 12px;
}

body.admin-body,
body.auth-body {
    background: var(--admin-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

/* --- Acceso -------------------------------------------------------------- */

.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-content: center;
    padding: 24px 16px;
    width: 100%;
}

.auth-card {
    width: min(400px, 100%);
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 32px 28px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-weight: 700;
    color: var(--admin-sidebar-active);
    margin-bottom: 24px;
}

.auth-brand i { font-size: 1.5rem; }
.auth-title { font-size: 1.35rem; margin-bottom: 4px; text-align: center; }
.auth-subtitle { color: #6b7280; font-size: .9rem; text-align: center; margin-bottom: 24px; }
.auth-footer { text-align: center; color: #9ca3af; font-size: .8rem; margin-top: 20px; }

/* --- Estructura del panel ------------------------------------------------ */

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--admin-sidebar-width);
    background: var(--admin-sidebar-bg);
    color: var(--admin-sidebar-fg);
    flex-direction: column;
    overflow-y: auto;
    z-index: 1030;
}

.admin-offcanvas {
    background: var(--admin-sidebar-bg);
    color: var(--admin-sidebar-fg);
    width: var(--admin-sidebar-width);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 18px;
    font-weight: 700;
    color: #fff;
    font-size: 1.05rem;
}

.admin-brand i { color: var(--admin-sidebar-active); font-size: 1.3rem; }

.admin-nav { flex: 1; padding: 8px 0; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; }

.admin-nav a,
.admin-nav .nav-pending {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    color: var(--admin-sidebar-fg);
    text-decoration: none;
    font-size: .93rem;
    border-left: 3px solid transparent;
}

.admin-nav a:hover { background: rgb(255 255 255 / 6%); color: #fff; }

.admin-nav a.active {
    background: rgb(11 95 255 / 15%);
    border-left-color: var(--admin-sidebar-active);
    color: #fff;
    font-weight: 600;
}

.admin-nav .nav-pending { opacity: .38; cursor: default; }
.admin-nav i { width: 18px; text-align: center; }

.admin-sidebar-footer { padding: 14px 18px; border-top: 1px solid rgb(255 255 255 / 8%); }

.admin-user { display: flex; align-items: center; gap: 10px; }
.admin-user i { font-size: 1.6rem; color: var(--admin-sidebar-active); }
.admin-user strong { display: block; color: #fff; font-size: .85rem; }
.admin-user small { display: block; color: #9ca3af; font-size: .75rem; word-break: break-all; }

.admin-main { min-height: 100vh; display: flex; flex-direction: column; }

@media (min-width: 992px) {
    .admin-main { margin-left: var(--admin-sidebar-width); }
}

.admin-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-bottom: 1px solid var(--admin-border);
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.admin-burger { font-size: 1.4rem; padding: 0 8px; color: #374151; }
.admin-title { font-size: 1.15rem; font-weight: 600; margin: 0; }
.admin-content { flex: 1; padding: 20px; }
.admin-footer { padding: 16px 20px; color: #9ca3af; font-size: .8rem; }

/* --- Tarjetas de datos --------------------------------------------------- */

.stat-card,
.metric-card,
.panel {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
}

.stat-card { display: flex; align-items: center; gap: 14px; padding: 18px; height: 100%; }
.stat-icon { font-size: 1.8rem; line-height: 1; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: #6b7280; font-size: .82rem; }

.metric-card { padding: 14px; text-align: center; height: 100%; }
.metric-card i { color: #9ca3af; font-size: 1.1rem; }
.metric-value { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.metric-label { color: #6b7280; font-size: .75rem; }

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--admin-border);
}

.panel-header h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.panel-body { padding: 18px; }

/* --- Gráfico ------------------------------------------------------------- */

.chart { width: 100%; height: 180px; color: var(--admin-sidebar-active); display: block; }
.chart-bar { opacity: .85; transition: opacity .15s ease; }
.chart-bar:hover { opacity: 1; }

.chart-axis {
    display: flex;
    justify-content: space-between;
    color: #9ca3af;
    font-size: .75rem;
    margin-top: 6px;
}

/* --- Listas -------------------------------------------------------------- */

.top-list { list-style: none; counter-reset: pos; margin: 0; padding: 0; }

.top-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--admin-border);
}

.top-list li:last-child { border-bottom: 0; }
.top-list li::before {
    counter-increment: pos;
    content: counter(pos);
    color: #9ca3af;
    font-size: .8rem;
    width: 18px;
}
.top-list strong { display: block; font-size: .9rem; }
.top-list small { color: #6b7280; font-size: .78rem; }
.top-list li > div { flex: 1; min-width: 0; }

/* --- Accesibilidad ------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--admin-sidebar-active); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --- Listados del CRUD --------------------------------------------------- */

.avatar {
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
    flex-shrink: 0;
}

.avatar-placeholder {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: .8rem;
    font-weight: 600;
    color: #6b7280;
}

.avatar-lg { width: 128px; height: 128px; }
.avatar-lg.avatar-placeholder { font-size: 2rem; }

.color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgb(0 0 0 / 10%);
    flex-shrink: 0;
}

/* El logotipo conserva su proporción original, así que la vista previa se
   limita por caja en vez de forzar un cuadrado que lo deformaría.
   El fondo a cuadros deja ver si tiene transparencia, que es justo lo que
   interesa comprobar antes de publicarlo. */
.company-logo-preview {
    max-width: 100%;
    max-height: 96px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eef0f3 25%, transparent 25%, transparent 75%, #eef0f3 75%),
        linear-gradient(45deg, #eef0f3 25%, transparent 25%, transparent 75%, #eef0f3 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border: 1px solid var(--admin-border);
    padding: 8px;
}

.table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    font-weight: 600;
}

details summary { cursor: pointer; }

.qr-box {
    text-align: center;
    padding: 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: #fff;
}

.qr-box img { display: block; margin: 0 auto; }

/* --- Vista previa de la firma de correo ---------------------------------- */

.signature-preview {
    background: #fff;
    border: 1px dashed var(--admin-border);
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
}

kbd {
    background: #374151;
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .8em;
}

/* --- Desplegables dentro de tablas ---------------------------------------
   .table-responsive necesita overflow para poder desplazarse en móvil, y eso
   recorta los menús que se abren dentro. Los botones llevan
   data-bs-strategy="fixed", que los ancla al viewport; esto solo asegura que
   queden por encima del resto y que la tabla no gane una barra de scroll
   vertical al abrirlos.
   -------------------------------------------------------------------------- */

/* Contenedor de las tablas que llevan menús de acciones.
   NO lleva overflow, y esa es toda la gracia: cualquier overflow recorta los
   desplegables que se abran dentro. Como la clase no define recorte alguno, el
   menú se ve entero aunque el navegador esté sirviendo una versión antigua de
   esta hoja de estilos. */
.table-wrap { overflow: visible; }

/* Y si por lo que sea la tabla no cupiera, que desborde la página en lugar de
   recortarse a sí misma. */
.table-wrap > .table { min-width: 100%; }

.dropdown-menu {
    z-index: 1056;
    /* Un menú largo nunca debe salirse de la pantalla sin poder alcanzarse. */
    max-height: min(70vh, 460px);
    overflow-y: auto;
}

.table .dropdown-menu {
    box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
    border-color: var(--admin-border);
}

.table .dropdown-item small { white-space: normal; }

/* --- Vista previa de los diseños de tarjeta ------------------------------ */

.design-frame {
    position: relative;
    height: 260px;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* La tarjeta se pinta a tamaño real y se reduce: así la previsualización es
   fiel de verdad, y no una maqueta que puede acabar mintiendo. */
.design-frame iframe {
    width: 420px;
    height: 740px;
    border: 0;
    transform: scale(.62);
    transform-origin: top center;
    position: absolute;
    left: 50%;
    margin-left: -210px;
    pointer-events: none;
}