/* ================================================================
   AUDIT360 — Hoja de Estilos Global
   Versión: 1.0.0 | PHP 8.2 + Bootstrap 5
   ================================================================ */

/* ── Fuente Poppins local (sin depender de Google Fonts) ── */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-300-normal.woff2') format('woff2'),
         url('../fonts/poppins/poppins-latin-300-normal.woff')  format('woff');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2'),
         url('../fonts/poppins/poppins-latin-400-normal.woff')  format('woff');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-500-normal.woff2') format('woff2'),
         url('../fonts/poppins/poppins-latin-500-normal.woff')  format('woff');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-600-normal.woff2') format('woff2'),
         url('../fonts/poppins/poppins-latin-600-normal.woff')  format('woff');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2'),
         url('../fonts/poppins/poppins-latin-700-normal.woff')  format('woff');
}

/* ================================================================
   VARIABLES GLOBALES — Paleta Verde Audit360
   ================================================================ */
:root {
    /* Verdes principales */
    --a360-dark:       #1B5E20;
    --a360-main:       #2E7D32;
    --a360-mid:        #388E3C;
    --a360-light:      #4CAF50;
    --a360-soft:       #A5D6A7;
    --a360-pale:       #E8F5E9;
    --a360-accent:     #66BB6A;
    --a360-hover:      #C8E6C9;

    /* Gradiente principal */
    --a360-gradient:   linear-gradient(135deg, var(--a360-main) 0%, var(--a360-light) 100%);
    --a360-gradient-v: linear-gradient(180deg, var(--a360-dark) 0%, var(--a360-main) 50%, var(--a360-mid) 100%);

    /* Sombras */
    --a360-shadow-sm:  0 2px 8px  rgba(46, 125, 50, .10);
    --a360-shadow:     0 4px 16px rgba(46, 125, 50, .15);
    --a360-shadow-lg:  0 8px 32px rgba(46, 125, 50, .20);
    --a360-shadow-xl:  0 20px 60px rgba(46, 125, 50, .18);

    /* Texto */
    --a360-text:       #1a2e1a;
    --a360-text-soft:  #4a5568;
    --a360-muted:      #6b7280;
    --a360-border:     #e0e7e0;

    /* Layout */
    --a360-sidebar-w:  270px;
    --a360-sidebar-mini: 68px;
    --a360-topbar-h:   64px;
    --a360-radius:     14px;
    --a360-radius-sm:  10px;
    --a360-radius-lg:  20px;
    --a360-body-bg:    #f4f7f4;

    /* Estado */
    --a360-success:    #22c55e;
    --a360-warning:    #f59e0b;
    --a360-danger:     #ef4444;
    --a360-info:       #3b82f6;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .9375rem;
    color: var(--a360-text);
    background: var(--a360-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--a360-mid); transition: color .2s; }
a:hover { color: var(--a360-dark); }

/* ================================================================
   LAYOUT PRINCIPAL (páginas internas)
   ================================================================ */
#a360-wrapper { display: flex; min-height: 100vh; }

#a360-content {
    flex: 1;
    margin-left: var(--a360-sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .28s ease;
}
#a360-content.sidebar-collapsed { margin-left: var(--a360-sidebar-mini); }

#a360-main {
    flex: 1;
    padding: 24px;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
#a360-sidebar {
    background: var(--a360-gradient-v);
    width: var(--a360-sidebar-w);
    min-height: 100vh;
    position: fixed;
    top: 0; left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: width .28s ease, transform .28s ease;
    box-shadow: 3px 0 16px rgba(0,0,0,.18);
    overflow: hidden;
}
#a360-sidebar.collapsed      { width: var(--a360-sidebar-mini); }
#a360-sidebar.mobile-open    { transform: translateX(0) !important; }

/* Overlay móvil */
#a360-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1039;
}
#a360-overlay.visible { display: block; }

