/* ==========================================================================
   MAYAN EDMS — IDENTIDAD INSTITUCIONAL TLAJOMULCO DE ZÚÑIGA
   Dirección de Desarrollo de Sistemas | Junio 2026
   Versión 2.0 | base_custom.css
   --------------------------------------------------------------------------
   INSTRUCCIONES DE DESPLIEGUE:
   Reemplazar el archivo existente en:
     /data/mayan-edms/branding/static/appearance/css/base_custom.css
   Luego ejecutar:
     docker compose restart app
     (Navegador: Ctrl+Shift+R para limpiar caché)

   ESTRATEGIA CSS:
   - Todos los overrides usan el prefijo `body` para ganar especificidad
     sobre las reglas de Mayan/Bootstrap sin importar el orden de carga.
   - El CSS de Mayan se carga DESPUÉS de este archivo, por lo que
     especificidad > !important para evitar conflictos.
   - Variables centralizadas en :root — un solo lugar para ajustar colores.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. FUENTES INSTITUCIONALES — CoreRhino
   --------------------------------------------------------------------------
   Montar los .otf en el contenedor via docker-compose.override.yml antes
   de referenciar estas familias. Ver Documentación de Branding §8.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'CoreRhino';
  src: url('/static/appearance/fonts/CoreRhino35Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CoreRhino';
  src: url('/static/appearance/fonts/CoreRhino45Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CoreRhino';
  src: url('/static/appearance/fonts/CoreRhino55Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CoreRhino';
  src: url('/static/appearance/fonts/CoreRhino65Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CoreRhino';
  src: url('/static/appearance/fonts/CoreRhino75Heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   1. VARIABLES INSTITUCIONALES — única fuente de verdad de paleta
   -------------------------------------------------------------------------- */

:root {
  /* Colores institucionales — Manual de Identidad 2024-2027 */
  --tlaco-naranja:        #FC581A;   /* Pantone 1505 C — CTAs primarios */
  --tlaco-naranja-dark:   #D94610;   /* hover / bordes activos */
  --tlaco-naranja-light:  #FF7A45;   /* links sobre fondo oscuro */
  --tlaco-naranja-muted:  rgba(252,88,26,0.12); /* fondo de estado activo sidebar */

  --tlaco-verde:          #002E06;   /* Pantone 3425 C — sidebar / headers */
  --tlaco-verde-mid:      #004D0A;   /* hover sidebar */
  --tlaco-verde-light:    #E8F5E9;   /* fondo alterno de filas de tabla */
  --tlaco-verde-accent:   #1B5E20;   /* íconos secundarios sobre fondo claro */

  /* Neutrales */
  --tlaco-bg:             #F5F6F7;   /* fondo de la página */
  --tlaco-surface:        #FFFFFF;   /* tarjetas / paneles */
  --tlaco-border:         #E0E0E0;   /* bordes suaves */
  --tlaco-border-dark:    #BDBDBD;   /* bordes énfasis */
  --tlaco-text-primary:   #1A1A1A;
  --tlaco-text-secondary: #555555;
  --tlaco-text-muted:     #888888;

  /* Tipografía */
  --font-base: 'CoreRhino', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --sidebar-width:        220px;
  --navbar-height:        56px;
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;

  /* Sombras funcionales (no decorativas) */
  --shadow-card:          0 1px 4px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.06);
  --shadow-card-hover:    0 4px 12px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,46,6,0.15);
}


/* --------------------------------------------------------------------------
   2. RESET DE TIPOGRAFÍA GLOBAL
   -------------------------------------------------------------------------- */

body body,
body * {
  font-family: var(--font-base) !important;
}

body {
  background-color: var(--tlaco-bg) !important;
  color: var(--tlaco-text-primary) !important;
}


/* --------------------------------------------------------------------------
   3. NAVBAR SUPERIOR
   --------------------------------------------------------------------------
   Objetivo: barra verde oscura con logo a la izquierda, buscador central
   limpio y controles de usuario a la derecha.
   -------------------------------------------------------------------------- */

