.historial-section {
    background: var(--color-white);
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100dvh - 40px);
    min-height: 0;
    margin: 20px;
}

.historial-container {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.historial-grid {
    display: grid;

    grid-template-rows: auto 1fr;

    height: 100%;

    gap: 20px;
}

.historial-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    padding-bottom: 6px;
}

.historial-panel-izquierdo {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 14px;
}

.historial-panel-derecho {
    min-height: 0;
}

.ajustes-section {
    background: var(--color-white);
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow-y: auto;
    height: 100%;
}

.ajustes-container {
    max-width: 600px;
    padding: 24px;
}

.input-busqueda {
    width: 100%;

    padding: 12px 14px;

    border-radius: var(--radius-input);

    border: 1px solid var(--color-border);

    background: var(--color-white);

    box-sizing: border-box;

    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    min-height: 44px;

    margin: 0;
}

.input-busqueda:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.tabs-container,
.filtros-tipo {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-tab,
.btn-filtro-tipo,
.btn-filtro-tipo {
    padding: 10px 18px;

    border-radius: var(--radius-button);

    border: 1px solid var(--color-border);

    background: var(--color-white);

    color: var(--color-text-secondary);

    cursor: pointer;

    font-family: var(--font-family-base);

    font-size: var(--font-size-small);

    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-tab:hover,
.btn-filtro-tipo:hover {
    background: var(--color-bg-light);
}

.btn-tab.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-filtro-tipo.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.historial-filtros {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    overflow: scroll;
}

.segmented-control {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    height: 84px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    padding: 4px;
    box-sizing: border-box;
    align-self: center;
    flex-shrink: 0;
    overflow: hidden;
}

.segmented-pill {
    position: absolute;
    left: 4px;
    top: 4px;
    width: calc(100% - 8px);
    height: calc(50% - 4px);
    background: var(--color-primary);
    border-radius: var(--radius-button);
    z-index: 0;
    transition: transform 0.25s ease;
    pointer-events: none;
}

.btn-segment {
    position: relative;
    flex: 1;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 1;
    border-radius: 999px;
    transition: color 0.25s ease;
    white-space: nowrap;
    padding: 0;
}

.btn-segment:hover {
    color: var(--color-text-primary);
}

.btn-segment.active {
    color: var(--color-white);
    font-weight: 600;
}

.filtros-derecha {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
    flex: 1;
}

.filtro-grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.filtro-label {
    font-family: var(--font-family-base);
    font-weight: 400;
    color: var(--color-text-secondary);
    min-width: 70px;
    text-align: right;
    line-height: 1;
    flex-shrink: 0;
}

.filtro-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex: 1;
    padding: 9px 28px 9px 14px;
    border-radius: var(--radius-input);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    cursor: pointer;
    min-width: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2368706C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-height: 44px;
}

.filtro-select:disabled,
.filtro-select.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-bg-light);
    color: var(--color-text-secondary);
}

.historial-content {
    display: grid;
    grid-template-columns: minmax(310px, 1fr) minmax(0, 2fr);
    gap: 20px;
    min-height: 0;
    flex: 1;
}

.lista-propiedades {
    background: var(--color-bg-light);
    border-radius: var(--radius-card);
    padding: 16px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    min-height: 0;
    flex: 1;
}

#map {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
}

/* =========================
   CARD HISTORIAL
========================= */

.lista-propiedades {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.historial-vacio,
.historial-sin-datos {

    margin: 0;

    padding: 24px 12px;

    text-align: center;

    color: var(--color-text-secondary);

    font-size: 0.95rem;
}

/* =========================
   MODAL TASACION
========================= */

html,
body {

    border: none;

    margin: 0;

    padding: 0;
}

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0,0,0,0.65);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.18s ease;

    border: none;
}

.modal-overlay.active {

    opacity: 1;

    pointer-events: all;
}

/* Remove borders from body and html when modal is active */
body.modal-open,
html.modal-open {

    border: none !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;
}

.modal-tasacion {

    width: 620px;

    max-width: calc(100vw - 32px);

    max-height: calc(100vh - 32px);

    background: var(--color-white);

    border-radius: 28px;

    padding: 22px;

    box-sizing: border-box;

    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--color-border);
}


/* Override modal-tasacion styles when using perfil-card structure */
.modal-overlay.active .modal-tasacion.perfil-modal {

    width: min(1200px, calc(100vw - 80px));

    max-width: min(1200px, calc(100vw - 80px));

    max-height: calc(100vh - 40px);

    padding: 0;

    border-radius: 0;

    transform: none;

    background: transparent;

    border: none !important;

    box-shadow: none !important;
}

/* Hide close button when perfil-modal is active */
.modal-tasacion.perfil-modal .cerrar-modal {

    display: none;
}

/* Compact version of blue card for comparables (más baja, sin shadow) */
.perfil-card-azul-compacto {
    min-height: 100px;
    box-shadow: none !important;
}

/* =========================
   PERFIL CARD NEW DESIGN
========================= */

.perfil-card-container {

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 0;

    box-sizing: border-box;

    position: relative;
}

