/******************************************
 * RUTA: assets/css/style.css
 * VERSIÓN: 2.0 - Unificada y optimizada
 * DESCRIPCIÓN: Estilos principales de la aplicación
 ******************************************/

/* ==========================================================================
   ÍNDICE DE CONTENIDOS
   ========================================================================== 
   1. ESTILOS GLOBALES Y ESTRUCTURA BASE
   2. ANIMACIONES Y TRANSICIONES
   3. BARRA DE NAVEGACIÓN (NAVBAR)
   4. MENÚ HAMBURGUESA
   5. BOTONES DE ACCIÓN
   6. MENÚ INFERIOR (Bottom Menu)
   7. TARJETAS (CARDS)
   8. FORMULARIOS
   9. TABLAS
   10. CONTENIDO MÓVIL
   11. SIGPAC, MAPAS Y EDICIÓN
   12. MODALES
   13. GPS
   14. VERSIONES
   15. TEMA OSCURO
   16. DEBUG Y RESPONSIVE
   17. VISOR DE LOGS
   ========================================================================== */


/* ==========================================================================
   1. ESTILOS GLOBALES Y ESTRUCTURA BASE
   ========================================================================== */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-bottom: 55px; /* Espacio para el menú inferior */
    background-color: #f5f5f5;
}

/* Forzar que el contenido principal sea interactivo */
body:not(.modal-open) * {
    pointer-events: auto !important;
}