/* Brand */
.a360-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: var(--a360-topbar-h);
    border-bottom: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    overflow: hidden;
    flex-shrink: 0;
}
.a360-brand-logo {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.a360-brand-logo img { width: 28px; height: 28px; object-fit: contain; }
.a360-brand-logo i   { font-size: 1.25rem; color: rgba(255,255,255,.9); }
.a360-brand-text     { overflow: hidden; white-space: nowrap; transition: opacity .2s, width .28s; }
.a360-brand-name     { display: block; font-size: 1.15rem; font-weight: 700; color: #fff; letter-spacing: .3px; line-height: 1.2; }
.a360-brand-sub      { display: block; font-size: .67rem; color: rgba(255,255,255,.6); }
#a360-sidebar.collapsed .a360-brand-text { opacity: 0; width: 0; }

/* Info usuario */
.a360-sidebar-user {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    overflow: hidden; flex-shrink: 0;
}
.a360-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--a360-accent), var(--a360-soft));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem; color: var(--a360-dark);
    flex-shrink: 0; border: 2px solid rgba(255,255,255,.25);
    text-transform: uppercase;
}
.a360-user-name  { display: block; font-size: .82rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a360-user-role  { display: block; font-size: .7rem; color: rgba(255,255,255,.6); }
#a360-sidebar.collapsed .a360-sidebar-user .a360-user-name,
#a360-sidebar.collapsed .a360-sidebar-user .a360-user-role { display: none; }

/* Navegación */
.a360-nav {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
.a360-nav::-webkit-scrollbar       { width: 3px; }
.a360-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

.a360-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-size: .875rem; font-weight: 500;
    white-space: nowrap; overflow: hidden;
    transition: background .18s, color .18s;
}
.a360-nav-link:hover  { background: rgba(255,255,255,.12); color: #fff; }
.a360-nav-link.active { background: rgba(255,255,255,.2);  color: #fff; }
.a360-nav-link i:first-child { font-size: 1.05rem; flex-shrink: 0; width: 20px; text-align: center; }
.a360-nav-text   { transition: opacity .2s; }
.a360-nav-arrow  { margin-left: auto; font-size: .75rem; transition: transform .25s; }
.a360-nav-link[aria-expanded="true"] .a360-nav-arrow { transform: rotate(180deg); }

#a360-sidebar.collapsed .a360-nav-text,
#a360-sidebar.collapsed .a360-nav-arrow { display: none; }
#a360-sidebar.collapsed .a360-nav-link  { justify-content: center; padding: 11px 0; }

/* Submenú */
.a360-submenu { background: rgba(0,0,0,.15); }
.a360-submenu-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 18px 8px 46px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: .82rem; font-weight: 400;
    white-space: nowrap; overflow: hidden;
    transition: background .18s, color .18s;
}
.a360-submenu-item:hover  { background: rgba(255,255,255,.1); color: #fff; }
.a360-submenu-item.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 500; }
.a360-submenu-item i { font-size: .85rem; width: 16px; text-align: center; flex-shrink: 0; }
#a360-sidebar.collapsed .a360-submenu,
#a360-sidebar.collapsed .collapsing { display: none !important; }

.a360-nav-divider { border-top: 1px solid rgba(255,255,255,.1); margin: 4px 14px; }

/* Footer sidebar */
.a360-sidebar-footer { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.1); flex-shrink: 0; }
.a360-sidebar-footer a {
    display: flex; align-items: center; gap: 9px;
    color: rgba(255,255,255,.62); text-decoration: none;
    font-size: .82rem; padding: 8px 10px; border-radius: 8px;
    transition: background .18s, color .18s;
}
.a360-sidebar-footer a:hover { background: rgba(255,255,255,.1); color: #fff; }
#a360-sidebar.collapsed .a360-sidebar-footer a span { display: none; }
#a360-sidebar.collapsed .a360-sidebar-footer a       { justify-content: center; }

/* ================================================================
   TOPBAR
   ================================================================ */
#a360-topbar {
    background: #fff;
    height: var(--a360-topbar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    position: sticky; top: 0; z-index: 1030;
}
.a360-topbar-left  { display: flex; align-items: center; gap: 14px; }
.a360-topbar-right { display: flex; align-items: center; gap: 10px; }

#a360-toggle-btn {
    background: none; border: none;
    color: var(--a360-main); font-size: 1.4rem;
    cursor: pointer; padding: 6px; border-radius: 8px;
    display: flex; transition: background .2s;
}
#a360-toggle-btn:hover { background: var(--a360-pale); }

.a360-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--a360-muted);
}
.a360-breadcrumb .bc-active { color: var(--a360-main); font-weight: 600; }
.a360-breadcrumb .bc-sep    { color: #d1d5db; }

.a360-clock { font-size: .8rem; color: var(--a360-muted); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.a360-clock i { color: var(--a360-mid); }

.a360-topbar-btn {
    width: 38px; height: 38px; border-radius: 10px; border: none;
    background: var(--a360-pale); color: var(--a360-main);
    font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s, transform .15s; position: relative;
    text-decoration: none;
}
.a360-topbar-btn:hover { background: var(--a360-hover); transform: translateY(-1px); color: var(--a360-dark); }

.a360-badge-notif {
    position: absolute; top: -3px; right: -3px;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--a360-danger); color: #fff;
    font-size: .62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid #fff;
}

.a360-topbar-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--a360-gradient); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .83rem;
    cursor: pointer; border: 2px solid var(--a360-soft);
    text-transform: uppercase;
}