body .navbar,
body .navbar-default,
body nav.navbar {
  background-color: var(--tlaco-verde) !important;
  border-bottom: 3px solid var(--tlaco-naranja) !important;
  min-height: var(--navbar-height) !important;
  padding: 0 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* Textos y links en navbar */
body .navbar a,
body .navbar .navbar-brand,
body .navbar-default .navbar-nav > li > a {
  color: rgba(255,255,255,0.90) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
}

body .navbar a:hover,
body .navbar-default .navbar-nav > li > a:hover {
  color: #ffffff !important;
  background-color: var(--tlaco-verde-mid) !important;
}

/* Ocultar logo SVG de Mayan para mostrar el PNG institucional */
body .mayan-edms-logo,
body .icon-mayan-edms-logo {
  display: none !important;
}


/* --------------------------------------------------------------------------
   4. BUSCADOR DE NAVBAR — estilo portal Tesorería
   --------------------------------------------------------------------------
   Input limpio + botón BUSCAR naranja sólido + botón AVANZADA con borde.
   -------------------------------------------------------------------------- */

/* Contenedor del buscador */
body .navbar .navbar-form,
body .navbar form[role="search"],
body .navbar form.form-search {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 0 !important;
  flex: 1 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* Select de tipo de documento */
body .navbar form select,
body .navbar form .select2-container {
  height: 36px !important;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  background-color: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
  min-width: 140px !important;
}

/* Input de términos de búsqueda */
body .navbar form input[type="text"],
body .navbar form input[type="search"] {
  height: 36px !important;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  background-color: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  flex: 1 !important;
  min-width: 180px !important;
  transition: border-color 0.2s, background-color 0.2s !important;
}

body .navbar form input[type="text"]::placeholder,
body .navbar form input[type="search"]::placeholder {
  color: rgba(255,255,255,0.50) !important;
}

body .navbar form input[type="text"]:focus,
body .navbar form input[type="search"]:focus {
  outline: none !important;
  border-color: var(--tlaco-naranja) !important;
  background-color: rgba(255,255,255,0.18) !important;
}

/* Botón BUSCAR — naranja sólido */
body .navbar form button[type="submit"],
body .navbar form .btn-search-submit,
body .navbar form .btn-primary {
  height: 36px !important;
  background-color: var(--tlaco-naranja) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  white-space: nowrap !important;
}

body .navbar form button[type="submit"]:hover,
body .navbar form .btn-search-submit:hover {
  background-color: var(--tlaco-naranja-dark) !important;
}

/* Botón AVANZADA — contorno naranja */
body .navbar form .btn-default,
body .navbar form a.btn-advanced,
body .navbar form button.btn-advanced {
  height: 36px !important;
  background-color: transparent !important;
  border: 1.5px solid var(--tlaco-naranja) !important;
  border-radius: var(--radius-md) !important;
  color: var(--tlaco-naranja-light) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  white-space: nowrap !important;
}

body .navbar form .btn-default:hover {
  background-color: rgba(252,88,26,0.15) !important;
}

/* Íconos en botones de búsqueda */
body .navbar form button .glyphicon,
body .navbar form button .fa {
  margin-right: 5px !important;
}


/* --------------------------------------------------------------------------
   5. SIDEBAR / MENÚ LATERAL
   --------------------------------------------------------------------------
   Verde oscuro institucional, íconos blancos sutiles, ítem activo con
   barra naranja izquierda y fondo translúcido.
   -------------------------------------------------------------------------- */

body #menu-main {
  background-color: var(--tlaco-verde) !important;
  border-right: none !important;
  width: var(--sidebar-width) !important;
}

/* Footer del menú lateral */
body #main-menu-footer {
  background-color: var(--tlaco-verde) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 12px 0 !important;
}

