/* ============================================================
   TALENTO ECL — MAIN.CSS
   Design System Unificado v2.0
   
   Índice:
     01. Variables
     02. Reset & Base
     03. Layout
     04. Navbar
     05. Footer
     06. Scroll-to-top
     07. Page Card  (contenedor principal de cada vista)
     08. Page Header (cabecera azul de la page card)
     09. Content Cards (tarjetas internas del contenido)
     10. Formularios  (grid, labels, inputs, select, textarea)
     11. Botones
     12. Tablas
     13. Badges de Estado
     14. Panel de Filtros
     15. Avatar & Perfil inline
     16. Breadcrumb
     17. Animaciones
     18. Utilidades
     19. Responsive
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   01. VARIABLES
───────────────────────────────────────────────────────────── */
:root {
  /* Paleta de marca */
  --ecl-primary:   #0b71b1;
  --ecl-primary-dark: #095e92;
  --ecl-secondary: #3b82f6;
  --ecl-accent:    #06b6d4;
  --ecl-dark:      #1f2937;
  --ecl-light:     #f8fafc;

  /* Semánticos */
  --ecl-success: #10b981;
  --ecl-warning: #f59e0b;
  --ecl-danger:  #ef4444;
  --ecl-info:    #3b82f6;

  /* Escala de grises */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow:    0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px 0 rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);

  /* Transiciones */
  --t-fast:   .15s ease-in-out;
  --t-normal: .3s  ease-in-out;
  --t-slow:   .5s  ease-in-out;

  /* Bordes */
  --radius-sm: .375rem;
  --radius:    .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Layout */
  --navbar-height: 70px;
  --input-height:  40px;
}

/* ─────────────────────────────────────────────────────────────
   02. RESET & BASE
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────
   03. LAYOUT
───────────────────────────────────────────────────────────── */
.main-content {
  min-height: calc(100vh - var(--navbar-height));
  padding-top: 1rem;
}

/* ─────────────────────────────────────────────────────────────
   04. NAVBAR
───────────────────────────────────────────────────────────── */
.navbar {
  height: var(--navbar-height);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-normal);
  z-index: 1030;
}

.navbar.scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow-lg);
}

/* Brand */
.navbar-brand-container { display: flex; align-items: center; }

.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0;
  margin-right: 2rem;
  transition: transform var(--t-fast);
}
.navbar-brand:hover { transform: translateY(-1px); text-decoration: none; }

.brand-logo { position: relative; margin-right: .75rem; }

.brand-image {
  width: 120px; height: 50px;
  border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: var(--shadow);
  transition: all var(--t-fast);
}
.navbar-brand:hover .brand-image { box-shadow: var(--shadow-md); transform: scale(1.05); }

.brand-text     { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name     { font-size: 1.25rem; font-weight: 700; color: var(--ecl-primary); letter-spacing: -.025em; }
.brand-subtitle { font-size: .75rem; color: var(--gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }

.brand-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: contain; }
.brand-text-mobile { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name-mobile { font-size: 1rem; font-weight: 700; color: var(--ecl-primary); }

/* Nav links */
.navbar-nav { display: flex; align-items: center; gap: .25rem; }
.nav-item    { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  color: var(--gray-600);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: .875rem;
  transition: all var(--t-fast);
}
.nav-link:hover  { color: var(--ecl-primary); background-color: var(--gray-100); text-decoration: none; }
.nav-link.active { color: var(--ecl-primary); background-color: rgba(11,113,177,.1); }
.nav-link i      { width: 20px; text-align: center; margin-right: .5rem; font-size: .875rem; }
.nav-text        { white-space: nowrap; }

/* Dropdowns */
.dropdown-menu {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: .5rem;
  margin-top: .5rem;
  min-width: 220px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  color: var(--gray-700);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  transition: all var(--t-fast);
  margin-bottom: .125rem;
}
.dropdown-item:hover { color: var(--ecl-primary); background-color: var(--gray-100); transform: translateX(2px); }
.dropdown-item i     { width: 18px; text-align: center; margin-right: .5rem; font-size: .75rem; }

.dropdown-header {
  display: flex;
  align-items: center;
  padding: .75rem .75rem .5rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: .5rem;
}

.dropdown-divider { margin: .5rem 0; border-color: var(--gray-200); }

/* User dropdown */
.user-dropdown .nav-link     { padding: .375rem .75rem; background: var(--gray-100); border-radius: var(--radius-lg); }
.user-dropdown .nav-link:hover { background: var(--gray-200); }

.user-avatar     { position: relative; margin-right: .5rem; }
.avatar-img      { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid white; box-shadow: var(--shadow-sm); }

.notification-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--ecl-danger); color: white;
  font-size: .625rem; font-weight: 700;
  padding: .125rem .25rem; border-radius: 50px;
  min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  animation: pulse 2s infinite;
}

