/**
 * Estilos para la vista Corregir Ubicación
 * Diseño moderno con cards, iconos y soporte para tema oscuro/claro
 */

/* ============================================
   OCULTAR SCROLLBAR EN TODA LA VISTA CORRIGE UBICACION
   ============================================ */

/* Ocultar scrollbar en TODOS los contenedores posibles */
/* PERMITIR EXPANSIÓN VERTICAL - NO LIMITAR ALTURA */
body.app.corrige-ubicacion-page {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE y Edge */
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Permitir expansión vertical */
    height: auto !important;
    min-height: 100vh !important;
}

body.app.corrige-ubicacion-page .page-container {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Permitir expansión vertical */
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
}

body.app.corrige-ubicacion-page .main-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Permitir expansión vertical */
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
}

body.app.corrige-ubicacion-page #mainContent,
body.app.corrige-ubicacion-page .masonry {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Permitir expansión vertical */
}

/* Ocultar scrollbar en Chrome, Safari y Opera para TODOS los contenedores */
body.app::-webkit-scrollbar,
body.app .page-container::-webkit-scrollbar,
body.app .main-content::-webkit-scrollbar,
body.app #mainContent::-webkit-scrollbar,
body.app .masonry::-webkit-scrollbar,
body.app .masonry-item::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Ocultar cualquier rail de scrollbar (Perfect Scrollbar u otros) */
body.app .ps__rail-y,
body.app .ps__rail-x,
body.app .page-container .ps__rail-y,
body.app .main-content .ps__rail-y {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Contenedor principal - asegurar que no se corte el contenido */
/* PERMITIR EXPANSIÓN COMPLETA - SIN SCROLL INTERNO */
#mainContent {
    padding-bottom: 60px !important;
    min-height: calc(100vh - 200px);
    height: auto !important; /* Permitir que crezca dinámicamente */
    max-height: none !important; /* Sin límite de altura máxima */
    overflow-x: hidden !important;
    overflow-y: visible !important; /* PERMITIR EXPANSIÓN - NO SCROLL INTERNO */
    /* Ocultar scrollbar visualmente */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE y Edge */
}

/* Ocultar scrollbar en Chrome, Safari y Opera */
#mainContent::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Ocultar scrollbar en el contenedor masonry y permitir expansión */
body.app.corrige-ubicacion-page #mainContent .masonry {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE y Edge */
    padding-bottom: 60px !important;
    margin-bottom: 60px !important;
    height: auto !important; /* Permitir que crezca dinámicamente */
    max-height: none !important; /* Sin límite de altura máxima */
    overflow: visible !important; /* Permitir que el contenido se vea */
    min-height: auto !important;
}

body.app.corrige-ubicacion-page #mainContent .masonry::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Asegurar que masonry-item pueda expandirse */
/* Usar position: relative en lugar de absolute para permitir expansión */
body.app.corrige-ubicacion-page #mainContent .masonry-item {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
}

body.app.corrige-ubicacion-page #mainContent .masonry-item:last-child {
    margin-bottom: 60px !important;
    padding-bottom: 20px !important;
}

/* Header Icon Badge */
.header-icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary, #4A90E2) 0%, #667eea 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
    transition: all 0.3s ease;
}

.header-icon-badge:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