/* Clase para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Estilos responsivos generales */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }
    .card-title {
        font-size: 1.2rem;
    }
    
    /* Prevenir zoom automático en iOS al hacer focus en inputs */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    textarea,
    select,
    .form-control,
    .form-select,
    .form-control-sm {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   2. ANIMACIONES Y TRANSICIONES
   ========================================================================== */

/* Animación de aparición */
.fade-in {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}


/* ==========================================================================
   3. BARRA DE NAVEGACIÓN (NAVBAR)
   ========================================================================== */

.navbar-brand {
    display: flex;
    align-items: stretch;
}

.app-year {
    font-size: 0.8em;
    color: yellow;
    opacity: 0.8;
    margin-left: 5px;
}


/* ==========================================================================
   4. MENÚ HAMBURGUESA
   ========================================================================== */

.menu-hamburguesa {
    margin-right: 10px;
    position: relative;
}

.menu-hamburguesa button {
    border: none;
    background: none;
    color: white;
    font-size: 1.5rem;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    position: relative;
}

.menu-hamburguesa button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Animación del icono hamburguesa */
.hamburger-icon {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 16px;
}

.hamburger-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: white;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.hamburger-icon span:nth-child(1) { top: 0px; }
.hamburger-icon span:nth-child(2),
.hamburger-icon span:nth-child(3) { top: 7px; }
.hamburger-icon span:nth-child(4) { top: 14px; }

.hamburger-icon.active span:nth-child(1) { top: 7px; width: 0%; left: 50%; }
.hamburger-icon.active span:nth-child(2) { transform: rotate(45deg); }
.hamburger-icon.active span:nth-child(3) { transform: rotate(-45deg); }
.hamburger-icon.active span:nth-child(4) { top: 7px; width: 0%; left: 50%; }

/* Menú desplegable */
.menu-dropdown {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1500;
    border-radius: 8px;
    top: 100%;
    left: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;
    overflow: hidden;
}

@media (max-width: 768px) {
    .menu-dropdown {
        left: 0;
        right: auto;
    }
}

.menu-dropdown.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.menu-dropdown a {
    color: #333;
    padding: 3px 10px;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s, padding-left 0.2s;
    border-left: 3px solid transparent;
}

.menu-dropdown a:hover {
    background-color: #f1f1f1;
    padding-left: 20px;
    border-left: 3px solid #4CAF50;
}

.menu-dropdown hr {
    margin: 1px 0;
}

/* Evitar conflictos con Bootstrap */
.navbar .container .navbar-brand .menu-hamburguesa .menu-dropdown {
    display: none !important;
}

.navbar .container .navbar-brand .menu-hamburguesa .menu-dropdown.active {
    display: block !important;
}


/* ==========================================================================
   5. BOTONES DE ACCIÓN
   ========================================================================== */

/* Estilos base para los botones de menú */
.menu-action-btn {
    color: #4CAF50;
    background-color: white;
    border: 2px solid #4CAF50;
    border-radius: 1px;
    padding: 2px 10px;
    font-weight: 500;
    transition: all 0.3s;
}

/* Cuando el botón de menú está dentro de un enlace menu-item */
.menu-item.menu-action-btn {
    display: block;
    text-decoration: none;
    font-size: 8px;
    color: #4CAF50;
    background-color: white;
    border: 2px solid #4CAF50;
    border-radius: 10px;
    padding: 1px 3px;
    font-weight: 500;
    transition: all 0.3s;
    margin: 0 auto;
    gap: 0px;
}

/* Cuando es un botón tipo submit */
button.menu-action-btn {
    border: 2px solid #4CAF50;
    background-color: white;
    color: #4CAF50;
    width: 90%;
    font-size: 8px;
    cursor: pointer;
}

/* Efectos hover para todos los tipos */
.menu-action-btn:hover, 
.menu-item.menu-action-btn:hover,
button.menu-action-btn:hover {
    background-color: #4CAF50;
    color: white;
}

/* Botones en el encabezado de las cards */
.header-btn {
    border: none;
    color: white;
    padding: 0.20rem 0.4rem;
    margin: 0 1px;
    font-size: 0.8rem;
}

.header-btn-primary { background-color: rgba(0, 123, 255, 0.8); }
.header-btn-primary:hover { background-color: #0056b3; color: white; }

.header-btn-warning { background-color: rgba(255, 193, 7, 0.8); }
.header-btn-warning:hover { background-color: #d39e00; color: white; }

.header-btn-danger { background-color: rgba(220, 53, 69, 0.8); }
.header-btn-danger:hover { background-color: #bd2130; color: white; }


/* ==========================================================================
   6. MENÚ INFERIOR (Bottom Menu)
   ========================================================================== */

.bottom-menu {
    background-color: #b0afaf !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 3px 0 !important;
    height: 40px !important;
}

.bottom-menu .row {
    height: 100%;
    margin-left: -10px;
    margin-right: -10px;
}

.bottom-menu .col-3, 
.bottom-menu .col-4, 
.bottom-menu .col-6 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    padding-right: 2px;
}

.menu-icon {
    font-size: 10px;  
    margin-bottom: 0px; 
    margin-top: 3px;  
}

.menu-text {
    font-size: 10px;  
    margin-top: 2px;  
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.menu-item:hover, 
.menu-item.active {
    color: #4CAF50;
}

/* Estilos de navegación adicionales (index parcela) */
.bottom-nav {
    height: 60px;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
}

.bottom-nav-item.active {
    color: #007bff;
}

.bottom-nav-item:hover {
    background-color: #f8f9fa;
    color: #007bff;
    text-decoration: none;
}

.bottom-nav-item i {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.bottom-nav-item span {
    font-size: 0.8rem;
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 360px) {
    .bottom-menu {
        padding: 3px 0;
    }
    .menu-icon {
        font-size: 16px;
        margin-bottom: 2px !important;
    }
    .menu-text {
        font-size: 10px;
    }
}


/* ==========================================================================
   7. TARJETAS (CARDS)
   ========================================================================== */

.card {
    border-radius: 0.375rem; /* Radio estándar de Bootstrap */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    border-width: 1px !important;
}

.card:hover {
    /*transform: translateY(-1px);*/
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-width: 1px !important;
    border-color: #333 !important;
}

/* Cards clickeables */
.card-clickable {
    transition: all 0.3s ease;
    border-width: 3px !important;
}

.card-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    border-width: 2px !important;
    border-color: #dee2e6 !important; /* Color gris claro de Bootstrap */
}

.card-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    text-decoration: none;
    color: transparent;
}

.card-link-overlay:hover {
    text-decoration: none;
    color: transparent;
}

/* Headers de tarjetas */
.card-header-parcela {
    background-color: #b6b4b4;
}

.card-header-compact {
    padding: 0.3rem 0.75rem !important;
    line-height: 1.2;
}

.card-footer {
    border-top: 1px solid #eee;
}

/* Cuerpo de tarjeta compactado */
.card .card-body {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.card-body .col-md-6 p {
    margin-bottom: 0.1rem !important;
    line-height: 1.2 !important;
    font-size: 0.9rem;
}

.card-body i.me-2 {
    margin-right: 0.25rem !important;
}

/* Alineación de campos en vista de detalles de contabilidad */
/*
.card-body p strong {
    display: inline-block;
    min-width: 150px;
}
*/

/* Alineación de campos en detalles de contabilidad - views/contabilidad/view.php */
.detalle-contabilidad p strong {
    display: inline-block;
    min-width: 120px;
}

/* Textos adaptables */
.text-adaptable {
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}

.text-contrast-dark {
    color: #212529 !important;
}

/* Tickets */
.bg-success.bg-opacity-10 {
    background-color: rgba(25, 135, 84, 0.1) !important;
}

/* Sección de archivos */
.archivos-section .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.archivos-section .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Efecto hover para el icono del paperclip */
a i.fa-paperclip:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}


/* ==========================================================================
   8. FORMULARIOS
   ========================================================================== */

.form-control, 
.form-select, 
.btn, 
.alert {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

.btn-success {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.btn-success:hover {
    background-color: #3e8e41;
    border-color: #3e8e41;
}

.btn-file {
    background-color: #fcece9;
    border-color: #4CAF50;
}

.btn-file:hover {
    background-color: #febfb2;
    border-color: #3e8e41;
}

.year-btn {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: transparent;
}

.year-btn:hover {
    border-color: #007bff;
}

.year-selector {
    width: 80px;
}

/* Badges */
.badge-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Niveles */
.level-indicator {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    margin-right: 10px;
}
.level-1 { background-color: #4CAF50; }
.level-2 { background-color: #2196F3; }
.level-3 { background-color: #E91E63; }

/* Iconos de archivos */
.fa-file-pdf { color: #dc3545 !important; }
.fa-file-image { color: #28a745 !important; }
.fa-file { color: #6c757d !important; }


/* ==========================================================================
   9. TABLAS
   ========================================================================== */

.table {
    font-size: 0.85rem;
}

.table th {
    font-size: 0.85rem;
    font-weight: 600;
}

.table thead th {
    background-color: #f8f9fa;
    color: #495057;
}

.table td {
    font-size: 0.85rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.table .badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

.table .btn-group-sm .btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
}

.table .btn-group-sm .btn i {
    font-size: 0.75rem;
}

/* Tabla compacta */
.table-compact {
    font-size: 0.8rem;
}

.table-compact th, 
.table-compact td {
    padding: 0.3rem 0.5rem;
}

.table-compact .badge {
    font-size: 0.7rem;
}

.table.table-hover {
    margin-bottom: 0;
    border-collapse: collapse;
}

.table.table-hover td, 
.table.table-hover th {
    line-height: 1.2;
}

.table .btn-group-sm {
    gap: 0.1rem;
}

.table-responsive {
    border-radius: 0.375rem;
    overflow-x: auto;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: #f8f9fa !important;
}

/* Alineación monetaria */
.money-amount {
    font-family: 'Courier New', monospace;
    min-width: 100px;
}

/* Tabla small para totales */
.table-sm td {
    padding: 0.1rem 0.25rem !important;
    line-height: 1.2 !important;
}

/* Clases de visibilidad para tablas responsive */
@media (max-width: 768px) {
    .desktop-only { 
        display: none !important; 
    }
    .mobile-only { 
        display: table-cell !important; 
        width: 100% !important; 
        padding: 0 !important; 
        border-radius: 15px; 
    }
    .table-responsive table { 
        min-width: auto !important; 
    }
    
    /* Facilidad táctil */
    .table a {
        padding: 0.2rem 0;
        display: inline-block;
        min-height: 24px;
    }

    /* Columnas específicas contabilidad */
    .col-fecha { width: 15%; min-width: 60px; }
    .col-tipo { width: 8%; min-width: 30px; text-align: center; }
    .col-concepto { width: 30%; min-width: 80px; }
    .col-importe { width: 18%; min-width: 70px; text-align: right; font-weight: 600; }
    .col-parcela { width: 15%; min-width: 60px; }
    .col-actividad { width: 15%; min-width: 60px; }
    .col-acciones { width: 12%; min-width: 50px; }
    
    .text-truncate-mobile {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .badge-sm {
        font-size: 0.7rem;
        padding: 0.15rem 0.3rem;
    }
    
    .btn-xs {
        padding: 0.1rem 0.3rem;
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    .btn-xs i { 
        font-size: 0.7rem; 
    }
    
    /* Tabla más compacta en móviles */
    .table { 
        font-size: 0.75rem; 
    }
    .table th, 
    .table td { 
        padding: 0.25rem 0.15rem; 
        vertical-align: middle; 
    }
    
    .btn-group-vertical .btn { 
        width: 100%; 
        margin-bottom: 2px; 
    }

    @media (max-width: 480px) {
        .col-actividad { display: none; }
        .col-concepto { width: 40%; }
        .col-importe { width: 25%; }
        .col-acciones { width: 15%; }
    }
    
    @media (max-width: 360px) {
        .col-parcela { display: none; }
        .col-concepto { width: 45%; }
        .col-importe { width: 30%; }
    }
}

@media (min-width: 769px) {
    .mobile-only { 
        display: none !important; 
    }
    .desktop-only { 
        display: table-cell !important; 
    }
}


/* ==========================================================================
   10. CONTENIDO MÓVIL (Vistas de lista)
   ========================================================================== */

.mobile-content {
    border: 1px solid #dee2e6;
    border-radius: 8px; /* 15 --------------------------------------------------------*/
    padding: 0 !important;
    margin: 2px 0;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mobile-header {
    background-color: #f8f9fa;
    padding: 2px 4px;
    margin: -1px 0 0 0;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.7rem;
}

.mobile-header .fecha-movil {
    color: #ffc107 !important;
}

.mobile-body {
    padding: 2px 4px 4px 4px;
    font-size: 0.8rem;
}

.mobile-body .header-info {
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
}

.mobile-body .header-info .concepto,
.mobile-body .header-info .descripcion {
    font-size: 0.7rem !important;
    margin-bottom: 0.1rem;
    font-weight: 500;
    line-height: 1.2;
}

.mobile-body .footer-info {
    font-size: 0.7rem;
    margin-top: 0.1rem;
    margin-bottom: 0;
}

.mobile-body .footer-info .actividad-info {
    font-size: 0.65rem;
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

.mobile-body .footer-info .actividad-info a {
    font-size: 0.65rem;
    text-decoration: none;
    margin: 0;
    padding: 0;
    display: inline;
}

.mobile-body .tipo-badge-row {
    margin: 0;
    padding: 0;
}

.mobile-body .fechas {
    font-size: 0.65rem;
    color: #6c757d;
    margin-top: 0.1rem;
    line-height: 1.1;
}

.mobile-body .fechas i {
    font-size: 0.6rem;
}

.float-end.parcela-nombre,
.float-end .parcela-nombre {
    font-size: 0.7rem;
    color: black;
}


/* ==========================================================================
   11. SIGPAC, MAPAS Y EDICIÓN DE PARCELAS
   ========================================================================== */

/* Bloqueo y Desbloqueo de Campos */
.sigpac-locked {
    background-color: #e9ecef !important; 
    color: #212529 !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

.sigpac-locked:focus {
    background-color: #e9ecef !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.sigpac-indicator { 
    margin-left: 5px; 
}
.sigpac-indicator .fa-lock { 
    font-size: 0.8em; 
    opacity: 0.7; 
}
.sigpac-indicator .text-info { 
    filter: brightness(0.8); 
}

.sigpac-locked[title]:hover::after {
    content: attr(title);
    position: absolute;
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    white-space: nowrap;
    margin-top: -35px;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.manual-edit {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
}

.manual-edit:focus {
    background-color: #fff3cd !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

/* Contenedores de desbloqueo */
#sigpacUnlockContainer {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 5px;
    padding: 10px;
    margin: 15px 0;
}

#btnDesbloquearSigpac:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.bloqueado-inicial {
    cursor: not-allowed;
    border-color: #ffc107 !important;
    background-color: #e9ecef !important;
    color: #212529 !important;
}

.bloqueado-inicial:focus {
    background-color: #f8f9fa !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

.bloqueo-indicator { 
    margin-left: 5px; 
}
.bloqueo-indicator .fa-lock { 
    font-size: 0.8em; 
    opacity: 0.8; 
}
.bloqueo-indicator .text-warning { 
    filter: brightness(0.8); 
}

#desbloqueoManualContainer {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.1);
    animation: fadeInUp 0.5s ease-out;
}

#btnDesbloquearManual { 
    min-width: 200px; 
    font-weight: 500; 
}
#btnDesbloquearManual:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2);
}

.sigpac-unlocked {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
}

/* Tooltip para bloqueado inicial */
.bloqueado-inicial[title]:hover::after {
    content: attr(title);
    position: absolute;
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    white-space: nowrap;
    margin-top: -35px;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.bloqueado-inicial.is-invalid,
.sigpac-locked.is-invalid {
    border-color: #dc3545;
    background-color: #f8d7da !important;
}

.bloqueado-inicial::placeholder,
.sigpac-locked::placeholder {
    color: #6c757d;
    opacity: 0.8;
}

/* Paneles de Búsqueda y Mapas */
.search-panel {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    height: 500px;
    overflow-y: auto;
}
.search-panel h6 { 
    color: #0d6efd; 
    margin-bottom: 15px; 
}
.search-panel .alert { 
    font-size: 0.8rem; 
    padding: 8px 12px; 
    margin-bottom: 15px; 
}
.search-panel .form-label { 
    font-weight: 600; 
    color: #495057; 
    margin-bottom: 4px; 
}
.search-panel .form-control-sm { 
    font-size: 0.875rem; 
}

#parcelaDetalle {
    background: white;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
}
#parcelaDetalle .info-item { 
    margin-bottom: 5px; 
}
#parcelaDetalle .info-label { 
    font-weight: bold; 
    color: #495057; 
}

.parcela-info-box {
    background: white;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
    max-height: 200px;
    overflow-y: auto;
}
.parcela-info-box .info-item { 
    margin-bottom: 5px; 
    display: flex; 
    justify-content: space-between; 
}
.parcela-info-box .info-label { 
    font-weight: bold; 
    color: #495057; 
    margin-right: 5px; 
}
.parcela-info-box .info-value { 
    color: #212529; 
}

/* Tabs SIGPAC */
.tab-buttons { 
    display: flex; 
    border-bottom: 2px solid #d1d5db; 
    margin-bottom: 1rem; 
}
.tab-button { 
    padding: 0.5rem 1rem; 
    background: #f3f4f6; 
    border: 1px solid #d1d5db; 
    cursor: pointer; 
    font-weight: 600; 
    color: #6b7280; 
    border-bottom: none;
}
.tab-button.active { 
    background: white; 
    color: #3b82f6; 
    border-bottom: 2px solid white; 
    transform: translateY(1px); 
}
.sigpac-tab-content { 
    display: none; 
}
.sigpac-tab-content.active { 
    display: block; 
}

/* Toasts (Notificaciones) */
.sigpac-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 99999 !important;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    max-width: 300px;
}

.sigpac-toast.show { 
    opacity: 1; 
    transform: translateX(0); 
}
.sigpac-toast.error { 
    background: #dc3545; 
}
.sigpac-toast.warning { 
    background: #ffc107; 
    color: #212529; 
}
.sigpac-toast.info { 
    background: #17a2b8; 
}

/* Mapas y Popups */
#mapSigpac {
    position: relative !important;
    width: 100% !important;
    height: 500px !important;
}

.custom-popup { 
    z-index: 1000; 
}
.custom-popup .leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 2px solid #007bff;
}
.custom-popup .leaflet-popup-tip {
    background: #007bff;
    border: none;
    width: 12px;
    height: 12px;
}
.custom-popup .leaflet-popup-tip-container { 
    margin-top: -1px; 
}
.custom-popup .leaflet-popup-content {
    margin: 12px 16px;
    line-height: 1.4;
    font-size: 13px;
    max-height: 300px;
    overflow-y: auto;
}
.custom-popup .btn {
    font-size: 12px;
    padding: 6px 12px;
    margin-top: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.custom-popup .btn:hover { 
    transform: translateY(-1px); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
}
.custom-popup hr { 
    border: none; 
    border-top: 1px solid #dee2e6; 
    margin: 8px 0; 
}

/* Marca de agua mapa */
.info-watermark {
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .info-watermark { 
        font-size: 12px; 
        padding: 6px 0; 
    }
}

/* Modales y Secciones Ocultas */
#sigpacModal { 
    z-index: 1050; 
}
.modal-backdrop { 
    z-index: 1040; 
}
body.modal-open { 
    overflow: auto !important; 
    padding-right: 0 !important; 
}

#emergency-button { 
    z-index: 99999 !important; 
    font-size: 12px !important; 
}

.container, 
.card, 
.form-control, 
.btn {
    position: relative;
    z-index: auto;
}

#sigpacSection {
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

#sigpacSection:not([style*="display: none"]) {
    opacity: 1;
    transform: translateY(0);
}

#sigpacSection .card-body .row { 
    align-items: center; 
}
#sigpacSection .btn { 
    min-width: 150px; 
}

#ubicacionSeleccionada { 
    font-weight: 600; 
}
#ubicacionSigpacInfo { 
    font-weight: 600; 
    color: #0d6efd; 
}


/* ==========================================================================
   12. MODALES (Cookies, Política)
   ========================================================================== */

.modal-dialog-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

.modal-dialog-bottom .modal-content {
    border-radius: 15px 15px 0 0;
    border: none;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
    font-size: 0.85rem;
}

.modal-dialog-bottom .modal-header { 
    padding: 0.75rem 1rem 0.5rem 1rem; 
}
.modal-dialog-bottom .modal-body { 
    padding: 0.5rem 1rem; 
}
.modal-dialog-bottom .modal-footer { 
    padding: 0.5rem 1rem 0.75rem 1rem; 
}
.modal-dialog-bottom .modal-title { 
    font-size: 1rem; 
}
.modal-dialog-bottom .modal-body p { 
    font-size: 0.8rem; 
    margin-bottom: 0.75rem; 
}
.modal-dialog-bottom .btn { 
    font-size: 0.8rem; 
    padding: 0.4rem 0.8rem; 
}

.modal-dialog-bottom-full {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 10%;
    margin: 0;
    max-width: 100%;
    width: 100%;
    height: 90%;
}

.modal-dialog-bottom-full .modal-content {
    border-radius: 15px 15px 0 0;
    border: none;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
    font-size: 0.85rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-dialog-bottom-full .modal-body { 
    flex: 1; 
    overflow-y: auto; 
    font-size: 0.8rem; 
}
.modal-dialog-bottom-full .modal-header { 
    flex-shrink: 0; 
    padding: 0.75rem 1rem 0.5rem 1rem; 
}
.modal-dialog-bottom-full .modal-footer { 
    flex-shrink: 0; 
    padding: 0.5rem 1rem 0.75rem 1rem; 
}
.modal-dialog-bottom-full .modal-title { 
    font-size: 1rem; 
}
.modal-dialog-bottom-full .btn { 
    font-size: 0.8rem; 
    padding: 0.4rem 0.8rem; 
}


/* ==========================================================================
   13. COMPORTAMIENTO BOTÓN GPS
   ========================================================================== */

/* OCULTAR botón GPS por defecto (ordenadores) */
#btn_gps_principal,
.col-md-2:has(#btn_gps_principal) {
    display: none !important;
}

.col-md-2:has(#btn_gps_principal) .form-label,
#btn_gps_principal + small.text-muted,
#btn_gps_principal ~ small.text-muted {
    display: none !important;
}

#btn_gps_principal { 
    transition: all 0.3s ease; 
}
#btn_gps_principal:disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    cursor: not-allowed !important;
}
#btn_gps_principal:not(:disabled):hover {
    background-color: #198754 !important;
    border-color: #198754 !important;
    transform: translateY(-1px);
}

/* MOSTRAR solo en dispositivos móviles/touch */
@media only screen and (max-width: 768px) and (pointer: coarse), 
       (hover: none) and (pointer: coarse) {
    #btn_gps_principal { 
        display: block !important; 
    }
    .col-md-2:has(#btn_gps_principal) { 
        display: block !important; 
    }
    .col-md-2:has(#btn_gps_principal) .form-label { 
        display: block !important; 
    }
    #btn_gps_principal + small.text-muted,
    #btn_gps_principal ~ small.text-muted { 
        display: block !important; 
    }
}