.user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

.user-menu { min-width: 280px; padding: 0; }

.user-info {
  padding: 1rem;
  background: var(--gray-50);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin: -.5rem -.5rem .5rem;
}
.user-details   { display: flex; align-items: center; }
.user-info-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-right: .75rem; border: 3px solid white; box-shadow: var(--shadow); }
.user-info-name { font-weight: 600; color: var(--gray-800); margin-bottom: .125rem; }
.user-info-email { font-size: .75rem; color: var(--gray-500); margin-bottom: .25rem; }
.user-badge     { background: var(--ecl-primary); color: white; font-size: .625rem; padding: .125rem .5rem; border-radius: 50px; font-weight: 600; }

.notification-count { background: var(--ecl-danger); color: white; font-size: .625rem; padding: .125rem .375rem; border-radius: 50px; margin-left: auto; font-weight: 600; }

.logout-item       { color: var(--ecl-danger); }
.logout-item:hover { color: var(--ecl-danger); background-color: rgba(239,68,68,.1); }

/* Toggler */
.navbar-toggler       { border: none; padding: .375rem; border-radius: var(--radius); transition: all var(--t-fast); }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon  { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2875,85,99,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 24px; height: 24px; }

/* Offcanvas móvil */
.offcanvas         { background: white; border-left: 1px solid var(--gray-200); }
.offcanvas-header  { padding: 1.5rem; border-bottom: 1px solid var(--gray-200); }
.offcanvas-brand   { display: flex; align-items: center; }
.offcanvas-logo    { width: 36px; height: 36px; border-radius: var(--radius); margin-right: .75rem; }
.offcanvas-name    { font-size: 1.125rem; font-weight: 700; color: var(--ecl-primary); display: block; line-height: 1.2; }
.offcanvas-subtitle { font-size: .75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.offcanvas-body    { padding: 1rem; overflow-y: auto; }

.mobile-user-info  { display: flex; align-items: center; padding: 1rem; background: var(--gray-50); border-radius: var(--radius-lg); margin-bottom: 1.5rem; }
.mobile-avatar     { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-right: 1rem; border: 3px solid white; box-shadow: var(--shadow); }
.mobile-user-name  { font-weight: 600; color: var(--gray-800); margin-bottom: .25rem; }
.mobile-user-email { font-size: .875rem; color: var(--gray-500); }

/* ─────────────────────────────────────────────────────────────
   05. FOOTER
───────────────────────────────────────────────────────────── */
.footer-custom {
  background: linear-gradient(135deg, var(--ecl-primary) 0%, var(--ecl-secondary) 100%);
  color: white;
  padding: 3rem 0 1.5rem;
  margin-top: auto;
  position: relative;
  overflow: hidden;
}
.footer-custom::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--ecl-primary), var(--ecl-secondary), var(--ecl-accent));
}
.footer-brand  { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }
.footer-links a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: all var(--t-normal);
  display: inline-flex; align-items: center;
  padding: .25rem 0;
}
.footer-links a:hover  { color: var(--ecl-accent); transform: translateX(4px); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.1); border-radius: 50%; color: white;
  margin: 0 .5rem; transition: all var(--t-normal);
}
.footer-social a:hover { background: var(--ecl-secondary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59,130,246,.3); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: .875rem;
  color: rgba(255,255,255,.7);
}