.perfil-barra-superior {

    width: 100%;

    max-width: 1200px;

    background: var(--color-bg-light);

    border-radius: 24px 24px 0 0;

    padding: 16px 24px;

    box-sizing: border-box;

    border: 1px solid var(--color-border);

    border-bottom: none;

    position: sticky;

    top: 0;

    z-index: 10;

    flex-shrink: 0;
}

.perfil-card {

    width: 100%;

    max-width: 1200px;

    max-height: calc(80vh - 80px);

    background: var(--color-bg-light);

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    border: 1px solid var(--color-border);

    border-top: none;

    flex: 1;

    min-height: 0;
}

.perfil-barra-inferior {

    width: 100%;

    max-width: 1200px;

    background: var(--color-bg-light);

    border-radius: 0 0 24px 24px;

    padding: 16px 24px;

    box-sizing: border-box;

    border: 1px solid var(--color-border);

    border-top: none;

    position: sticky;

    bottom: 0;

    z-index: 10;

    flex-shrink: 0;

    margin-top: -1px;
}

.perfil-barra-inferior-derecha {

    display: flex;

    gap: 12px;

    justify-content: flex-end;

    margin-left: auto;
}

.perfil-btn-accion {

    padding: 10px 20px;

    border-radius: var(--radius-card);

    border: none;

    background: var(--color-primary);

    color: var(--color-white);

    font-size: 0.95rem;

    font-weight: 500;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: background-color 0.15s ease;
}

.perfil-btn-accion:hover {

    background: var(--color-primary-hover);
}

.perfil-btn-eliminar {

    background: var(--color-error-bg-hover);

    color: var(--color-error-text);
}

.perfil-btn-eliminar:hover {

    background: var(--color-error-bg);

    color: var(--color-error-text);
}

.perfil-row {

    padding: 10px 24px;

    box-sizing: border-box;
}

.perfil-row-header {

    padding: 16px 24px;
}

.perfil-btn-volver {

    background: transparent;

    border: none;

    color: var(--color-text-primary);

    font-size: 1rem;

    font-weight: 500;

    cursor: pointer;

    padding: 8px 16px;

    border-radius: var(--radius-input);

    transition: background-color 0.15s ease;
}

.perfil-btn-volver:hover {

    background: var(--color-bg-light);
}

.perfil-card-azul {

    background: var(--color-primary);

    border-radius: var(--radius-card);

    padding: 24px 28px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 24px;

    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.perfil-card-azul-left {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.perfil-fecha {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.85);

    font-weight: 500;
}

.perfil-codigo {

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.95);

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.perfil-direccion {

    font-size: 1.5rem;

    font-weight: 600;

    color: var(--color-white);
}

.perfil-ubicacion {

    font-size: 1rem;

    color: rgba(255, 255, 255, 0.9);

    font-weight: 400;
}

.perfil-card-azul-right {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;
}

.perfil-valor-titulo {

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.85);

    font-weight: 500;
}

.perfil-compartido-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: var(--color-info-light);

    color: var(--color-info);

    padding: 4px 12px;

    border-radius: 999px;

    font-size: 0.75rem;

    font-weight: 500;

    align-self: center;

    margin-bottom: 8px;
}

.perfil-valor {

    font-size: 1.75rem;

    font-weight: 600;

    color: var(--color-white);
}

.perfil-grid-3 {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.perfil-card-item {

    background: var(--color-white);

    border-radius: var(--radius-card);

    padding: 20px 24px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    border: 1px solid var(--color-border);
}

.perfil-card-full {

    grid-column: 1 / -1;
}

.perfil-item-label {

    font-size: 0.85rem;

    color: var(--color-text-secondary);

    font-weight: 500;
}

.perfil-item-value {

    font-size: 1.25rem;

    font-weight: 600;

    color: var(--color-text-primary);
}

.perfil-item-sub {

    font-size: 0.9rem;

    color: var(--color-text-secondary);

    font-weight: 400;
}

.perfil-servicios {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.perfil-observaciones {

    font-size: 1rem;

    color: var(--color-text-primary);

    line-height: 1.6;
}

.perfil-resultados-placeholder,
#perfil-resultados-renderer {

    min-height: 200px;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;
}

.cerrar-modal {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 38px;

    height: 38px;

    border: none;

    border-radius: var(--radius-card);

    background: var(--color-bg-lighter);

    cursor: pointer;

    font-size: 1rem;
}

.modal-header {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 22px;

    padding-right: 54px;
}

.modal-titulo h2 {

    margin: 0;

    font-size: 1.5rem;
}

.modal-titulo p {

    margin-top: 6px;

    color: var(--color-text-secondary);
}

.modal-header-info {

    display: flex;

    flex-direction: column;

    flex: 1;

    min-width: 0;
}

.modal-contenido-scroll {

    flex: 1;

    overflow-y: auto;

    padding-right: 6px;
}

.modal-contenido-scroll::-webkit-scrollbar {

    width: 6px;
}

.modal-contenido-scroll::-webkit-scrollbar-thumb {

    background: var(--color-border);

    border-radius: 999px;
}

.modal-tiempo {

    color: var(--color-text-secondary);

    white-space: nowrap;

    font-size: 0.9rem;
}

.modal-imagen {

    width: 200px;

    min-width: 200px;

    height: 200px;

    border-radius: 20px;

    background: var(--color-bg-modal);
}

.modal-seccion {

    margin-bottom: 28px;
}

.modal-seccion h3 {

    margin-bottom: 14px;

    font-size: 1rem;
}

.modal-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}