/* Cards - Estilos base */
.bd.bgc-white {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid var(--c-border, #e5e7eb);
}

.bd.bgc-white:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Cards específicas para esta vista - EXPANSIÓN COMPLETA */
body.app.corrige-ubicacion-page .bd.bgc-white.p-20,
body.app.corrige-ubicacion-page .bd.bgc-white,
body.app.corrige-ubicacion-page .layers.bd.bgc-white.p-20 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    font-weight: 600;
    color: var(--c-text-base, #374151);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.form-label i {
    color: var(--c-primary, #4A90E2);
    margin-right: 5px;
}

.form-control {
    border: 2px solid var(--c-border, #e5e7eb);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--c-bkg-card, #fff);
    color: var(--c-text-base, #374151);
}

.form-control:focus {
    outline: none;
    border-color: var(--c-primary, #4A90E2);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    background: var(--c-bkg-card, #fff);
}

.form-control[readonly] {
    background-color: var(--c-bkg-sidebar, #f9fafb);
    cursor: not-allowed;
    opacity: 0.7;
}

.corrige-ubicacion-input-uppercase {
    text-transform: uppercase;
}

/* Input Group */
.input-group {
    display: flex;
    flex-wrap: wrap;
}

.input-group .form-control {
    flex: 1 1 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append {
    display: flex;
}

.input-group-append .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--c-primary, #4A90E2) 0%, #667eea 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-lg {
    padding: 12px 30px;
    font-size: 16px;
}

/* Reference Cards */
.card-reference {
    background: var(--c-bkg-sidebar, #f9fafb);
    border-radius: 10px;
    padding: 20px;
    border-left: 4px solid var(--c-primary, #4A90E2);
    transition: all 0.3s ease;
}

.card-reference:hover {
    background: var(--c-bkg-sidebar, #f0f4f8);
    transform: translateX(5px);
}

.card-reference-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text-base, #374151);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.card-reference-title i {
    color: var(--c-primary, #4A90E2);
    margin-right: 8px;
}

.card-reference-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reference-item {
    padding: 8px 12px;
    background: var(--c-bkg-card, #fff);
    border-radius: 6px;
    color: var(--c-text-base, #374151);
    font-size: 14px;
    border: 1px solid var(--c-border, #e5e7eb);
    transition: all 0.3s ease;
}

.reference-item strong {
    color: var(--c-primary, #4A90E2);
    margin-right: 8px;
}

/* Estilos para coordenadas clickeables */
.reference-item.clickable-coord {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.reference-item.clickable-coord .coord-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reference-item.clickable-coord .coord-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: var(--c-text-muted, #6b7280);
    font-size: 14px;
}

.btn-icon:hover {
    background: var(--c-bkg-sidebar, #f0f4f8);
    transform: scale(1.1);
}

.btn-edit-coord:hover {
    color: var(--c-primary, #4A90E2);
}

.btn-delete-coord:hover {
    color: #ef4444;
}

/* Modales para coordenadas */
.modal-coordenada {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal-coordenada-content {
    background-color: var(--c-bkg-card, #fff);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideDown 0.3s ease;
}

.modal-coordenada-header {
    padding: 20px;
    border-bottom: 1px solid var(--c-border, #e5e7eb);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-coordenada-header h5 {
    margin: 0;
    color: var(--c-text-base, #374151);
    font-size: 18px;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--c-text-muted, #6b7280);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-modal:hover {
    background: var(--c-bkg-sidebar, #f0f4f8);
    color: var(--c-text-base, #374151);
}

.modal-coordenada-body {
    padding: 20px;
}

.modal-coordenada-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--c-border, #e5e7eb);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

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

/* Tema oscuro para modales */
[data-theme="dark"] .modal-coordenada-content {
    background-color: var(--c-bkg-card, #2d3748);
    border-color: var(--c-border, #2b2f36);
}

[data-theme="dark"] .modal-coordenada-header,
[data-theme="dark"] .modal-coordenada-footer {
    border-color: var(--c-border, #2b2f36);
}

[data-theme="dark"] .modal-coordenada-header h5 {
    color: var(--c-text-base, #e8eaed);
}

[data-theme="dark"] .close-modal:hover {
    background: var(--c-bkg-sidebar, #1a1d24);
    color: var(--c-text-base, #e8eaed);
}

.reference-item.clickable-coord:hover {
    background: var(--c-primary-light-alpha, rgba(74, 144, 226, 0.1));
    border-color: var(--c-primary, #4A90E2);
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}

.reference-item.clickable-coord:active {
    transform: translateX(3px) scale(0.98);
}

.reference-item.clickable-coord .coord-values {
    font-family: 'Courier New', monospace;
    color: var(--c-text-base, #374151);
    font-weight: 500;
}

.reference-item.clickable-coord .coord-icon {
    color: var(--c-primary, #4A90E2);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.reference-item.clickable-coord:hover .coord-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Tema oscuro para coordenadas clickeables */
[data-theme="dark"] .reference-item.clickable-coord:hover {
    background: var(--c-primary-dark-alpha, rgba(74, 144, 226, 0.2));
    border-color: var(--c-primary, #4A90E2);
}

.command-code {
    display: block;
    padding: 10px 15px;
    background: var(--c-bkg-body, #1f2937);
    color: #10b981;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    margin-bottom: 8px;
    border: 1px solid var(--c-border, #374151);
}

/* Alerts */
.alert {
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: none;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.alert-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border-left: 4px solid #10b981;
}

.alert-info {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

.alert-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

.alert i {
    margin-right: 10px;
    font-size: 18px;
}

.alert .close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.alert .close:hover {
    opacity: 1;
}

/* Text Utilities */
.text-danger {
    color: #ef4444;
}

.text-muted {
    color: var(--c-text-muted, #6b7280);
    font-size: 13px;
}

/* Tema Oscuro */
[data-theme="dark"] .bd.bgc-white {
    background: var(--c-bkg-card, #2d3748);
    border-color: var(--c-border, #2b2f36);
    color: var(--c-text-base, #e8eaed);
}

[data-theme="dark"] .form-label {
    color: var(--c-text-base, #e8eaed);
}

[data-theme="dark"] .form-control {
    background: var(--c-bkg-card, #2d3748);
    color: var(--c-text-base, #e8eaed);
    border-color: var(--c-border, #2b2f36);
}

[data-theme="dark"] .form-control:focus {
    background: var(--c-bkg-body, #181a1f);
    border-color: var(--c-primary, #4A90E2);
}

[data-theme="dark"] .form-control[readonly] {
    background-color: var(--c-bkg-sidebar, #1a1d24);
}

[data-theme="dark"] .card-reference {
    background: var(--c-bkg-sidebar, #1a1d24);
    border-left-color: var(--c-primary, #4A90E2);
}

[data-theme="dark"] .card-reference:hover {
    background: var(--c-bkg-sidebar, #252a35);
}

[data-theme="dark"] .card-reference-title {
    color: var(--c-text-base, #e8eaed);
}

[data-theme="dark"] .reference-item {
    background: var(--c-bkg-card, #2d3748);
    color: var(--c-text-base, #e8eaed);
    border-color: var(--c-border, #2b2f36);
}

[data-theme="dark"] .command-code {
    background: var(--c-bkg-body, #111827);
    color: #10b981;
    border-color: var(--c-border, #2b2f36);
}

[data-theme="dark"] .alert-success {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    color: #d1fae5;
}

[data-theme="dark"] .alert-info {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    color: #dbeafe;
}

[data-theme="dark"] .alert-warning {
    background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
    color: #fef3c7;
}

[data-theme="dark"] .text-muted {
    color: var(--c-text-muted, #9ca3af);
}

/* Responsive */
@media (max-width: 768px) {
    .header-icon-badge {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .btn-lg {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .card-reference {
        padding: 15px;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group .form-control {
        border-radius: 8px;
        margin-bottom: 10px;
    }
    
    .input-group-append {
        width: 100%;
    }
    
    .input-group-append .btn {
        border-radius: 8px;
        width: 100%;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.masonry-item {
    animation: fadeIn 0.3s ease-out;
}

/* Loading State */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Asegurar que los botones de acción tengan espacio suficiente */
#mainContent .row.mT-30 {
    margin-bottom: 40px;
    padding-bottom: 20px;
}

/* CONTENEDORES DE TARJETAS - Asegurar expansión completa (consolidado) */
body.app.corrige-ubicacion-page #mainContent .bd.bgc-white.p-20,
body.app.corrige-ubicacion-page #mainContent .bd.bgc-white,
body.app.corrige-ubicacion-page #mainContent .layers.bd.bgc-white.p-20 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Asegurar que el formulario dentro del card también se expanda */
body.app.corrige-ubicacion-page #mainContent .bd.bgc-white form {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
}

/* Asegurar que todos los elementos dentro del card puedan expandirse */
body.app.corrige-ubicacion-page #mainContent .bd.bgc-white .row {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.app.corrige-ubicacion-page #mainContent .bd.bgc-white .card-reference {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Asegurar que los contenedores padre permitan expansión COMPLETA */
body.app.corrige-ubicacion-page .main-content {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* PERMITIR EXPANSIÓN VERTICAL */
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
}

body.app.corrige-ubicacion-page .page-container {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* PERMITIR EXPANSIÓN VERTICAL */
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
}

/* Asegurar que el body también permita expansión */
body.app.corrige-ubicacion-page {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* PERMITIR EXPANSIÓN VERTICAL */
    height: auto !important;
    min-height: 100vh !important;
}

/* Asegurar que el formulario tenga espacio al final */
#mainContent form {
    padding-bottom: 40px !important;
    margin-bottom: 40px !important;
}

#mainContent .card-reference {
    margin-bottom: 20px !important;
}

#mainContent .card-reference-content {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}
form {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* ============================================
   ESTILOS PARA ELEMENTOS DINÁMICOS
   ============================================ */

/* Búsqueda Histórica */
.busqueda-historica-hidden {
    display: none !important;
}

.busqueda-historica-visible {
    display: block !important;
}

.card-reference-historica {
    background: var(--c-bkg-sidebar, #f0f4f8) !important;
}

.card-reference-text-small {
    font-size: 13px !important;
}

/* Botón Guardar Coordenada */
.btn-guardar-coordenada-hidden {
    display: none !important;
}

.btn-guardar-coordenada-visible {
    display: inline-block !important;
}

/* Botones Registrar/Modificar */
.btn-hidden {
    display: none !important;
}

.btn-visible {
    display: inline-block !important;
}

/* Modales */
.modal-hidden {
    display: none !important;
}

.modal-visible {
    display: flex !important;
}

/* Alertas flotantes */
.alert-floating {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    z-index: 9999 !important;
    min-width: 300px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Efectos visuales en inputs de coordenadas */
.coord-input-success {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Efectos visuales en items de coordenadas clickeados */
.coord-item-clicked {
    transform: scale(0.98) !important;
    background-color: var(--c-primary-light-alpha, rgba(74, 144, 226, 0.1)) !important;
    transition: all 0.3s ease !important;
}