/*
 * alltrack-ui.css
 * Patrones de diseño reutilizables compartidos entre templates.
 * Cargar una sola vez desde base_user.html.
 */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --at-green:       #27ae60;
    --at-green-dark:  #1e8449;
    --at-green-light: #eafaf1;
    --at-blue:        #3498db;
    --at-blue-light:  #ebf5fb;
    --at-orange:      #e67e22;
    --at-orange-dark: #ca6f1e;
    --at-orange-light:#fef5e7;
    --at-purple:      #9b59b6;
    --at-purple-light:#f5eef8;
    --at-red:         #c0392b;
    --at-red-light:   #fdecea;
    --at-yellow-light:#fef9e7;
    --at-yellow-text: #d68910;
    --at-gray-text:   #6c757d;
}

/* ── Badges de estado (vencimiento: servicios, seguros, licencias) ────────── */
.badge-estado {
    font-size:     11px;
    font-weight:   600;
    padding:       3px 8px;
    border-radius: 12px;
    display:       inline-block;
}
.badge-vencido   { background: var(--at-red-light);    color: var(--at-red);         }
.badge-avisado   { background: var(--at-yellow-light); color: var(--at-yellow-text); }
.badge-vigente   { background: var(--at-green-light);  color: var(--at-green-dark);  }
.badge-finalizado{ background: #f0f0f0;                color: var(--at-gray-text);   }

/* ── Badges de tipo (historial de mantenimiento) ──────────────────────────── */
.badge-tipo {
    font-size:     11px;
    font-weight:   600;
    padding:       3px 8px;
    border-radius: 12px;
    display:       inline-block;
    white-space:   nowrap;
}
.badge-servicio  { background: var(--at-green-light);  color: var(--at-green-dark);  }
.badge-neumatico { background: var(--at-orange-light); color: var(--at-orange-dark); }

/* ── Toggle de vista (Panel General / Por Vehículo) ───────────────────────── */
.view-toggle {
    display:       flex;
    background:    #f1f3f5;
    border-radius: 8px;
    padding:       3px;
    gap:           2px;
}
.view-btn {
    border:        none;
    background:    none;
    padding:       5px 14px;
    border-radius: 6px;
    font-size:     13px;
    font-weight:   500;
    color:         var(--at-gray-text);
    cursor:        pointer;
    transition:    all .15s;
    white-space:   nowrap;
    display:       flex;
    align-items:   center;
    gap:           5px;
}
.view-btn .material-icons { font-size: 16px; }
.view-btn.active {
    background:  #fff;
    color:       #212529;
    box-shadow:  0 1px 3px rgba(0,0,0,.12);
    font-weight: 600;
}

/* ── Botones de exportar (usados en modal_exportar.html partial) ──────────── */
.at-export-btn {
    transition: background .18s;
}
.at-export-btn-excel {
    border:        2px solid #1D6F42;
    border-radius: 12px;
    background:    #f6fff9;
    color:         #1D6F42;
}
.at-export-btn-excel:hover {
    background: #1D6F42;
    color:      #fff;
}
.at-export-btn-excel:hover .material-icons,
.at-export-btn-excel:hover span { color: #fff; }
.at-export-btn-excel:hover small { color: rgba(255,255,255,.7); }

.at-export-btn-pdf {
    border:        2px solid var(--at-red);
    border-radius: 12px;
    background:    #fff8f8;
    color:         var(--at-red);
}
.at-export-btn-pdf:hover {
    background: var(--at-red);
    color:      #fff;
}
.at-export-btn-pdf:hover .material-icons,
.at-export-btn-pdf:hover span { color: #fff; }
.at-export-btn-pdf:hover small { color: rgba(255,255,255,.7); }

/* ── Cinta "Versión Beta" sobre el logo (header y login) ──────────────────── */
.brand-ribbon-wrap {
    position: relative;
    display:  inline-block;
}
.ribbon-beta {
    position:       absolute;
    top:            4px;
    right:          -40px;
    width:          132px;
    text-align:     center;
    background:     var(--at-orange);
    color:          #fff;
    font-size:      9.5px;
    font-weight:    700;
    letter-spacing: .3px;
    padding:        3px 0;
    transform:      rotate(28deg);
    box-shadow:     0 2px 4px rgba(0,0,0,.2);
    white-space:    nowrap;
    pointer-events: none;
}
/* Logo del login es más grande (250px vs 130px del header) */
.brand-ribbon-wrap.login-brand-ribbon .ribbon-beta {
    top:       8px;
    right:     -56px;
    width:     190px;
    font-size: 12px;
    padding:   4px 0;
}
/* En el header el fondo ya es naranja — la cinta naranja se pierde ahí,
   así que se invierte a blanco/naranja para que se distinga del navbar. */
.brand-ribbon-wrap.header-brand-ribbon .ribbon-beta {
    background: #fff;
    color:      var(--at-orange-dark);
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
}

/* ── Ítems de menú pendientes de implementación ───────────────────────────── */
/* MANTENIMIENTO: Multimedia, Combustibles, Control de Vehículos */
/* Ficha Técnica ya implementada - habilitada */
/* ADMINISTRACIÓN: todos excepto Vehículos                                       */
#menu-exportar > a{
    opacity: 0.35;
    pointer-events: none !important;
    cursor: default !important;
}

/* ── Utilidades "gap-N" ───────────────────────────────────────────────────── */
/* Bootstrap 4 (versión usada en todo el sistema) no trae utilidades .gap-*
   (eso es de Bootstrap 5) — sin esto, ".d-flex.gap-2" no separa nada y los
   inputs quedan pegados unos con otros (ej. pares de fecha "desde"/"hasta").
   La propiedad CSS `gap` en flexbox sí la soportan los navegadores modernos,
   solo faltaba la clase. */
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }

/* ── Insignias circulares del header (Integraciones / Panel Admin / Avatar) ─ */
/* Clase única para que los 3 círculos del header (Integraciones, Panel de
   Superusuario, avatar de usuario) sean exactamente el mismo tamaño — antes
   cada uno tenía su propio width/height a mano y quedaban desparejos
   (2026-08-10, feedback de Cristian: "el de integraciones es más chico"). */
.header-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    color:           #fff;
}
.header-badge .material-icons {
    font-size: 20px;
}
.header-badge-integraciones {
    background: #16a085;
}
.header-badge-panel-su {
    background: #263238;
}
.header-badge-avatar {
    background:  #8e44ad;
    font-size:   15px;
    font-weight: 600;
}

/* ── Launcher de integraciones (dropdown "apps" del header) ──────────────── */
.integraciones-launcher-menu {
    width:   300px;
    padding: 10px 12px 12px;
}
.integraciones-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   8px;
}
.integracion-tile {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             6px;
    padding:         8px 2px;
    border-radius:   8px;
    text-decoration: none;
    color:           #495057;
    transition:      background .15s;
}
.integracion-tile:hover:not(.integracion-tile-disabled) {
    background:      #f1f3f5;
    text-decoration: none;
    color:           #212529;
}
.integracion-tile-icon {
    width:           42px;
    height:          42px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.integracion-tile-icon .material-icons {
    font-size: 22px;
    color:     #fff;
}
.integracion-tile-label {
    font-size:   10.5px;
    font-weight: 500;
    line-height: 1.25;
}
.integracion-tile-disabled {
    cursor:  default;
    opacity: .5;
}
.integracion-tile-disabled .integracion-tile-icon {
    filter: grayscale(35%);
}

/* ── Menú de usuario (dropdown del avatar) ────────────────────────────────── */
.dropdown-user-name {
    padding:     14px 18px 10px;
    font-size:   14px;
    font-weight: 600;
    color:       #212529;
}