/* ─────────────────────────────────────────────────────────────
   06. SCROLL-TO-TOP
───────────────────────────────────────────────────────────── */
.scroll-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 48px; height: 48px;
  background: var(--ecl-primary); color: white;
  border: none; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: all var(--t-normal);
  z-index: 1000; text-decoration: none;
}
.scroll-top:hover { background: var(--ecl-secondary); transform: translateY(-2px); box-shadow: var(--shadow-xl); color: white; }

/* ─────────────────────────────────────────────────────────────
   07. PAGE CARD
   Contenedor blanco principal de cada vista de módulo.
   Reemplaza: .form-card, .wizard-container, .detail-container
───────────────────────────────────────────────────────────── */
.page-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* ─────────────────────────────────────────────────────────────
   08. PAGE HEADER
   Cabecera azul en la parte superior de la page-card.
   Reemplaza: .form-header, .wizard-header, .detail-header
───────────────────────────────────────────────────────────── */
.page-header {
  background: var(--ecl-primary);
  color: white;
  padding: 1.25rem 1.75rem;
  border-bottom: 3px solid rgba(0,0,0,.12);
}

.page-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-icon {
  background: rgba(255,255,255,.15);
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  border: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}

.page-title-section { flex: 1; min-width: 0; }
.page-title   { font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.2; }
.page-subtitle { opacity: .85; margin: .2rem 0 0; font-size: .8rem; font-weight: 400; }

/* Badge de estado dentro del header */
.page-header .status-badge { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────
   09. PAGE BODY
───────────────────────────────────────────────────────────── */
.page-body { padding: 1.75rem; }

/* ─────────────────────────────────────────────────────────────
   10. CONTENT CARDS
   Tarjetas dentro del page-body para agrupar secciones.
   Reemplaza: .wizard-card, .detail-card, .form-section
───────────────────────────────────────────────────────────── */
.content-card {
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.content-card-header {
  display: flex;
  align-items: center;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  border-left: 3px solid var(--ecl-primary);
  background: var(--gray-50);
}

.content-card-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ecl-primary);
  font-size: 1rem;
  margin-right: .875rem;
  flex-shrink: 0;
}

.content-card-title { font-size: 1rem; font-weight: 600; color: var(--gray-800); margin: 0; line-height: 1.2; }
.content-card-subtitle { color: var(--gray-500); margin: .2rem 0 0; font-size: .8rem; }

.content-card-body { padding: 1.25rem; }

/* Grid de tarjetas para detalle */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.25rem;
}
.cards-grid .content-card { margin-bottom: 0; }

/* Tarjeta que ocupa todo el ancho */
.content-card.full-width { grid-column: 1 / -1; }

/* ─────────────────────────────────────────────────────────────
   11. FORMULARIOS
───────────────────────────────────────────────────────────── */

/* Grid adaptativo */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem 1rem;
  margin-bottom: 1rem;
}

.form-group          { display: flex; flex-direction: column; min-width: 0; }
.form-group.col-2    { grid-column: span 2; }
.form-group.col-3    { grid-column: span 3; }
.form-group.col-full { grid-column: 1 / -1; }