/* ================================================================
   CARDS
   ================================================================ */
.a360-card {
    background: #fff;
    border-radius: var(--a360-radius);
    box-shadow: var(--a360-shadow-sm);
    overflow: hidden;
}
.a360-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f4f0;
}
.a360-card-title {
    font-size: .92rem; font-weight: 600; color: var(--a360-dark);
    margin: 0; display: flex; align-items: center; gap: 8px;
}
.a360-card-title i { color: var(--a360-mid); }
.a360-card-body  { padding: 20px; }

/* ── KPI Cards ── */
.a360-kpi {
    background: #fff; border-radius: var(--a360-radius);
    padding: 18px 20px; box-shadow: var(--a360-shadow-sm);
    display: flex; align-items: center; gap: 14px;
    transition: transform .2s, box-shadow .2s;
    border-left: 4px solid transparent;
}
.a360-kpi:hover { transform: translateY(-3px); box-shadow: var(--a360-shadow); }
.a360-kpi-icon  {
    width: 50px; height: 50px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; flex-shrink: 0;
}
.a360-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--a360-dark); line-height: 1; }
.a360-kpi-label { font-size: .76rem; color: var(--a360-muted); margin-top: 3px; }
.a360-kpi-trend { font-size: .74rem; font-weight: 500; display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.a360-kpi-trend.up   { color: var(--a360-success); }
.a360-kpi-trend.down { color: var(--a360-danger);  }
.a360-kpi-trend.flat { color: var(--a360-muted);   }

/* Color variants */
.a360-kpi-green  { border-color: var(--a360-main); }
.a360-kpi-green  .a360-kpi-icon { background: var(--a360-pale);  color: var(--a360-main); }
.a360-kpi-blue   { border-color: var(--a360-info);  }
.a360-kpi-blue   .a360-kpi-icon { background: #eff6ff; color: var(--a360-info); }
.a360-kpi-amber  { border-color: var(--a360-warning); }
.a360-kpi-amber  .a360-kpi-icon { background: #fffbeb; color: #d97706; }
.a360-kpi-red    { border-color: var(--a360-danger);  }
.a360-kpi-red    .a360-kpi-icon { background: #fef2f2; color: #dc2626; }
.a360-kpi-purple { border-color: #8b5cf6; }
.a360-kpi-purple .a360-kpi-icon { background: #f5f3ff; color: #7c3aed; }

/* ================================================================
   BOTONES AUDIT360
   ================================================================ */
.btn-a360 {
    background: var(--a360-gradient);
    color: #fff; border: none;
    border-radius: var(--a360-radius-sm);
    padding: 9px 20px;
    font-size: .875rem; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 12px rgba(46,125,50,.25);
    transition: transform .18s, box-shadow .18s, opacity .18s;
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer;
}
.btn-a360:hover  { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(46,125,50,.35); }
.btn-a360:active { transform: translateY(0); }
.btn-a360:disabled { opacity: .6; transform: none; cursor: not-allowed; }
.btn-a360.btn-sm { padding: 6px 14px; font-size: .8rem; }
.btn-a360.btn-lg { padding: 13px 28px; font-size: 1rem; }

.btn-a360-outline {
    border: 2px solid var(--a360-mid); color: var(--a360-mid);
    background: transparent; border-radius: var(--a360-radius-sm);
    padding: 7px 18px; font-size: .875rem; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    transition: background .18s, color .18s;
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer;
}
.btn-a360-outline:hover  { background: var(--a360-pale); color: var(--a360-dark); border-color: var(--a360-main); }
.btn-a360-outline.btn-sm { padding: 5px 12px; font-size: .8rem; }

.btn-a360-danger {
    background: linear-gradient(135deg, #c62828, #ef5350);
    color: #fff; border: none; border-radius: var(--a360-radius-sm);
    padding: 8px 18px; font-size: .875rem; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 12px rgba(220,53,69,.25);
    transition: transform .18s, opacity .18s;
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer;
}
.btn-a360-danger:hover { color: #fff; transform: translateY(-1px); opacity: .92; }

/* ================================================================
   FORMULARIOS
   ================================================================ */
.a360-form-label {
    font-weight: 500; font-size: .875rem;
    color: var(--a360-text); margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.a360-form-label i { color: var(--a360-mid); }

.a360-form-control {
    border: 2px solid var(--a360-border);
    border-radius: var(--a360-radius-sm);
    padding: 10px 14px;
    font-size: .9rem; font-family: 'Poppins', sans-serif;
    background: #f8fdf8; width: 100%;
    transition: border-color .25s, box-shadow .25s, background .25s;
    color: var(--a360-text);
}
.a360-form-control:focus {
    border-color: var(--a360-mid);
    box-shadow: 0 0 0 3px rgba(56,142,60,.14);
    background: #fff; outline: none;
}
.a360-form-control.is-invalid   { border-color: var(--a360-danger); }
.a360-form-control.is-valid     { border-color: var(--a360-success); }
.a360-form-control:disabled     { background: #f0f4f0; opacity: .7; }
.a360-form-control::placeholder { color: #aab8aa; }

/* Reutilizar Bootstrap pero sobreescribir colores */
.form-control:focus  {
    border-color: var(--a360-mid) !important;
    box-shadow: 0 0 0 3px rgba(56,142,60,.14) !important;
}
.form-select:focus {
    border-color: var(--a360-mid) !important;
    box-shadow: 0 0 0 3px rgba(56,142,60,.14) !important;
}
.form-check-input:checked {
    background-color: var(--a360-mid) !important;
    border-color: var(--a360-mid) !important;
}

/* ================================================================
   ALERTAS / MENSAJES
   ================================================================ */
.a360-alert {
    border: none; border-radius: var(--a360-radius-sm);
    padding: 12px 16px; font-size: .875rem;
    display: flex; align-items: flex-start; gap: 10px;
}
.a360-alert i { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.a360-alert-success { background: rgba(46,125,50,.08);  color: var(--a360-main); border-left: 4px solid var(--a360-main); }
.a360-alert-danger  { background: rgba(220,53,69,.08);  color: #c62828;          border-left: 4px solid #c62828; }
.a360-alert-warning { background: rgba(245,158,11,.08); color: #92400e;          border-left: 4px solid #f59e0b; }
.a360-alert-info    { background: rgba(59,130,246,.08); color: #1e40af;          border-left: 4px solid #3b82f6; }

/* ================================================================
   BADGES DE ESTADO
   ================================================================ */
.a360-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: .73rem; font-weight: 600; letter-spacing: .3px;
}
.a360-badge-success { background: rgba(34,197,94,.12);  color: #15803d; }
.a360-badge-warning { background: rgba(245,158,11,.12); color: #92400e; }
.a360-badge-danger  { background: rgba(239,68,68,.12);  color: #b91c1c; }
.a360-badge-info    { background: rgba(59,130,246,.12); color: #1d4ed8; }
.a360-badge-muted   { background: rgba(107,114,128,.1); color: #4b5563; }
.a360-badge-green   { background: var(--a360-pale);     color: var(--a360-dark); }

/* ================================================================
   TABLAS / DATATABLES
   ================================================================ */
.a360-table-wrap { border-radius: var(--a360-radius); overflow: hidden; }

table.dataTable thead th,
table.dataTable thead td {
    background: var(--a360-pale) !important;
    color: var(--a360-dark) !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    border-bottom: 2px solid var(--a360-soft) !important;
    padding: 12px 14px !important;
}
table.dataTable tbody tr:hover td { background: #f0faf0 !important; }
table.dataTable tbody td { font-size: .875rem; padding: 10px 14px !important; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 2px solid var(--a360-border) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: .83rem !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--a360-mid) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(56,142,60,.12) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: .82rem !important; }
.dataTables_wrapper .page-link { color: var(--a360-main) !important; }
.dataTables_wrapper .page-item.active .page-link {
    background: var(--a360-main) !important;
    border-color: var(--a360-main) !important;
}

/* ================================================================
   PÁGINA DE TÍTULO (page-header)
   ================================================================ */
.a360-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px; flex-wrap: wrap; gap: 10px;
}
.a360-page-title {
    font-size: 1.25rem; font-weight: 600; color: var(--a360-dark);
    margin: 0; display: flex; align-items: center; gap: 10px;
}
.a360-page-title .a360-title-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--a360-pale); color: var(--a360-main);
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}

/* ================================================================
   LOADER DE PÁGINA
   ================================================================ */
#a360-page-loader {
    display: none; text-align: center; padding: 60px 20px; color: var(--a360-mid);
}
.a360-loader-ring {
    width: 46px; height: 46px;
    border: 4px solid var(--a360-pale);
    border-top-color: var(--a360-main);
    border-radius: 50%;
    animation: a360Spin .75s linear infinite;
    margin: 0 auto 14px;
}
@keyframes a360Spin { to { transform: rotate(360deg); } }

/* ================================================================
   TOOLTIPS PERSONALIZADOS
   ================================================================ */
.a360-tooltip {
    position: relative; cursor: help;
}
.a360-tooltip::after {
    content: attr(data-tip);
    position: absolute; bottom: 130%; left: 50%;
    transform: translateX(-50%);
    background: var(--a360-dark); color: #fff;
    font-size: .75rem; padding: 5px 10px; border-radius: 7px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .2s;
}
.a360-tooltip:hover::after { opacity: 1; }

/* ================================================================
   FOOTER INTERNO
   ================================================================ */
#a360-footer {
    background: #fff; border-top: 1px solid #e8f0e8;
    padding: 11px 24px; font-size: .76rem; color: #9ca3af;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 6px;
}
#a360-footer a { color: var(--a360-mid); text-decoration: none; }
#a360-footer a:hover { text-decoration: underline; }

/* ================================================================
   PÁGINAS DE AUTENTICACIÓN (login, recuperar, restablecer)
   ================================================================ */
.a360-auth-body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--a360-pale) 0%, #f0faf0 50%, var(--a360-pale) 100%);
    min-height: 100vh;
    display: flex; flex-direction: column;
    overflow-x: hidden;
}

.a360-auth-card {
    background: #fff;
    border-radius: 26px;
    box-shadow: var(--a360-shadow-xl), 0 4px 16px rgba(0,0,0,.06);
    overflow: hidden;
    max-width: 1020px; width: 100%;
    animation: a360SlideUp .55s ease-out both;
}
@keyframes a360SlideUp {
    from { opacity:0; transform:translateY(32px); }
    to   { opacity:1; transform:translateY(0); }
}

.a360-auth-panel {
    background: var(--a360-gradient-v);
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    min-height: 580px;
}
.a360-auth-panel::before {
    content: '';
    position: absolute;
    width: 340px; height: 340px; border-radius: 50%;
    background: rgba(255,255,255,.07);
    top: -100px; left: -100px;
}
.a360-auth-panel::after {
    content: '';
    position: absolute;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,.05);
    bottom: -60px; right: -60px;
}
.a360-auth-panel-inner {
    position: relative; z-index: 2;
    text-align: center; padding: 40px 32px; color: #fff;
}
.a360-auth-logo-box {
    width: 156px; height: 156px; border-radius: 22px;
    background: rgba(255,255,255,.14);
    border: 2px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 22px;
    backdrop-filter: blur(8px);
}
.a360-auth-logo-box img { max-width: 128px; max-height: 128px; object-fit: contain; }
.a360-auth-logo-box i   { font-size: 3.4rem; opacity: .75; }
.a360-auth-panel-title  { font-size: 1.9rem; font-weight: 700; letter-spacing: .3px; margin-bottom: 8px; }
.a360-auth-divider      { width: 48px; height: 3px; background: rgba(255,255,255,.55); border-radius: 10px; margin: 12px auto; }
.a360-auth-panel-sub    { font-size: .97rem; opacity: .88; line-height: 1.5; }

.a360-auth-form-section { padding: 52px 46px; }

/* ── Bubbles animadas fondo ── */
.a360-bubbles { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.a360-bubble {
    position: absolute; bottom: -120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(76,175,80,.1), rgba(165,214,167,.03));
    animation: a360Rise 18s infinite ease-in;
}
.a360-bubble:nth-child(1) { width:90px; height:90px; left:8%;  animation-delay:0s;  animation-duration:16s; }
.a360-bubble:nth-child(2) { width:140px;height:140px;left:22%; animation-delay:3s;  animation-duration:20s; }
.a360-bubble:nth-child(3) { width:65px; height:65px; left:38%; animation-delay:6s;  animation-duration:14s; }
.a360-bubble:nth-child(4) { width:110px;height:110px;left:55%; animation-delay:1s;  animation-duration:22s; }
.a360-bubble:nth-child(5) { width:75px; height:75px; left:72%; animation-delay:4s;  animation-duration:17s; }
.a360-bubble:nth-child(6) { width:50px; height:50px; left:88%; animation-delay:8s;  animation-duration:13s; }
@keyframes a360Rise { to { bottom:110vh; transform:translateX(70px) rotate(12deg); } }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991.98px) {
    #a360-sidebar {
        transform: translateX(-100%);
        width: var(--a360-sidebar-w) !important;
    }
    #a360-sidebar.mobile-open { transform: translateX(0); }
    #a360-content { margin-left: 0 !important; }
    #a360-topbar  { padding: 0 16px; }
    #a360-main    { padding: 16px; }
}
@media (max-width: 767.98px) {
    .a360-auth-panel     { min-height: 200px; }
    .a360-auth-form-section { padding: 34px 24px; }
}
@media (max-width: 575.98px) {
    .a360-kpi-value { font-size: 1.3rem; }
    .a360-clock     { display: none !important; }
    #a360-main      { padding: 12px; }
}

/* ================================================================
   SISTEMA DE TEMAS POR MÓDULO
   Uso: añadir data-theme="green|blue|purple" al wrapper del módulo
   ================================================================ */

/* Valores por defecto (verde) — en :root para cuando no hay data-theme */
:root {
    --mod-color:    #2E7D32;
    --mod-dark:     #1B5E20;
    --mod-mid:      #388E3C;
    --mod-pale:     #E8F5E9;
    --mod-soft:     #A5D6A7;
    --mod-hover:    #C8E6C9;
    --mod-gradient: linear-gradient(135deg,#1B5E20 0%,#2E7D32 100%);
    --mod-shadow:   rgba(46,125,50,.20);

/* ================================================================
   TEMAS POR MODULO  [data-theme="green|blue|purple"]
   ================================================================ */

[data-theme="green"] {
    --mod-color:    #2E7D32;
    --mod-dark:     #1B5E20;
    --mod-mid:      #388E3C;
    --mod-pale:     #E8F5E9;
    --mod-soft:     #A5D6A7;
    --mod-hover:    #C8E6C9;
    --mod-gradient: linear-gradient(135deg,#1B5E20 0%,#2E7D32 100%);
    --mod-shadow:   rgba(46,125,50,.20);
    --mod-focus:    rgba(56,142,60,.15);
}

[data-theme="blue"] {
    --mod-color:    #1565C0;
    --mod-dark:     #0D47A1;
    --mod-mid:      #1976D2;
    --mod-pale:     #E3F2FD;
    --mod-soft:     #90CAF9;
    --mod-hover:    #BBDEFB;
    --mod-gradient: linear-gradient(135deg,#0D47A1 0%,#1976D2 100%);
    --mod-shadow:   rgba(21,101,192,.20);
    --mod-focus:    rgba(25,118,210,.15);
}

[data-theme="purple"] {
    --mod-color:    #6A1B9A;
    --mod-dark:     #4A148C;
    --mod-mid:      #7B1FA2;
    --mod-pale:     #F3E5F5;
    --mod-soft:     #CE93D8;
    --mod-hover:    #E1BEE7;
    --mod-gradient: linear-gradient(135deg,#4A148C 0%,#7B1FA2 100%);
    --mod-shadow:   rgba(106,27,154,.20);
    --mod-focus:    rgba(123,31,162,.15);
}

/* Módulo Nutricional (teal) */
[data-theme="teal"] {
    --mod-color:    #0D9488;
    --mod-dark:     #0F766E;
    --mod-mid:      #14B8A6;
    --mod-pale:     #E6FFFA;
    --mod-soft:     #99F6E4;
    --mod-hover:    #CCFBF1;
    --mod-gradient: linear-gradient(135deg,#0F766E 0%,#14B8A6 100%);
    --mod-shadow:   rgba(13,148,136,.20);
    --mod-focus:    rgba(20,184,166,.15);
}

[data-theme="indigo"] {
    --mod-color:    #4F46E5;
    --mod-dark:     #4338CA;
    --mod-mid:      #6366F1;
    --mod-pale:     #EEF2FF;
    --mod-soft:     #C7D2FE;
    --mod-hover:    #E0E7FF;
    --mod-gradient: linear-gradient(135deg,#4338CA 0%,#6366F1 100%);
    --mod-shadow:   rgba(79,70,229,.20);
    --mod-focus:    rgba(99,102,241,.15);
}

/* ================================================================
   CABECERA DE MODULO  .mod-page-header
   ================================================================ */

.mod-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.mod-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mod-color);
    display: flex;
    align-items: center;
    gap: .45rem;
    line-height: 1.2;
}

.mod-title small {
    font-weight: 400;
    font-size: .78rem;
    color: #6c757d;
    display: block;
    margin-top: .1rem;
}

.mod-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--mod-pale);
    color: var(--mod-color);
    font-size: 1rem;
    flex-shrink: 0;
}

/* ================================================================
   BOTON PRINCIPAL  .btn-mod  (Nuevo / Nueva)
   ================================================================ */

.btn-mod {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: var(--mod-gradient);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px var(--mod-shadow);
    transition: opacity .15s, box-shadow .15s, transform .1s;
    text-decoration: none;
}
.btn-mod:hover  { opacity: .88; box-shadow: 0 4px 14px var(--mod-shadow); color: #fff; }
.btn-mod:active { opacity: .95; transform: translateY(1px); }

/* ================================================================
   BOTONES DE ACCION EN TABLA  .btn-act
   ================================================================ */

.btn-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50px;
    border: 1.5px solid var(--mod-color);
    background: transparent;
    color: var(--mod-color);
    font-size: .82rem;
    line-height: 1;
    cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
    vertical-align: middle;
}
.btn-act:hover  { background: var(--mod-color); color: #fff; }
.btn-act:active { opacity: .85; }

.btn-act.btn-act-info    { border-color: #1565C0; color: #1565C0; }
.btn-act.btn-act-info:hover    { background: #1565C0; color: #fff; }

.btn-act.btn-act-success { border-color: #2E7D32; color: #2E7D32; }
.btn-act.btn-act-success:hover { background: #2E7D32; color: #fff; }

.btn-act.btn-act-warning { border-color: #E65100; color: #E65100; }
.btn-act.btn-act-warning:hover { background: #E65100; color: #fff; }

.btn-act.btn-act-danger  { border-color: #b71c1c; color: #b71c1c; }
.btn-act.btn-act-danger:hover  { background: #b71c1c; color: #fff; }

/* ================================================================
   CABECERA DE TABLA  .mod-thead
   ================================================================ */

.mod-thead th {
    background: var(--mod-color) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .3px;
    border: none !important;
    white-space: nowrap;
    padding: .6rem .75rem;
}
.mod-thead th:first-child { border-radius: 6px 0 0 6px; }
.mod-thead th:last-child  { border-radius: 0 6px 6px 0; }

/* ================================================================
   FILTROS PILL  .mod-filter-btn
   ================================================================ */

.mod-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1.5px solid #dee2e6;
    background: #fff;
    border-radius: 50px;
    padding: .28rem .85rem;
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .13s, background .13s, color .13s;
    color: #495057;
    white-space: nowrap;
}
.mod-filter-btn:hover,
.mod-filter-btn.active {
    border-color: var(--mod-color);
    background: var(--mod-pale);
    color: var(--mod-dark);
    font-weight: 600;
}

/* ================================================================
   MODAL HEADERS — siempre usan el gradiente del módulo
   ================================================================ */

.modal-header {
    background: var(--mod-gradient) !important;
    color: #fff !important;
}
.modal-header .modal-title,
.modal-header h5,
.modal-header h4 {
    color: #fff !important;
}

/* ================================================================
   MODAL TABS — corrige herencia de color del sidebar
   ================================================================ */

.modal .nav-tabs {
    border-bottom: 2px solid var(--mod-soft);
    background: #fff;
}
.modal .nav-tabs .nav-link {
    color: #6c757d;
    font-weight: 500;
    font-size: .88rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .55rem 1rem;
    transition: color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: -2px;
    white-space: nowrap;
    overflow: visible;
}
.modal .nav-tabs .nav-link:hover {
    color: var(--mod-color);
    background: var(--mod-pale);
    border-bottom-color: var(--mod-soft);
}
.modal .nav-tabs .nav-link.active {
    color: var(--mod-color);
    font-weight: 600;
    background: #fff;
    border-bottom: 2px solid var(--mod-color);
}