/* Cabecera de acordeón */
body #accordion-sidebar .panel-heading {
  background-color: var(--tlaco-verde) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Cuerpo de acordeón */
body #accordion-sidebar .panel-body {
  background-color: var(--tlaco-verde) !important;
}

/* Íconos del sidebar */
body #menu-main .fa,
body #menu-main .glyphicon,
body #accordion-sidebar .fa {
  color: rgba(255,255,255,0.65) !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  margin-right: 8px !important;
}

/* Links del sidebar — estado inactivo */
body #menu-main a,
body #accordion-sidebar a {
  color: rgba(255,255,255,0.78) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  padding: 9px 16px !important;
  display: block !important;
  transition: background-color 0.15s, color 0.15s !important;
  border-left: 3px solid transparent !important;
  letter-spacing: 0.01em !important;
}

/* Hover del sidebar */
body #menu-main a:hover,
body #accordion-sidebar a:hover {
  background-color: var(--tlaco-verde-mid) !important;
  color: #ffffff !important;
  border-left-color: rgba(252,88,26,0.50) !important;
}

/* Ítem activo / seleccionado */
body #menu-main li.active > a,
body #accordion-sidebar li.active > a,
body #menu-main a.active,
body #accordion-sidebar a.active {
  background-color: var(--tlaco-naranja-muted) !important;
  color: #ffffff !important;
  border-left: 3px solid var(--tlaco-naranja) !important;
  font-weight: 500 !important;
}

body #menu-main li.active > a .fa,
body #accordion-sidebar li.active > a .fa {
  color: var(--tlaco-naranja-light) !important;
}

/* Eliminar líneas divisorias toscas */
body #menu-main hr,
body #accordion-sidebar hr {
  border-color: rgba(255,255,255,0.08) !important;
  margin: 4px 0 !important;
}

/* Separadores de sección del panel */
body #accordion-sidebar .panel {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body #accordion-sidebar .panel + .panel {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}


/* --------------------------------------------------------------------------
   6. ÁREA DE CONTENIDO PRINCIPAL
   -------------------------------------------------------------------------- */

body #main-content,
body .main-content,
body .content-wrapper {
  background-color: var(--tlaco-bg) !important;
  padding: 20px 24px !important;
}

/* Títulos de sección (ej. "Gabinetes") */
body h1.title,
body .page-title h1,
body h1.mayan-page-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--tlaco-verde) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--tlaco-naranja) !important;
  letter-spacing: -0.01em !important;
}

body h2, body h3, body h4 {
  color: var(--tlaco-text-primary) !important;
  font-weight: 600 !important;
}


/* --------------------------------------------------------------------------
   7. TABLAS DE DATOS — Gabinetes / Documentos
   --------------------------------------------------------------------------
   Cabecera: fondo verde oscuro + línea inferior naranja.
   Filas: padding generoso, alternancia sutil, hover suave.
   -------------------------------------------------------------------------- */

/* Contenedor de tabla como Card */
body .panel,
body .panel-default {
  background-color: var(--tlaco-surface) !important;
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

/* Tabla */
body table,
body .table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13.5px !important;
  background-color: var(--tlaco-surface) !important;
}

/* Cabecera de tabla — verde oscuro + línea naranja */
body thead,
body thead tr,
body .table thead,
body .table thead tr {
  background-color: var(--tlaco-verde) !important;
}

body thead th,
body .table thead th,
body .table thead tr th {
  background-color: var(--tlaco-verde) !important;
  color: rgba(255,255,255,0.90) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-bottom: 3px solid var(--tlaco-naranja) !important;
  border-top: none !important;
  white-space: nowrap !important;
}

/* Regla de cabecera de tabla — eliminada */
body .appearance-table-thead-tr-ruler {
  display: none !important;
}