/* Label */
.form-label {
  font-weight: 700;
  color: var(--gray-500);
  margin-bottom: .25rem;
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Input / Select / Textarea */
.input-wrapper,
.select-wrapper,
.textarea-wrapper { position: relative; transition: all var(--t-normal); }

.form-control,
.form-select {
  height: var(--input-height);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 0 .875rem;
  font-size: .875rem;
  font-weight: 400;
  background: #fff;
  color: var(--gray-800);
  transition: border-color var(--t-fast);
  box-shadow: none;
  width: 100%;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ecl-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(11,113,177,.08);
  outline: none;
}
.form-control::placeholder { color: var(--gray-400); font-weight: 400; }

textarea.form-control {
  height: auto;
  min-height: 100px;
  padding: .75rem .875rem;
  resize: vertical;
}

/* Focus border animado */
.input-focus-border {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0;
  background: var(--ecl-primary);
  transition: width var(--t-normal);
}
.focused .input-focus-border { width: 100%; }

/* Select arrow */
.select-arrow {
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
  transition: all var(--t-fast);
}
.focused .select-arrow { color: var(--ecl-primary); transform: translateY(-50%) rotate(180deg); }

/* Select2 */
.form-grid .select2-container,
.form-group .select2-container { width: 100% !important; max-width: 100%; }
.select2-container--bootstrap-5 .select2-selection {
  min-height: var(--input-height);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--ecl-primary);
  background: white;
  box-shadow: 0 0 0 2px rgba(11,113,177,.1);
}
.select2-container--bootstrap-5 .select2-selection__choice {
  background: var(--ecl-primary);
  border: none;
  border-radius: var(--radius);
  color: white;
  font-weight: 500;
  padding: .25rem .75rem;
}
.select2-container--bootstrap-5 .select2-selection__choice__remove { color: rgba(255,255,255,.8); margin-right: .5rem; }
.select2-container--bootstrap-5 .select2-selection__choice__remove:hover { color: white; }

/* Mensajes de error y ayuda */
.form-help {
  margin-top: .375rem;
  font-size: .75rem;
  color: var(--gray-500);
  font-style: italic;
}
.form-error {
  margin-top: .375rem;
  color: var(--ecl-danger);
  font-size: .75rem;
  font-weight: 500;
}

/* Form validator Bootstrap (invalid-feedback) */
.invalid-feedback { font-size: .75rem; }