.modal-item {

    background: var(--color-bg-light);

    border-radius: var(--radius-card);

    padding: 14px;
}

.modal-item span {

    display: block;

    font-size: 0.8rem;

    color: var(--color-text-secondary);

    margin-bottom: 4px;
}

.modal-item strong {

    font-size: 1rem;

    color: var(--color-text-primary);
}

.modal-servicios {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.chip-servicio {

    padding: 10px 14px;

    border-radius: var(--radius-tag);

    background: var(--color-primary-light);

    color: var(--color-primary);

    font-size: var(--font-size-small);
}

.modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 0px;

    padding-top: 0px;

    flex-shrink: 0;
}

.btn-editar {

    background: var(--color-primary);

    color: var(--color-white);
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-heading);
}

.btn-eliminar {

    background: var(--color-white);

    color: var(--color-error-text);
    border: 1px solid var(--color-error-bg-hover);
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-heading);
}

/* =========================
   TABLA DE RESULTADOS
========================= */

.resultado-tabla-scroll {

    overflow-x: auto;

    overflow-y: hidden;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-card);

    background: var(--color-white);

    max-height: 100%;

    min-width: 0;

    scroll-behavior: smooth;
    
    margin-bottom: 20px;
    
    display: block;
    
    width: 100%;
}

.resultado-tabla {

    width: 100%;

    min-width: 800px;

    border-collapse: collapse;

    background: var(--color-white);

    border-radius: var(--radius-card);

    overflow: hidden;

    border: 1px solid var(--color-border);
}

.resultado-tabla th,
.resultado-tabla td {

    padding: 14px 16px;

    text-align: center;

    font-size: 0.9rem;
}

.resultado-tabla th {

    background: var(--color-bg-light);

    color: var(--color-text-secondary);

    font-weight: 600;
}

.resultado-tabla tbody tr:not(:last-child) td {

    border-bottom: 1px solid var(--color-border);
}

.valor-promedio-row {

    background: var(--color-bg-light);

    border-top: 2px solid var(--color-border);
}

/* =========================
   POLISH: historial
   Unificación visual con el flujo de tasación
========================= */

/* Panel principal del historial */

.historial-container {
    gap: 20px;
}

/* Encabezado */
.historial-header {
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.input-busqueda {
    border-radius: var(--radius-input);
    padding: 12px 14px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-primary);
    min-height: 44px;
}

.input-busqueda:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Tabs y filtros */
.tabs-container,
.filtros-tipo {
    gap: 10px;
}

.btn-tab,
.btn-filtro-tipo {
    padding: 10px 18px;
    border-radius: var(--radius-button);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-secondary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-tab:hover,
.btn-filtro-tipo:hover {
    background: var(--color-bg-light);
}

.btn-tab.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-filtro-tipo.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Contenido principal */
.historial-content {
    gap: 20px;
    min-height: 0;
}

@media (max-width: 900px) {
    .historial-content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .historial-panel-derecho {
        min-height: 300px;
    }
}

/* Lista */
.lista-propiedades {
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-card);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
}

/* Modal */
.modal-tasacion {
    border-radius: var(--radius-modal);
    padding: 24px;
}

.modal-footer {
    gap: 12px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--color-border);
}

.btn-editar {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-heading);
}

.btn-editar:hover {
    background: var(--color-primary-hover);
}

.btn-eliminar {
    background: var(--color-white);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-bg-hover);
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-heading);
}

.btn-eliminar:hover {
    background: var(--color-error-bg);
}

/* Perfil */
.perfil-btn-accion {
    border-radius: var(--radius-button);
    padding: 12px 24px;
    font-size: var(--font-size-small);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-heading);
}

.perfil-btn-volver {
    border-radius: var(--radius-button);
    padding: 10px 20px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-heading);
}

/* Fila del lote a tasar */
.fila-lote-tasar {
    color: var(--color-primary);
}

/* Cards del historial */
.lista-propiedades .card-minimizada {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--radius-card-small);
}

.lista-propiedades .card-minimizada-seleccionado {
    border: 1.5px solid var(--color-primary);
    background: var(--color-primary-light);
}

/* Sub-item de Solicitudes en el sidebar, desplegado de Base de datos */
.sidebar-nav-item.sidebar-sub-item {
    margin-left: 16px;
    border-left: 3px solid var(--color-border);
    border-radius: 0 12px 12px 0;
    color: var(--color-text-secondary);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sidebar-nav-item.sidebar-sub-item:hover {
    background: var(--color-bg-light);
    border-left-color: var(--color-primary);
    color: var(--color-text-primary);
}

.sidebar-nav-item.sidebar-sub-item.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}