/* Links en cabeceras de tabla (ordenamiento) */
body thead th a,
body .table thead th a {
  color: rgba(255,255,255,0.90) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body thead th a:hover,
body .table thead th a:hover {
  color: var(--tlaco-naranja-light) !important;
}

/* Celdas del cuerpo */
body tbody td,
body .table tbody td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--tlaco-border) !important;
  border-top: none !important;
  color: var(--tlaco-text-primary) !important;
  vertical-align: middle !important;
}

/* Links dentro de celdas */
body tbody td a {
  color: var(--tlaco-verde-accent) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

body tbody td a:hover {
  color: var(--tlaco-naranja) !important;
  text-decoration: underline !important;
}

/* Filas alternas sutiles */
body tbody tr:nth-child(even) td {
  background-color: var(--tlaco-verde-light) !important;
}

/* Hover de fila */
body tbody tr:hover td {
  background-color: rgba(252,88,26,0.05) !important;
}

/* Contador Total */
body .badge-total,
body span.badge,
body .document-count {
  background-color: var(--tlaco-naranja) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   8. PAGINACIÓN Y CONTROLES DE TABLA
   -------------------------------------------------------------------------- */

/* Barra de controles (paginación / filtro / ordenamiento) */
body .list-filter-bar,
body .pagination-bar,
body .panel-body > .row:first-child {
  background-color: var(--tlaco-surface) !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--tlaco-border) !important;
}

/* Botones de paginación */
body .pagination > li > a,
body .pagination > li > span {
  color: var(--tlaco-verde-accent) !important;
  border: 1px solid var(--tlaco-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background-color: var(--tlaco-surface) !important;
  transition: background-color 0.15s, color 0.15s !important;
}

body .pagination > li > a:hover {
  background-color: var(--tlaco-verde-light) !important;
  color: var(--tlaco-verde) !important;
  border-color: var(--tlaco-verde-accent) !important;
}

/* Página activa */
body .pagination > .active > a,
body .pagination > .active > span {
  background-color: var(--tlaco-naranja) !important;
  border-color: var(--tlaco-naranja) !important;
  color: #ffffff !important;
}

/* Input de filtrado */
body input.list-filter-input,
body input[placeholder="Términos de filtrado"],
body .panel-body input[type="text"].filter {
  border: 1.5px solid var(--tlaco-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  background-color: var(--tlaco-surface) !important;
  color: var(--tlaco-text-primary) !important;
  transition: border-color 0.2s !important;
}

body input.list-filter-input:focus {
  outline: none !important;
  border-color: var(--tlaco-naranja) !important;
}

/* Select de ordenamiento */
body select.sort-select,
body .panel-body select {
  border: 1.5px solid var(--tlaco-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  background-color: var(--tlaco-surface) !important;
  color: var(--tlaco-text-primary) !important;
}

/* Toggle de vista (tabla / grid) */
body .btn-list-mode,
body .btn-view-mode {
  border: 1.5px solid var(--tlaco-border) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--tlaco-surface) !important;
  color: var(--tlaco-text-secondary) !important;
  padding: 5px 10px !important;
  transition: all 0.15s !important;
}

body .btn-list-mode.active,
body .btn-list-mode:hover {
  background-color: var(--tlaco-naranja) !important;
  border-color: var(--tlaco-naranja) !important;
  color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   9. TILES DE NAVEGACIÓN — Setup / Tools
   --------------------------------------------------------------------------
   Reemplaza el estilo biselado nativo por cards flat con sombra suave.
   -------------------------------------------------------------------------- */

body .navigation-btn-lg,
body a.navigation-btn-lg {
  background-color: var(--tlaco-surface) !important;
  border: 1px solid var(--tlaco-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--tlaco-text-primary) !important;
  padding: 20px 16px !important;
  text-align: center !important;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s !important;
  text-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

body .navigation-btn-lg:hover,
body a.navigation-btn-lg:hover {
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-2px) !important;
  border-color: var(--tlaco-naranja) !important;
  color: var(--tlaco-verde) !important;
  text-decoration: none !important;
}

body .navigation-btn-lg .fa,
body .navigation-btn-lg .glyphicon {
  color: var(--tlaco-naranja) !important;
  font-size: 28px !important;
  text-shadow: none !important;
}

/* Tiles de panel-item (listas de documentos) */
body .panel-item {
  background-color: var(--tlaco-surface) !important;
  border: 1px solid var(--tlaco-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
  padding: 14px 16px !important;
}

body .panel-item:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--tlaco-naranja) !important;
}


/* --------------------------------------------------------------------------
   10. BOTONES GLOBALES
   -------------------------------------------------------------------------- */

/* Botón primario */
body .btn-primary {
  background-color: var(--tlaco-naranja) !important;
  border-color: var(--tlaco-naranja) !important;
  color: #ffffff !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  padding: 8px 18px !important;
  transition: background-color 0.2s, transform 0.1s !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body .btn-primary:hover {
  background-color: var(--tlaco-naranja-dark) !important;
  border-color: var(--tlaco-naranja-dark) !important;
  transform: translateY(-1px) !important;
}

body .btn-primary:active {
  transform: translateY(0) !important;
}

/* Botón secundario / default */
body .btn-default {
  background-color: var(--tlaco-surface) !important;
  border-color: var(--tlaco-border-dark) !important;
  color: var(--tlaco-text-primary) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body .btn-default:hover {
  background-color: var(--tlaco-verde-light) !important;
  border-color: var(--tlaco-verde-accent) !important;
  color: var(--tlaco-verde) !important;
}

/* Botón de éxito */
body .btn-success {
  background-color: var(--tlaco-verde-mid) !important;
  border-color: var(--tlaco-verde-mid) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Botón de peligro */
body .btn-danger {
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Botón de acciones (tres puntos / kebab) */
body .btn-actions,
body .dropdown-toggle {
  border-radius: var(--radius-md) !important;
  border-color: var(--tlaco-border) !important;
}


/* --------------------------------------------------------------------------
   11. FORMULARIOS E INPUTS
   -------------------------------------------------------------------------- */

body .form-group label {
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--tlaco-text-secondary) !important;
  margin-bottom: 4px !important;
}

body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body textarea,
body select {
  border: 1.5px solid var(--tlaco-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--tlaco-text-primary) !important;
  background-color: var(--tlaco-surface) !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
}

body .form-control:focus,
body input[type="text"]:focus {
  border-color: var(--tlaco-naranja) !important;
  box-shadow: 0 0 0 3px rgba(252,88,26,0.12) !important;
  outline: none !important;
}

/* Card de formulario */
body .well,
body .panel-form {
  background-color: var(--tlaco-surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 20px 24px !important;
}


/* --------------------------------------------------------------------------
   12. DROPDOWN MENUS
   -------------------------------------------------------------------------- */

body .dropdown-menu {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--tlaco-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  padding: 6px 0 !important;
  font-size: 13.5px !important;
}

body .dropdown-menu > li > a {
  padding: 8px 16px !important;
  color: var(--tlaco-text-primary) !important;
  transition: background-color 0.1s !important;
}

body .dropdown-menu > li > a:hover,
body .dropdown-menu > li > a:focus {
  background-color: var(--tlaco-verde-light) !important;
  color: var(--tlaco-verde) !important;
}

/* Separador */
body .dropdown-menu .divider {
  background-color: var(--tlaco-border) !important;
  margin: 4px 0 !important;
}


/* --------------------------------------------------------------------------
   13. ALERTAS Y NOTIFICACIONES
   -------------------------------------------------------------------------- */

body .alert {
  border-radius: var(--radius-md) !important;
  border-left-width: 4px !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
}

body .alert-success {
  border-left-color: var(--tlaco-verde-mid) !important;
  background-color: var(--tlaco-verde-light) !important;
  color: var(--tlaco-verde) !important;
}

body .alert-danger,
body .alert-error {
  border-left-color: #D32F2F !important;
}

body .alert-warning {
  border-left-color: var(--tlaco-naranja) !important;
}

body .alert-info {
  border-left-color: #1565C0 !important;
}


/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

body footer,
body .footer {
  font-size: 12px !important;
  color: var(--tlaco-text-muted) !important;
  padding: 12px 24px !important;
  border-top: 1px solid var(--tlaco-border) !important;
  background-color: var(--tlaco-surface) !important;
}


/* --------------------------------------------------------------------------
   15. BREADCRUMBS
   -------------------------------------------------------------------------- */

body .breadcrumb {
  background-color: transparent !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

body .breadcrumb > li + li::before {
  color: var(--tlaco-text-muted) !important;
}

body .breadcrumb > .active {
  color: var(--tlaco-text-secondary) !important;
}

body .breadcrumb a {
  color: var(--tlaco-verde-accent) !important;
}

body .breadcrumb a:hover {
  color: var(--tlaco-naranja) !important;
}


/* --------------------------------------------------------------------------
   16. MODAL DIALOGS
   -------------------------------------------------------------------------- */

body .modal-content {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.20) !important;
  overflow: hidden !important;
}

body .modal-header {
  background-color: var(--tlaco-verde) !important;
  border-bottom: 3px solid var(--tlaco-naranja) !important;
  padding: 14px 20px !important;
}

body .modal-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body .modal-header .close {
  color: rgba(255,255,255,0.80) !important;
  opacity: 1 !important;
  font-size: 20px !important;
}

body .modal-header .close:hover {
  color: #ffffff !important;
}

body .modal-footer {
  background-color: var(--tlaco-bg) !important;
  border-top: 1px solid var(--tlaco-border) !important;
  padding: 14px 20px !important;
}


/* --------------------------------------------------------------------------
   17. ETIQUETAS / BADGES
   -------------------------------------------------------------------------- */

body .label-primary {
  background-color: var(--tlaco-naranja) !important;
  border-radius: 20px !important;
}

body .label-success {
  background-color: var(--tlaco-verde-mid) !important;
  border-radius: 20px !important;
}

body .label-default {
  background-color: var(--tlaco-text-muted) !important;
  border-radius: 20px !important;
}


/* --------------------------------------------------------------------------
   18. RESPONSIVE — ajustes para pantallas pequeñas
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --sidebar-width: 200px;
  }

  body .navbar form.form-search {
    max-width: 420px !important;
  }
}

@media (max-width: 768px) {
  body #menu-main {
    width: 100% !important;
  }

  body .navbar form.form-search {
    max-width: 100% !important;
    padding: 4px 8px !important;
  }

  body .navigation-btn-lg {
    padding: 14px 12px !important;
  }

  body thead th,
  body .table thead th {
    padding: 10px 10px !important;
    font-size: 10px !important;
  }

  body tbody td,
  body .table tbody td {
    padding: 10px 10px !important;
  }
}


/* --------------------------------------------------------------------------
   19. UTILIDADES ADICIONALES
   -------------------------------------------------------------------------- */

/* Separador visual de sección */
body hr.section-divider {
  border: none !important;
  border-top: 2px solid var(--tlaco-naranja) !important;
  margin: 24px 0 !important;
  width: 48px !important;
}

/* Texto de ayuda */
body .help-block {
  color: var(--tlaco-text-muted) !important;
  font-size: 12px !important;
  margin-top: 3px !important;
}

/* Scrollbar sutil en webkit */
body ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

body ::-webkit-scrollbar-track {
  background: var(--tlaco-bg) !important;
}

body ::-webkit-scrollbar-thumb {
  background: var(--tlaco-border-dark) !important;
  border-radius: 3px !important;
}

body ::-webkit-scrollbar-thumb:hover {
  background: var(--tlaco-verde-accent) !important;
}


/* ==========================================================================
   FIN DE base_custom.css
   Versión 2.0 — Junio 2026
   Para cambiar un color institucional: editar la variable en :root (sección 1).
   Para aplicar cambios: docker compose restart app + Ctrl+Shift+R en navegador.
   ========================================================================== */

body .appearance-table-thead-tr-ruler td {
  background-color: var(--tlaco-verde) !important;
  border-bottom: none !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* === NAVBAR SEARCH FIX === */
body .navbar-form .select2-container .select2-selection--single {
  background-color: rgba(255,255,255,0.12) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 6px !important;
  height: 36px !important;
}
body .navbar-form .select2-container .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important;
  line-height: 34px !important;
  font-size: 13px !important;
  padding-left: 10px !important;
}
body .navbar-form .select2-container .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
}
body .navbar-form .select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: rgba(255,255,255,0.6) transparent transparent transparent !important;
}
body .navbar-form input[type="text"] {
  background-color: rgba(255,255,255,0.12) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  height: 36px !important;
  font-size: 13px !important;
  padding: 0 12px !important;
  box-shadow: none !important;
}
body .navbar-form input[type="text"]::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
body .navbar-form input[type="text"]:focus {
  border-color: var(--tlaco-naranja) !important;
  background-color: rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
  outline: none !important;
}
body .navbar-form {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
body .navbar-form .form-group {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
body .navbar-form .btn {
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 16px !important;
  vertical-align: middle !important;
}
/* Select2 dropdown panel */
body .select2-dropdown {
  border: 1px solid var(--tlaco-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}
body .select2-results__option--highlighted {
  background-color: var(--tlaco-verde) !important;
  color: #ffffff !important;
}
body .select2-results__option {
  font-size: 13px !important;
  padding: 8px 12px !important;
}

/* === NAVBAR SELECT NATIVO FIX === */
body .navbar-form select,
body .navbar select {
  background-color: rgba(255,255,255,0.12) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  height: 36px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
body .navbar-form select option {
  background-color: var(--tlaco-verde) !important;
  color: #ffffff !important;
}

/* === ELIMINAR FILA RULER COMPLETAMENTE === */
body .appearance-table-thead-tr-ruler,
body .appearance-table-thead-tr-ruler td,
body tr.appearance-table-thead-tr-ruler,
body tr.appearance-table-thead-tr-ruler td {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  line-height: 0 !important;
  font-size: 0 !important;
  visibility: hidden !important;
}

/* === ELIMINAR FILA SPACER Y RULER === */
body tr.appearance-table-thead-tr-spacer,
body tr.appearance-table-thead-tr-spacer th,
body tr.appearance-table-thead-tr-ruler,
body tr.appearance-table-thead-tr-ruler td {
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  border: none !important;
  background-color: var(--tlaco-verde) !important;
}

/* === SPACER FIX v3 === */
body tr.appearance-table-thead-tr-spacer th,
body .appearance-table-condensed thead tr:nth-child(2) th {
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  border: none !important;
  background-color: var(--tlaco-verde) !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* === TOAST NOTIFICACIONES — naranja institucional === */
body #toast-container > .toast-success,
body .toast-success {
  background-color: var(--tlaco-naranja) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(252,88,26,0.35) !important;
}
body #toast-container > .toast-success .toast-title,
body #toast-container > .toast-success .toast-message {
  color: #ffffff !important;
}
body #toast-container > .toast-success .toast-close-button {
  color: rgba(255,255,255,0.9) !important;
}

/* === LOGIN INSTITUCIONAL === */
/* Ocultar imagen genérica de pirámide maya */
body #authentication-login-image-wrapper,
body #authentication-login-image-top {
  display: none !important;
}
/* Panel de login */
body .panel.panel-primary {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,46,6,0.18) !important;
  overflow: hidden !important;
}
body .panel.panel-primary > .panel-body {
  padding: 32px 28px !important;
  background: #ffffff !important;
}
/* Cabecera con verde institucional simulada via panel */
body .panel.panel-primary > .panel-body::before {
  content: "TlajoDocs";
  display: block;
  background: var(--tlaco-verde);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 20px;
  margin: -32px -28px 24px -28px;
  border-bottom: 4px solid var(--tlaco-naranja);
}


/* ============================================================
   LOGIN INSTITUCIONAL — v4 UX mejorado
   ============================================================ */

html,
body#body-plain {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #f0f2f0 !important;
}

body #tlajo-login-page {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background-color: #f0f2f0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Área central gris clara */
body #tlajo-login-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 1rem !important;
  background-color: #f0f2f0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Tarjeta blanca más grande */
body #tlajo-login-card-inner {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 520px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
}

/* Cabecera verde con logo */
body #tlajo-login-header {
  background: #002E06 !important;
  border-bottom: 4px solid #FC581A !important;
  padding: 1.75rem 2.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
}

body #tlajo-login-logo {
  height: 54px !important;
  width: auto !important;
}

body #tlajo-login-titles {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

body .tlajo-login-title {
  color: #ffffff !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

body .tlajo-login-subtitle {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* Cuerpo formulario */
body #tlajo-login-body {
  padding: 2.5rem 2.25rem 2rem !important;
  background: #ffffff !important;
}

body #tlajo-login-body label {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #444 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0.45rem !important;
}

body #tlajo-login-body input[type="text"],
body #tlajo-login-body input[type="password"] {
  width: 100% !important;
  height: 52px !important;
  padding: 0 1rem !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 1.05rem !important;
  color: #222 !important;
  background: #fafafa !important;
  margin-bottom: 1.35rem !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

body #tlajo-login-body input[type="text"]:focus,
body #tlajo-login-body input[type="password"]:focus {
  border-color: #FC581A !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(252,88,26,0.10) !important;
}

body .tlajo-login-btn {
  display: block !important;
  width: 100% !important;
  height: 54px !important;
  background: #FC581A !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  margin-top: 0.5rem !important;
  transition: background 0.2s, transform 0.1s !important;
}

body .tlajo-login-btn:hover {
  background: #d94610 !important;
}

body .tlajo-login-btn:active {
  transform: translateY(1px) !important;
}

body .tlajo-login-forgot {
  margin-top: 1.25rem !important;
  text-align: center !important;
}

body .tlajo-login-forgot a {
  color: #FC581A !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

body .tlajo-login-forgot a:hover {
  text-decoration: underline !important;
}

/* Footer verde institucional */
body #tlajo-login-footer {
  background-color: #002E06 !important;
  border-top: 3px solid #FC581A !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4rem !important;
  padding: 2.5rem 4rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
}

body .tlajo-footer-col {
  flex: 0 0 auto !important;
}

body .tlajo-footer-logo {
  height: 52px !important;
  width: auto !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

body .tlajo-footer-address {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.82rem !important;
  line-height: 1.7 !important;
  margin: 0 0 1rem !important;
}

body .tlajo-footer-social-label {
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.6rem !important;
}

body .tlajo-footer-social-icons {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
}

body .tlajo-footer-social-icons a {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  display: flex !important;
  transition: color 0.2s !important;
}

body .tlajo-footer-social-icons a:hover {
  color: #FC581A !important;
}

body .tlajo-footer-phone-label {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 0.3rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body .tlajo-footer-phone {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 0 1rem !important;
}

body .tlajo-footer-ext {
  margin-bottom: 6px !important;
}

body .tlajo-ext-badge {
  background: rgba(252,88,26,0.18) !important;
  border: 1px solid rgba(252,88,26,0.5) !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* Legal */
body #tlajo-login-legal {
  background-color: #001502 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  text-align: center !important;
  padding: 0.85rem 2rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

body #tlajo-login-legal p {
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.7rem !important;
  margin: 3px 0 !important;
}

@media (max-width: 768px) {
  body #tlajo-login-footer {
    gap: 2rem !important;
    padding: 2rem 1.5rem !important;
  }
  body #tlajo-login-card-inner {
    max-width: 100% !important;
  }
}