/* ─────────────────────────────────────────────────────────────
   12. BOTONES
───────────────────────────────────────────────────────────── */
.btn {
  padding: .5rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid transparent;
  transition: all var(--t-normal);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary             { background: var(--ecl-primary);   color: white;              border-color: var(--ecl-primary); }
.btn-primary:hover       { background: var(--ecl-primary-dark); border-color: var(--ecl-primary-dark); color: white; }

.btn-secondary           { background: var(--gray-600);      color: white;              border-color: var(--gray-600); }
.btn-secondary:hover     { background: var(--gray-700);      border-color: var(--gray-700); color: white; }

.btn-success             { background: var(--ecl-success);   color: white;              border-color: var(--ecl-success); }
.btn-success:hover       { background: #059669;              border-color: #059669;     color: white; }

.btn-danger              { background: var(--ecl-danger);    color: white;              border-color: var(--ecl-danger); }
.btn-danger:hover        { background: #dc2626;              border-color: #dc2626;     color: white; }

.btn-warning             { background: var(--ecl-warning);   color: white;              border-color: var(--ecl-warning); }
.btn-warning:hover       { background: #d97706;              border-color: #d97706;     color: white; }

.btn-cancel              { background: white;                color: var(--gray-600);    border-color: var(--gray-300); }
.btn-cancel:hover        { background: var(--gray-100);      color: var(--gray-700);    border-color: var(--gray-400); text-decoration: none; }

.btn-outline-primary     { background: transparent;          color: var(--ecl-primary); border-color: var(--ecl-primary); }
.btn-outline-primary:hover { background: var(--ecl-primary); color: white; }

/* Barra de acciones de formulario */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}
.form-actions-end { justify-content: flex-end; }

/* ─────────────────────────────────────────────────────────────
   DETAIL WITH SIDEBAR LAYOUT
───────────────────────────────────────────────────────────── */
.detail-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.detail-main-col {
  flex: 1;
  min-width: 0;
}
.detail-sidebar-col {
  width: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tarjeta de sidebar */
.sidebar-card {
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sidebar-card-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  border-left: 3px solid var(--ecl-primary);
  background: var(--gray-50);
  font-weight: 600;
  font-size: .8rem;
  color: var(--gray-700);
}
.sidebar-card-body { padding: 1rem; }

/* Botones dentro del sidebar */
.sidebar-card-body .btn {
  width: 100%;
  justify-content: flex-start;
  margin-bottom: .4rem;
  font-size: .8rem;
}
.sidebar-card-body .btn:last-child { margin-bottom: 0; }

/* Timeline de eventos en sidebar */
.event-timeline { display: flex; flex-direction: column; gap: 0; }
.event-item {
  display: flex;
  gap: .625rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.event-item:last-child { border-bottom: none; padding-bottom: 0; }
.event-dot-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: .2rem;
}
.event-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ecl-primary);
  flex-shrink: 0;
}
.event-dot.success { background: #22c55e; }
.event-dot.danger  { background: #ef4444; }
.event-dot.warning { background: #f59e0b; }
.event-dot.info    { background: #3b82f6; }
.event-line {
  width: 1px;
  flex: 1;
  background: var(--gray-200);
  margin-top: .25rem;
}
.event-meta { flex: 1; min-width: 0; }
.event-label { font-weight: 600; font-size: .775rem; color: var(--gray-800); line-height: 1.3; }
.event-detail { font-size: .72rem; color: var(--gray-500); margin-top: .1rem; }
.event-empty { font-size: .8rem; color: var(--gray-500); text-align: center; padding: .5rem 0; }

@media (max-width: 991px) {
  .detail-layout { flex-direction: column; }
  .detail-sidebar-col { width: 100%; }
}

/* Sidebar sticky en detalles */
.detail-sidebar-sticky {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────
   13. TABLAS
───────────────────────────────────────────────────────────── */
.table-responsive {
  border-radius: var(--radius-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table { width: 100%; margin-bottom: 0; font-size: .875rem; }

.table thead th {
  font-weight: 600;
  color: var(--gray-700);
  background-color: var(--gray-100);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.table td {
  padding: .75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:nth-child(odd) td { background-color: #fafafa; }
.table.table-hover tbody tr:hover td { background-color: rgba(11,113,177,.04); }

/* Celda de acciones */
.table .actions-cell { white-space: nowrap; text-align: center; }

/* Botones de acción en tabla */
.btn-action, .action-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-500);
  text-decoration: none;
  transition: all var(--t-fast);
  font-size: .8rem;
}
.btn-action:hover, .action-btn:hover { background: var(--ecl-primary); color: white; border-color: var(--ecl-primary); }
.btn-action.btn-action-danger:hover  { background: var(--ecl-danger);  color: white; border-color: var(--ecl-danger); }
.btn-action.btn-action-success:hover { background: var(--ecl-success); color: white; border-color: var(--ecl-success); }
.btn-action.btn-action-warning:hover { background: var(--ecl-warning); color: white; border-color: var(--ecl-warning); }

/* ─────────────────────────────────────────────────────────────
   14. BADGES DE ESTADO
───────────────────────────────────────────────────────────── */

/* Inline (dentro de tablas) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-pendiente  { background: #eff6ff; color: var(--ecl-secondary); }
.badge-aprobado   { background: #f0fdf4; color: var(--ecl-success); }
.badge-rechazado  { background: #fef2f2; color: var(--ecl-danger); }
.badge-cancelado  { background: var(--gray-100); color: var(--gray-500); }
.badge-activo     { background: #f0fdf4; color: var(--ecl-success); }
.badge-inactivo   { background: var(--gray-100); color: var(--gray-500); }
.badge-vencido    { background: #fef2f2; color: var(--ecl-danger); }
.badge-a-vencer   { background: #fffbeb; color: var(--ecl-warning); }
.badge-vigente    { background: #f0fdf4; color: var(--ecl-success); }

/* Prominente (en headers de detalle) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1rem;
  border-radius: var(--radius-xl);
  font-weight: 600;
  font-size: .875rem;
}
.status-badge.pendiente { background: linear-gradient(135deg, #f59e0b, #f97316); color: white; }
.status-badge.aprobado  { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.status-badge.rechazado { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.status-badge.cancelado { background: linear-gradient(135deg, #6b7280, #4b5563); color: white; }
.status-badge.activo    { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.status-badge.inactivo  { background: linear-gradient(135deg, #6b7280, #4b5563); color: white; }
.status-badge.vencido   { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.status-badge.a-vencer  { background: linear-gradient(135deg, #f59e0b, #f97316); color: white; }
.status-badge.vigente   { background: linear-gradient(135deg, #10b981, #059669); color: white; }

/* ─────────────────────────────────────────────────────────────
   15. PANEL DE FILTROS
───────────────────────────────────────────────────────────── */
.filter-panel {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Colapso animado */
.filter-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease-out;
}
.filter-collapse.show { max-height: 1200px; }

/* ─────────────────────────────────────────────────────────────
   16. AVATAR & PERFIL INLINE
───────────────────────────────────────────────────────────── */
.avatar-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .875rem;
  flex-shrink: 0;
  background: rgba(11,113,177,.1);
  color: var(--ecl-primary);
}

.avatar-lg {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ecl-primary), var(--ecl-secondary));
  color: white;
  font-size: 2rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 25px rgba(11,113,177,.3);
}

/* Fila de perfil en detalle */
.profile-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem;
}
.profile-info { flex: 1; min-width: 180px; }
.profile-name { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); margin: 0 0 .25rem; }
.profile-role { color: var(--gray-500); font-size: .875rem; margin: 0; }

/* Metadatos del detalle */
.meta-list { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; }

.meta-item { display: flex; gap: .75rem; align-items: flex-start; }

.meta-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius);
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--ecl-primary);
  font-size: .875rem;
  flex-shrink: 0;
}

.meta-label { font-size: .7rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.meta-value { font-size: .875rem; font-weight: 500; color: var(--gray-800); margin: 0; }

/* ─────────────────────────────────────────────────────────────
   17. BREADCRUMB
───────────────────────────────────────────────────────────── */
.page-breadcrumb {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.page-breadcrumb .breadcrumb { margin: 0; }
.breadcrumb-link { color: var(--ecl-primary); text-decoration: none; font-weight: 500; transition: color var(--t-fast); }
.breadcrumb-link:hover { color: var(--ecl-secondary); }
.breadcrumb-item.active { color: var(--gray-600); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────
   18. ANIMACIONES
───────────────────────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(11,113,177,.2); }
  50%      { box-shadow: 0 0 0 8px rgba(11,113,177,.0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   19. UTILIDADES
───────────────────────────────────────────────────────────── */
.text-primary  { color: var(--ecl-primary)  !important; }
.text-success  { color: var(--ecl-success)  !important; }
.text-danger   { color: var(--ecl-danger)   !important; }
.text-warning  { color: var(--ecl-warning)  !important; }
.text-muted    { color: var(--gray-500)     !important; }

.bg-primary-subtle { background: rgba(11,113,177,.1) !important; }
.bg-success-subtle { background: rgba(16,185,129,.1) !important; }
.bg-danger-subtle  { background: rgba(239,68,68,.1)  !important; }
.bg-warning-subtle { background: rgba(245,158,11,.1) !important; }

.fw-medium { font-weight: 500 !important; }

.gap-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-400);
}
.empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; }
.empty-state p { font-size: .9rem; margin: 0; }

/* ─────────────────────────────────────────────────────────────
   19b. TIMELINE
───────────────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: .75rem; }
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
}
.timeline-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .3rem;
  border: 2px solid rgba(255,255,255,.6);
}
.timeline-content { flex: 1; }
.timeline-content h6 { margin: 0 0 .15rem; font-size: .875rem; font-weight: 600; }
.timeline-content small { font-size: .78rem; color: var(--gray-400); }

/* ─────────────────────────────────────────────────────────────
   20. CHECKBOX / RADIO
───────────────────────────────────────────────────────────── */
.checkbox-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
  cursor: pointer;
}
.checkbox-item:hover { background: var(--gray-50); }
.checkbox-item.disabled { opacity: .5; pointer-events: none; }
.checkbox-label { font-weight: 500; font-size: .875rem; color: var(--gray-700); cursor: pointer; }

/* ─────────────────────────────────────────────────────────────
   21. INFORME / REPORT PAGES
───────────────────────────────────────────────────────────── */
.report-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.report-feature-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
  transition: all var(--t-fast);
}
.report-feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.report-feature-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--ecl-primary), var(--ecl-secondary));
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .75rem;
}
.report-feature-title { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; color: var(--gray-800); }
.report-feature-desc { font-size: .8rem; color: var(--gray-500); margin: 0; }