/* ==========================================================================
   14. VERSIONES
   ========================================================================== */

/* Estilos para la página de versiones - Optimizado para móvil */
.version-banner {
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 10px;
    padding: 15px;
    color: white;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.version-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    animation: rotate 15s linear infinite;
    z-index: 1;
}

.version-title-container {
    position: relative;
    z-index: 2;
}

.version-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.version-subtitle {
    font-size: 1rem;
    opacity: 0.9;
}

.version-card {
    border: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.version-card:hover {
    transform: translateY(-5px);
}

.markdown {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    padding: 8px;
    font-size: 0.9rem;
}

.main-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #212529;
    text-align: center;
    margin-bottom: 25px;
}

.version-header-container {
    position: relative;
    margin-top: 30px;
}

.version-header {
    font-size: 1.4rem;
    font-weight: 700;
    color: #28a745;
    border-bottom: 2px solid #28a745;
    padding-bottom: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.version-tag {
    margin-right: 8px;
    color: #28a745;
    animation: bounceIn 1s;
    font-size: 1rem;
}

.version-date {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: normal;
    margin-left: 8px;
}

.change-category {
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 15px;
    margin-bottom: 8px;
    margin-left: 20px;
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.category-icon {
    margin-right: 8px;
    font-size: 1rem;
    flex-shrink: 0;
}

.change-category-feature {
    background-color: #e3f2fd;
    color: #0d6efd;
    border-left: 4px solid #0d6efd;
}

.change-category-improvement {
    background-color: #e8f5e9;
    color: #28a745;
    border-left: 4px solid #28a745;
}

.change-category-bugfix {
    background-color: #fff3cd;
    color: #ffc107;
    border-left: 4px solid #ffc107;
}

.change-category-release {
    background-color: #f8d7da;
    color: #dc3545;
    border-left: 4px solid #dc3545;
}

.change-category-info {
    background-color: #e2e3e5;
    color: #6c757d;
    border-left: 4px solid #6c757d;
}

.change-item {
    padding: 6px 0 6px 45px;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.change-item:hover {
    transform: translateX(8px);
    background-color: rgba(40, 167, 69, 0.05);
}

.change-bullet {
    display: inline-block;
    color: #28a745;
    font-size: 1rem;
    margin-right: 6px;
    position: absolute;
    left: 28px;
    top: 6px;
}

.current-version-badge {
    position: absolute;
    top: -5px;
    background-color: #dc3545;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.75rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
    animation: pulse 2s infinite;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

.btn-hover-effect {
    transition: all 0.3s ease;
}

.btn-hover-effect:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Design - Optimización para móvil */
@media (max-width: 768px) {
    .version-title {
        font-size: 1.5rem;
    }
    
    .version-subtitle {
        font-size: 0.9rem;
    }
    
    .main-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .version-header {
        font-size: 1.2rem;
        padding-bottom: 4px;
        margin-bottom: 12px;
    }
    
    .version-date {
        font-size: 0.7rem;
        margin-left: 5px;
        display: block;
        width: 100%;
        margin-top: 2px;
    }
    
    .change-category {
        font-size: 0.85rem;
        padding: 3px 8px;
        margin-top: 12px;
        margin-bottom: 6px;
        margin-left: 15px;
    }
    
    .category-icon {
        font-size: 0.9rem;
        margin-right: 6px;
    }
    
    .change-item {
        padding: 4px 0 4px 35px;
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    .change-bullet {
        font-size: 0.9rem;
        left: 20px;
        top: 4px;
    }
    
    .current-version-badge {
        position: relative;
        top: 0;
        right: auto;
        margin-bottom: 10px;
        display: inline-block;
        padding: 3px 10px;
        font-size: 0.7rem;
    }
    
    .version-header-container {
        margin-top: 20px;
    }
    
    .markdown {
        padding: 5px;
        font-size: 0.85rem;
    }
    
    .card-body {
        padding: 15px;
    }
    
    /* Hover effects disabled on mobile */
    .change-item:hover {
        transform: none;
        background-color: transparent;
    }
    
    .version-card:hover {
        transform: none;
    }
    
    .btn-hover-effect:hover {
        transform: none;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .version-title {
        font-size: 1.3rem;
    }
    
    .main-title {
        font-size: 1.3rem;
    }
    
    .version-header {
        font-size: 1.1rem;
    }
    
    .change-category {
        font-size: 0.8rem;
        padding: 3px 6px;
        margin-left: 10px;
    }

    .change-item {
        padding: 3px 0 3px 30px;
        font-size: 0.8rem;
    }
    
    .change-bullet {
        left: 15px;
    }
    
    .markdown {
        font-size: 0.8rem;
    }
    
    .card-body {
        padding: 12px;
    }
    
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }
}
/* Responsive para móviles */
@media (max-width: 768px) {
    .version-title {
        font-size: 1.5rem;
    }
    
    .version-subtitle {
        font-size: 0.9rem;
    }
    
    .main-title {
        font-size: 1.5rem;
    }
    
    .version-header {
        font-size: 1.2rem;
    }
    
    .markdown {
        font-size: 0.85rem;
    }
}


/* ==========================================================================
   14.5. TABLAS DE INFORMACIÓN PROFESIONALES (Parcelas View)
   ========================================================================== */

/* Estilos para tablas de información profesionales */
.info-table td,
.sigpac-info-table td {
    padding: 0.15rem 0.5rem !important;
    line-height: 1.3 !important;
    vertical-align: top !important;
}

.info-table .label-col,
.sigpac-info-table .label-col {
    width: 200px;
    white-space: nowrap;
    padding-right: 1rem !important;
}

.info-table .value-col,
.sigpac-info-table .value-col {
    color: #495057;
}

.sigpac-info-table {
    font-size: 0.95rem;
}

/* Reducir padding del card de SIGPAC */
.card-body .sigpac-info-table {
    margin-bottom: 0 !important;
}

/* Separador especial para totales */
.sigpac-info-table tr.border-top td {
    border-top: 2px solid #dee2e6 !important;
    padding-top: 0.5rem !important;
}

.dark-theme .sigpac-info-table tr.border-top td {
    border-top-color: #555 !important;
}

/* ==========================================================================
   15. TEMA OSCURO (DARK THEME)
   ========================================================================== */

html.dark-theme,
html.dark-theme body,
body.dark-theme {
    background-color: #222;
    color: #f5f5f5;
}

/* Menús y Botones en Dark Theme */
.dark-theme .menu-action-btn,
.dark-theme .menu-item.menu-action-btn,
.dark-theme button.menu-action-btn {
    background-color: #2c632f !important;
    color: white !important;
    border-color: #4CAF50 !important;
}

.dark-theme .menu-action-btn:hover,
.dark-theme .menu-item.menu-action-btn:hover,
.dark-theme button.menu-action-btn:hover {
    background-color: #4CAF50 !important;
    color: white !important;
    border-color: #4CAF50 !important;
}

.dark-theme .menu-action-btn:focus,
.dark-theme .menu-item.menu-action-btn:focus,
.dark-theme button.menu-action-btn:focus {
    background-color: #4CAF50 !important;
    color: white !important;
    border-color: #4CAF50 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
}

.dark-theme .navbar { background-color: #2c632f !important; }

.dark-theme .bottom-menu {
    background-color: #333;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.dark-theme .bottom-menu .menu-item { color: #aaa; }
.dark-theme .bottom-menu .menu-item:hover,
.dark-theme .bottom-menu .menu-item.active { color: #4CAF50; }

/* Dropdown menu en Dark Theme */
.dark-theme .menu-dropdown {
    background-color: #333;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.dark-theme .menu-dropdown a {
    color: #f5f5f5;
}

.dark-theme .menu-dropdown a:hover {
    background-color: #444;
    border-left-color: #4CAF50;
}

.dark-theme .menu-dropdown hr {
    border-color: #555;
}

/* Cards y Contenedores */
.dark-theme .card { background-color: #333; border-color: #444; }
.dark-theme .card-header { border-bottom-color: #444; color: #ffc107; }
.dark-theme .card-title { color: #ffc107; }
.dark-theme .card-footer { border-top-color: #444; background-color: #333; }

.dark-theme .card-header-parcela {
    background-color: #444;
    color: #ffc107 !important;
}
.dark-theme .card-header-parcela h5 { color: #ffc107 !important; }

/* Hover de cards en modo oscuro */
.dark-theme .card:hover {
    border-color: #f8f9fa !important; /* Blanco/gris muy claro para modo oscuro */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.dark-theme .card-clickable:hover {
    border-color: #e9ecef !important; /* Gris claro para modo oscuro */
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* Formularios Dark */
.dark-theme .form-control,
.dark-theme .form-select {
    background-color: #444;
    border-color: #555;
    color: #f5f5f5;
}

.dark-theme .form-control:focus,
.dark-theme .form-select:focus {
    background-color: #555;
    color: #f5f5f5;
}

.dark-theme label,
.dark-theme .form-label,
.dark-theme .form-check-label { color: #ffc107; }

/* Modales y Listas */
.dark-theme .modal-content { background-color: #333; border-color: #444; }
.dark-theme .modal-header,
.dark-theme .modal-footer { border-color: #444; }

.dark-theme .list-group-item {
    background-color: #333;
    border-color: #444;
    color: #f5f5f5;
}
.dark-theme .list-group-item-action:hover,
.dark-theme .list-group-item-action:focus {
    background-color: #444;
    color: #f5f5f5;
}
.dark-theme .list-group-item .text-muted,
.dark-theme .text-muted { color: #aaa !important; }

/* Tabs */
.dark-theme .nav-tabs { border-bottom-color: #444; }
.dark-theme .nav-tabs .nav-link { color: #aaa; }
.dark-theme .nav-tabs .nav-link:hover { border-color: #555 #555 #444; color: #f5f5f5; }
.dark-theme .nav-tabs .nav-link.active {
    background-color: #333;
    border-color: #444 #444 #333;
    color: #f5f5f5;
}

/* Tablas Dark */
.dark-theme .table th { color: #ffc107; border-color: #444; background-color: #2d2d2d; }
.dark-theme .table td { color: #f5f5f5; border-color: #444; }

.dark-theme .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}
.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * { color: #f5f5f5; }

.dark-theme .table-hover > tbody > tr:hover > * {
    color: #f5f5f5 !important;
    background-color: #3a3a3a !important;
    --bs-table-hover-bg: #3a3a3a !important;
}
.dark-theme .table-hover > tbody > tr { transition: background-color 0.15s ease-in-out; }

.dark-theme .table > tbody > tr {
    background-color: #333 !important;
    --bs-table-bg: #333 !important;
    --bs-table-striped-bg: #2a2a2a !important;
    --bs-table-hover-bg: #3a3a3a !important;
}
.dark-theme .table > tbody > tr > td { background-color: inherit !important; }

.dark-theme .table-light {
    background-color: #444 !important;
    color: #f5f5f5 !important;
}
.dark-theme .table-light th,
.dark-theme .table-light td {
    background-color: #444 !important;
    color: #f5f5f5 !important;
}

/* Tablas responsive en modo oscuro - tarjetas móviles SOLO */
/* Desktop: sin bordes adicionales */
.dark-theme .table-responsive-mobile tbody tr {
    background-color: #333 !important;
    box-shadow: none; /* Sin sombra en desktop */
}

.dark-theme .table-responsive-mobile tbody tr:hover {
    box-shadow: none; /* Sin sombra en desktop */
}

/* Móvil: con bordes y sombras (dentro de media query en responsive-tables.css) */
@media (max-width: 767.98px) {
    .dark-theme .table-responsive-mobile tbody tr {
        background-color: #333 !important;
        border: 1px solid #0dcaf0 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .dark-theme .table-responsive-mobile tbody tr:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
        border-color: #31d2f2 !important;
    }

    .dark-theme .table-responsive-mobile .table tbody tr {
        background-color: #333 !important;
        border: 1px solid #0dcaf0 !important;
    }

    .dark-theme .table-responsive-mobile .table tbody tr:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
        border-color: #31d2f2 !important;
    }
}

/* Modo debug también - SOLO para móvil */
@media (max-width: 767.98px) {
    body.debug-mobile-view.dark-theme .table-responsive-mobile tbody tr {
        background-color: #333 !important;
        border: 1px solid #0dcaf0 !important;
    }

    body.debug-mobile-view.dark-theme .table-responsive-mobile tbody tr:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
        border-color: #31d2f2 !important;
    }
}

/* Botones y Alertas Dark */
.dark-theme .btn-outline-secondary { color: #bbb; border-color: #666; }
.dark-theme .btn-outline-secondary:hover { background-color: #444; color: #fff; border-color: #777; }

.dark-theme .alert-warning { background-color: #664d03; color: #ffda85; border-color: #816315; }
.dark-theme .alert-danger { background-color: #6a1a21; color: #ea868f; border-color: #842029; }
.dark-theme .alert-success { background-color: #0f5132; color: #75b798; border-color: #146c43; }

.dark-theme .bg-light { background-color: #444 !important; color: #f5f5f5; }
.dark-theme .bg-light .text-muted { color: #aaa !important; }

/* Vista Móvil Dark */
.dark-theme .mobile-content { background-color: #333; border-color: #444; }
.dark-theme .mobile-header { background-color: #444; border-bottom-color: #555; color: #f5f5f5; }
.dark-theme .mobile-body { color: #f5f5f5; }
.dark-theme .mobile-body .fechas { color: #ffc107 !important; }
.dark-theme .mobile-body .descripcion,
.dark-theme .mobile-body .header-info { color: #f5f5f5 !important; }
.dark-theme .mobile-body .header-info .concepto,
.dark-theme .mobile-body .footer-info { color: #f5f5f5; }
.dark-theme .float-end.parcela-nombre,
.dark-theme .float-end .parcela-nombre { color: #f5f5f5 !important; }
.dark-theme .mobile-body .parcela-nombre { color: #aaa; }
.dark-theme .mobile-body .footer-info .actividad-info a { color: #8ab4f8; }

/* Tablas de información en modo oscuro - Mayor especificidad */
.dark-theme .info-table tbody tr td.value-col,
.dark-theme .sigpac-info-table tbody tr td.value-col,
.dark-theme table.info-table .value-col,
.dark-theme table.sigpac-info-table .value-col {
    color: #ffd700 !important; /* Amarillo dorado visible */
}

.dark-theme .table-borderless tbody tr td {
    border-color: transparent !important;
}

.dark-theme .badge.bg-primary {
    background-color: #0d6efd !important;
}

.dark-theme .sigpac-info-table .text-muted,
.dark-theme .info-table .text-muted {
    color: #bbb !important;
}

/* Asegurar que los strong también se vean bien */
.dark-theme .info-table .label-col strong,
.dark-theme .sigpac-info-table .label-col strong {
    color: #f5f5f5 !important;
}

/* Versiones en modo oscuro */
[data-bs-theme="dark"] .markdown .change-item,
[data-bs-theme="dark"] .markdown-content .change-item,
[data-bs-theme="dark"] .card-body .change-item,
[data-bs-theme="dark"] .change-item {
    color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .markdown {
    color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .change-text {
    color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .markdown,
[data-bs-theme="dark"] .change-item,
[data-bs-theme="dark"] .change-text,
html[data-bs-theme="dark"] .markdown,
html[data-bs-theme="dark"] .change-item,
html[data-bs-theme="dark"] .change-text,
body[data-bs-theme="dark"] .markdown,
body[data-bs-theme="dark"] .change-item,
body[data-bs-theme="dark"] .change-text,
.dark-mode .markdown,
.dark-mode .change-item,
.dark-mode .change-text {
    color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .version-header {
    color: #5fd068;
    border-bottom-color: #5fd068;
}

[data-bs-theme="dark"] .version-tag {
    color: #5fd068;
}

[data-bs-theme="dark"] .version-date {
    color: #adb5bd;
}

[data-bs-theme="dark"] .change-bullet {
    color: #5fd068;
}

[data-bs-theme="dark"] .change-item:hover {
    background-color: rgba(40, 167, 69, 0.15);
}

[data-bs-theme="dark"] .main-title {
    color: #f5f5f5;
}

/* Categorías en modo oscuro */
[data-bs-theme="dark"] .change-category-feature {
    background-color: rgba(13, 110, 253, 0.2);
    color: #6ea8fe;
}

[data-bs-theme="dark"] .change-category-improvement {
    background-color: rgba(40, 167, 69, 0.2);
    color: #5fd068;
}

[data-bs-theme="dark"] .change-category-bugfix,
.dark-theme .change-category-bugfix {
    background-color: rgba(255, 193, 7);
    color: #000000;
}

[data-bs-theme="dark"] .change-category-release {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ea868f;
}

[data-bs-theme="dark"] .change-category-info {
    background-color: rgba(108, 117, 125, 0.2);
    color: #adb5bd;
}
/* ==========================================================================
   16. DEBUG Y RESPONSIVE
   ========================================================================== */

/* Modo debug móvil */
body.debug-mobile-view {
    max-width: 428px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

body.debug-mobile-view * {
    box-sizing: border-box !important;
}

/* Navbar en vista móvil */
body.debug-mobile-view .navbar,
body.debug-mobile-view .fixed-top {
    max-width: 428px !important;
    width: 428px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

/* Contenedores principales */
body.debug-mobile-view .container,
body.debug-mobile-view .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
}

/* Cards en modo debug */
body.debug-mobile-view .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Filas y columnas */
body.debug-mobile-view .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: calc(100% + 30px) !important;
}

body.debug-mobile-view .col,
body.debug-mobile-view [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Formularios en vista móvil */
body.debug-mobile-view .form-control,
body.debug-mobile-view .form-select,
body.debug-mobile-view .btn {
    width: 100% !important;
    max-width: 100% !important;
}

body.debug-mobile-view .form-group,
body.debug-mobile-view .mb-3 {
    margin-bottom: 1rem !important;
    width: 100% !important;
}

body.debug-mobile-view input[type="text"],
body.debug-mobile-view input[type="email"],
body.debug-mobile-view input[type="number"],
body.debug-mobile-view input[type="date"],
body.debug-mobile-view select,
body.debug-mobile-view textarea {
    font-size: 16px !important;
    width: 100% !important;
}

/* Footer en vista móvil */
body.debug-mobile-view footer {
    max-width: 428px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.debug-mobile-view footer .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

body.debug-mobile-view footer .row {
    margin: 0 !important;
    width: 100% !important;
}

body.debug-mobile-view footer .col-12 {
    padding: 0 !important;
    width: 100% !important;
}

/* Enlaces del footer en columna vertical */
body.debug-mobile-view footer .mb-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

body.debug-mobile-view footer a {
    display: block !important;
    margin-bottom: 0.5rem !important;
    margin-right: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

/* Modales adaptados al ancho móvil */
body.debug-mobile-view .modal-dialog {
    max-width: 95% !important;
    margin: 1rem auto !important;
    width: 95% !important;
}

body.debug-mobile-view .modal-dialog.modal-lg {
    max-width: 95% !important;
    width: 95% !important;
}

body.debug-mobile-view .modal-content {
    max-width: 100% !important;
}

/* Asegurar que modales respeten el ancho móvil */
body.debug-mobile-view .modal-dialog,
body.debug-mobile-view .modal-dialog.modal-lg,
body.debug-mobile-view .modal-dialog-bottom-full {
    max-width: 428px !important;
    width: 428px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Backdrop del modal en vista móvil */
body.debug-mobile-view .modal {
    max-width: 428px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body.debug-mobile-view .modal-backdrop {
    max-width: 428px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* BOTTOM MENU - Ajustes para vista móvil */
body.debug-mobile-view .bottom-menu,
body.debug-mobile-view .fixed-bottom {
    max-width: 428px !important;
    width: 428px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

/* Ajustar contenedor del menú */
body.debug-mobile-view .bottom-menu .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Forzar distribución uniforme de botones en el menú inferior */
body.debug-mobile-view .bottom-menu .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Botones del menú inferior - distribuir uniformemente */
body.debug-mobile-view .bottom-menu .col-2,
body.debug-mobile-view .bottom-menu .col-3,
body.debug-mobile-view .bottom-menu .col-4,
body.debug-mobile-view .bottom-menu .col-6,
body.debug-mobile-view .bottom-menu [class*="col-"] {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 3px !important;
    width: auto !important;
}

/* Asegurar que todos los botones tengan el mismo tamaño - ULTRA COMPACTOS */
body.debug-mobile-view .bottom-menu .menu-item,
body.debug-mobile-view .bottom-menu .menu-action-btn,
body.debug-mobile-view .bottom-menu a.menu-item,
body.debug-mobile-view .bottom-menu button.menu-action-btn {
    width: 100% !important;
    font-size: 7px !important;
    padding: 1px 0px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    max-height: 38px !important;
    gap: 0px !important;
    margin: 0 !important;
}

/* Iconos del menú - ULTRA PEQUEÑOS */
body.debug-mobile-view .bottom-menu .menu-icon,
body.debug-mobile-view .bottom-menu .menu-item .menu-icon,
body.debug-mobile-view .bottom-menu .menu-action-btn .menu-icon {
    font-size: 12px !important;
    margin-bottom: 0px !important;
    margin-top: 0 !important;
    line-height: 1 !important;
    height: 12px !important;
    display: block !important;
    padding: 0 !important;
}

body.debug-mobile-view .bottom-menu .menu-icon i,
body.debug-mobile-view .bottom-menu .menu-item .menu-icon i,
body.debug-mobile-view .bottom-menu .menu-action-btn .menu-icon i {
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Texto del menú - ULTRA PEQUEÑO */
body.debug-mobile-view .bottom-menu .menu-text,
body.debug-mobile-view .bottom-menu .menu-item .menu-text,
body.debug-mobile-view .bottom-menu .menu-action-btn .menu-text {
    font-size: 7px !important;
    line-height: 0.9 !important;
    text-align: center !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
}

/* Reducir padding del bottom menu completo */
body.debug-mobile-view .bottom-menu {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    min-height: 42px !important;
    max-height: 42px !important;
}

/* Reducir altura del contenedor del bottom-nav si existe */
body.debug-mobile-view .bottom-nav {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

/* Asegurar que las columnas del menú no añadan padding extra */
body.debug-mobile-view .bottom-menu .row {
    padding: 0 !important;
    margin: 0 !important;
}

/* Ajustar el indicador de nivel */
body.debug-mobile-view .level-indicator {
    font-size: 9px !important;
    padding: 2px 6px !important;
}

/* Botones del selector de año en móvil */
body.debug-mobile-view .bottom-menu .year-btn {
    padding: 8px 5px !important;
    font-size: 10px !important;
}

body.debug-mobile-view .bottom-menu .year-selector {
    width: 100% !important;
    max-width: 70px !important;
}

/* Evitar que elementos se salgan del contenedor */
body.debug-mobile-view * {
    max-width: 100%;
    box-sizing: border-box;
}

/* FORMULARIOS - Vista móvil para gastos y tablas */
body.debug-mobile-view .d-none.d-md-block,
body.debug-mobile-view .d-md-block {
    display: none !important;
}

/* Mostrar vista móvil de gastos/tarjetas */
body.debug-mobile-view .d-md-none {
    display: block !important;
}

/* Asegurar que las tarjetas de gastos se vean bien */
body.debug-mobile-view #gastosMobileContainer {
    display: block !important;
    width: 100% !important;
}

body.debug-mobile-view #gastosMobileContainer .card {
    width: 100% !important;
    margin-bottom: 1rem !important;
}

/* Ocultar tablas en modo debug móvil */
body.debug-mobile-view .table-responsive {
    display: none !important;
}

/* Forzar que los contenedores de formulario ocupen todo el ancho */
body.debug-mobile-view #contenedor_gastos {
    width: 100% !important;
}

/* Ajustar modales de gastos en móvil */
body.debug-mobile-view #modalGastoMobile .modal-dialog {
    max-width: 95% !important;
    margin: 1rem auto !important;
}

/* Botones de agregar en versión móvil */
body.debug-mobile-view .d-md-none .card.border-primary {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body.debug-mobile-view .d-md-none .card.border-primary:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px) !important;
}

/* Indicador visual de modo debug */
body.debug-mobile-view::before {
    content: "🔍 MODO DEBUG MÓVIL";
    position: fixed;
    top: 33px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffc107;
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    z-index: 9998;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Estilo del botón toggle cuando está activo */
#toggle-mobile-view.active {
    background-color: #ffc107 !important;
    color: #000 !important;
    border-color: #ffc107 !important;
}

@media (max-width: 767.98px) {
    .filtros-card {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 10;
    }
    
    .filtros-card .card-header {
        border-radius: 10;
    }
}

/* ==========================================================================
   16. DEBUG Y RESPONSIVE
   ========================================================================== */

.logs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.logs-modal-container {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.logs-modal-header {
    padding: 15px 20px;
    border-bottom: 2px solid #28a745;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.logs-modal-header h3 {
    margin: 0;
    color: #28a745;
    font-size: 1.3rem;
}

.logs-header-buttons {
    display: flex;
    gap: 10px;
}

.logs-modal-info {
    padding: 10px 20px;
    background: #e9ecef;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.9rem;
    color: #495057;
}

.logs-modal-body {
    flex: 1;
    overflow: auto;
    padding: 15px;
    background: #fff;
}

#logs-content {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 100%;
}

/* Modo oscuro */
.dark-theme .logs-modal-container {
    background: #1e1e1e;
}

.dark-theme .logs-modal-header {
    background: #2a2a2a;
    border-bottom-color: #4CAF50;
}

.dark-theme .logs-modal-header h3 {
    color: #4CAF50;
}

.dark-theme .logs-modal-info {
    background: #2a2a2a;
    border-bottom-color: #444;
    color: #e0e0e0;
}

.dark-theme .logs-modal-body {
    background: #1e1e1e;
}

.dark-theme #logs-content {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
    .logs-modal-container {
        height: 95vh;
        max-width: 100%;
    }
    
    .logs-modal-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .logs-header-buttons {
        width: 100%;
        justify-content: space-between;
    }
    
    .logs-header-buttons .btn {
        flex: 1;
        font-size: 0.85rem;
        padding: 5px 8px;
    }
    
    #logs-content {
        font-size: 11px;
        padding: 10px;
    }
    
    .logs-info-wrapper {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        align-items: center;
    }

    .logs-info-stats {
        display: flex;
        align-items: center;
        min-width: 0; /* Permite que el texto se contraiga */
    }

    .logs-info-stats span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logs-info-filters {
        display: flex;
        justify-content: flex-end;
    }

    /* Vista móvil - 2 filas */
    @media (max-width: 768px) {
        .logs-info-wrapper {
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }
        
        .logs-info-stats {
            justify-content: flex-start;
            font-size: 0.85rem;
        }
        
        .logs-info-filters {
            justify-content: center;
            width: 100%;
        }
        
        .logs-info-filters .btn-group {
            width: 100%;
            display: flex;
        }
        
        .logs-info-filters .btn-group .btn {
            flex: 1;
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
    }

    /* Vista muy pequeña - ajustes adicionales */
    @media (max-width: 480px) {
        .logs-info-stats span {
            font-size: 0.75rem;
        }
        
        .logs-info-filters .btn-group .btn {
            font-size: 0.7rem;
            padding: 0.2rem 0.3rem;
        }
    }
}
/* --- END OF FILE --- */