/* ─────────────────────────────────────────────────────────────
   22. MODAL OVERRIDES
───────────────────────────────────────────────────────────── */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* ─────────────────────────────────────────────────────────────
   23. RESPONSIVE
───────────────────────────────────────────────────────────── */

/* Tablet grande / Desktop pequeño */
@media (max-width: 1199.98px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-group.col-3 { grid-column: span 2; }

  /* Navbar: ocultar texto para que quepan todos los íconos */
  .nav-text { display: none; }
  .navbar-brand { margin-right: 1rem; }
  .brand-image { width: 90px; height: 38px; }
}

/* Tablet */
@media (max-width: 991.98px) {
  .brand-image { width: 36px; height: 36px; }
  .nav-link { padding: .5rem; }
  .user-name { display: none; }
  .cards-grid { grid-template-columns: 1fr; }

  .page-body { padding: 1.25rem; }
  .footer-custom { padding: 2rem 0 1rem; }
}

/* Móvil */
@media (max-width: 767.98px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: .875rem;
  }
  .form-group.col-2,
  .form-group.col-3 { grid-column: span 1; }

  .page-body { padding: 1rem; }
  .page-header { padding: 1rem 1.25rem; }
  .page-header-content { gap: .75rem; }

  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; justify-content: center; }

  .profile-row { flex-direction: column; text-align: center; }

  .navbar-nav { gap: 0; }
  .nav-link i { margin-right: 0; }

  /* Responsive tables */
  .table-responsive { margin: 0 -.5rem; border-radius: 0; }
  .table-responsive .table { min-width: 700px; }
  .table td, .table th { font-size: .8rem; padding: .5rem .625rem; }

  .cards-grid { gap: .75rem; }
  .content-card-body { padding: 1rem; }

  .meta-list { padding: 1rem; }
  .meta-item { gap: .5rem; }

  .report-features { grid-template-columns: 1fr; }
}

/* Extra small */
@media (max-width: 575.98px) {
  .page-title { font-size: 1rem; }
  .page-subtitle { font-size: .75rem; }
  .page-icon { width: 36px; height: 36px; font-size: .9rem; }

  .content-card-header { padding: .75rem 1rem; }
  .content-card-title { font-size: .9rem; }

  .status-badge { font-size: .75rem; padding: .3rem .75rem; }
}

/* =====================================================
   24. UTILITY – Transition Cards (Informes dashboard)
   ===================================================== */
.transition-card {
  transition: transform .2s ease-out, box-shadow .2s ease-out;
  border-left: 5px solid transparent;
}
.transition-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, .08) !important;
}