/* Responsive rules extracted from dashboard_clean.html. */

:root {
    --bp-xs: 360px;
    --bp-sm: 480px;
    --bp-md: 600px;
    --bp-lg: 768px;
    --bp-xl: 1024px;
    --bp-xxl: 1280px;
    --bp-xxxl: 1440px;
    --bp-hd: 1600px;
    --bp-fhd: 1920px;
    --bp-qhd: 2560px;
    --bp-uhd: 3840px;
}

.layer-option.layer-locked {
    opacity: 0.55;
    cursor: not-allowed;
}

.layer-option.layer-locked * {
    pointer-events: none;
}

.layer-option .layer-checkbox:disabled,
.layer-option .layer-checkbox:disabled + .layer-icon-label,
.layer-option .layer-checkbox:disabled ~ label {
    opacity: 0.45;
    cursor: not-allowed;
}

/* body[data-screen-type] laptop/panoramic — movido a layout.css (Sprint 4) */

/* Responsive LG (<=768px) - vessel selector */
@media screen and (max-width: 768px) {
    .vessel-selector {
        top: calc(var(--effective-header-height, 75px) + 15px);
        left: 10px;
        min-width: 240px;
        max-width: 280px;
    }

    .vessel-selector-header {
        padding: 10px 12px;
    }

    .vessel-selector-title {
        font-size: 12px;
    }

    .vessel-item {
        padding: 8px 12px;
    }

    .vessel-item-name {
        font-size: 12px;
    }

    /* Header adjustments for tablets */
    .main-header {
        padding: 8px 15px;
    }

    .header-content {
        width: 100%;
        justify-content: space-between;
    }

    .header-title {
        font-size: 18px;
        letter-spacing: 0.8px;
    }

    .header-subtitle {
        font-size: 10px;
        line-height: 1.2;
    }

    .header-right {
        flex-direction: row;
        gap: 12px;
        width: auto;
    }

    /* Layers panel smaller */
    .layers-control {
        top: calc(var(--effective-header-height, 75px) + 10px);
        right: 10px;
        left: auto;
        min-width: 70px;
        max-width: 90px;
        padding: 10px 6px;
    }

    .layers-control h3 {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .layer-option {
        margin-bottom: 6px;
    }

    .layer-option label {
        font-size: 12px;
    }

    /* Fleet panel smaller */
    .fleet-control {
        bottom: 10px;
        right: 10px;
        min-width: 70px;
        max-width: 90px;
        padding: 8px 6px;
    }

    .fleet-control h3 {
        font-size: 11px;
        margin-bottom: 6px;
        padding-bottom: 4px;
    }

    .fleet-option {
        margin: 6px 0;
    }

    /* Map adjust for tablet */
    #map {
        top: calc(var(--effective-header-height, 85px) + 1px) !important;
        height: calc(100vh - var(--effective-header-height, 85px) - 1px) !important;
        height: calc(100dvh - var(--effective-header-height, 85px) - 1px) !important;
    }
}

/* Responsive XL (<=1024px) - laptop/notebook compact */
@media screen and (max-width: 1024px) {
    .main-header {
        padding: 10px 20px;
    }

    .header-right {
        gap: 14px;
    }

    .header-title {
        font-size: 22px;
        letter-spacing: 1px;
    }

    .header-subtitle {
        font-size: 12px;
    }

    .status-indicator {
        padding: 6px 10px;
    }

    .status-dot-live {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 8px #00ff88;
    }

    .status-text {
        font-size: 11px;
    }

    .header-clock {
        font-size: 12px;
        padding: 6px 10px;
        min-width: 130px;
    }

    .nav-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    #registro-btn {
        min-width: 140px;
    }

    .layers-control {
        top: calc(var(--effective-header-height, 95px) + 15px);
        right: 10px;
        min-width: 120px;
        max-width: 150px;
    }

    .layers-control h3 {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .layer-option label {
        font-size: 12px;
    }

    .vessel-selector {
        top: calc(var(--effective-header-height, 95px) + 15px);
        left: 10px;
        min-width: 260px;
        max-width: 300px;
    }

    .vessel-selector-title {
        font-size: 13px;
    }

    .vessel-item-name {
        font-size: 12px;
    }

    .vessel-item {
        padding: 8px 12px;
    }

    .vessel-selector-list.expanded {
        max-height: 320px;
    }

    .maritime-security-section {
        max-width: 560px;
    }

    .security-info li {
        font-size: 12px;
    }

    #map {
        top: calc(var(--effective-header-height, 85px) + 1px) !important;
        height: calc(100vh - var(--effective-header-height, 85px) - 1px) !important;
        height: calc(100dvh - var(--effective-header-height, 85px) - 1px) !important;
    }
}

/* Responsive XXL (<=1280px) - desktop compacto */
@media screen and (max-width: 1280px) {
    .main-header {
        padding: 10px 24px;
    }

    .header-right {
        gap: 16px;
    }

    .header-title {
        font-size: 26px;
        letter-spacing: 1.2px;
    }

    .header-subtitle {
        font-size: 13px;
    }

    .status-indicator {
        padding: 7px 12px;
    }

    .status-dot-live {
        width: 9px;
        height: 9px;
        box-shadow: 0 0 9px #00ff88;
    }

    .status-text {
        font-size: 12px;
    }

    .header-clock {
        font-size: 13px;
        padding: 7px 12px;
        min-width: 145px;
    }

    .nav-btn {
        padding: 7px 12px;
        font-size: 13px;
    }

    #registro-btn {
        min-width: 150px;
    }

    .layers-control {
        top: calc(var(--effective-header-height, 105px) + 15px);
        right: 10px;
        min-width: 140px;
        max-width: 170px;
    }

    .layers-control h3 {
        font-size: 13px;
        margin-bottom: 9px;
    }

    .layer-option label {
        font-size: 12px;
    }

    .vessel-selector {
        top: calc(var(--effective-header-height, 105px) + 15px);
        left: 10px;
        min-width: 280px;
        max-width: 320px;
    }

    .vessel-selector-title {
        font-size: 14px;
    }

    .vessel-item-name {
        font-size: 13px;
    }

    .vessel-item {
        padding: 9px 12px;
    }

    .vessel-selector-list.expanded {
        max-height: 340px;
    }

    .maritime-security-section {
        max-width: 620px;
    }

    .security-info li {
        font-size: 12px;
    }

    #vessel-selector-overlay .vessel-selector-modal {
        max-width: 560px !important;
    }

    #vessel-selector-overlay .vessel-selector-header {
        padding: 16px !important;
    }

    #vessel-selector-overlay .vessel-selector-title {
        font-size: 16px !important;
    }

    #vessel-selector-overlay .vessel-selector-subtitle {
        font-size: 12px !important;
    }

    #vessel-selector-overlay .vessel-selector-list {
        padding: 16px !important;
    }

    #vessel-selector-overlay .vessel-selector-item {
        padding: 12px !important;
    }

    #vessel-selector-overlay .vessel-selector-item-title {
        font-size: 15px !important;
    }

    #vessel-selector-overlay .vessel-selector-item-meta,
    #vessel-selector-overlay .vessel-selector-item-details {
        font-size: 12px !important;
    }

    #vessel-selector-overlay .vessel-selector-item-badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    #vessel-selector-overlay .vessel-selector-footer {
        font-size: 12px !important;
    }

    #hurricane-alert-overlay .hurricane-alert-card {
        max-width: 560px !important;
        padding: 28px !important;
    }

    #hurricane-alert-overlay .hurricane-alert-title {
        font-size: 22px !important;
        padding: 12px 24px !important;
    }

    #hurricane-alert-overlay .hurricane-alert-intro {
        font-size: 16px !important;
    }

    #hurricane-alert-overlay .hurricane-alert-item-title {
        font-size: 20px !important;
    }

    #hurricane-alert-overlay .hurricane-alert-item-meta {
        font-size: 14px !important;
    }

    #hurricane-alert-overlay .hurricane-alert-close {
        font-size: 14px !important;
        padding: 10px 24px !important;
    }

    .ip-modal-content {
        max-width: 720px !important;
        padding: 18px !important;
    }

    .ip-details-table td {
        font-size: 12px !important;
    }

    @media screen and (max-width: 1024px) {
        #vessel-selector-overlay .vessel-selector-modal {
            max-width: 520px !important;
        }

        #vessel-selector-overlay .vessel-selector-header {
            padding: 14px !important;
        }

        #vessel-selector-overlay .vessel-selector-title {
            font-size: 15px !important;
        }

        #vessel-selector-overlay .vessel-selector-subtitle {
            font-size: 11px !important;
        }

        #vessel-selector-overlay .vessel-selector-list {
            padding: 14px !important;
        }

        #vessel-selector-overlay .vessel-selector-item {
            padding: 10px !important;
        }

        #vessel-selector-overlay .vessel-selector-item-title {
            font-size: 14px !important;
        }

        #vessel-selector-overlay .vessel-selector-item-meta,
        #vessel-selector-overlay .vessel-selector-item-details {
            font-size: 11px !important;
        }

        #vessel-selector-overlay .vessel-selector-item-badge {
            font-size: 10px !important;
            padding: 3px 8px !important;
        }

        #vessel-selector-overlay .vessel-selector-footer {
            font-size: 11px !important;
        }

        #hurricane-alert-overlay .hurricane-alert-card {
            max-width: 520px !important;
            padding: 24px !important;
        }

        #hurricane-alert-overlay .hurricane-alert-title {
            font-size: 20px !important;
            padding: 10px 20px !important;
        }

        #hurricane-alert-overlay .hurricane-alert-intro {
            font-size: 15px !important;
        }

        #hurricane-alert-overlay .hurricane-alert-item-title {
            font-size: 18px !important;
        }

        #hurricane-alert-overlay .hurricane-alert-item-meta {
            font-size: 13px !important;
        }

        #hurricane-alert-overlay .hurricane-alert-close {
            font-size: 13px !important;
            padding: 9px 20px !important;
        }

        .ip-modal-content {
            max-width: 640px !important;
            padding: 16px !important;
        }

        .ip-details-table td {
            font-size: 11px !important;
        }
    }

    #map {
        top: calc(var(--effective-header-height, 85px) + 1px) !important;
        height: calc(100vh - var(--effective-header-height, 85px) - 1px) !important;
        height: calc(100dvh - var(--effective-header-height, 85px) - 1px) !important;
    }
}

/* Responsive SM - Smartphones (<=480px) - Ultra compact */
@media screen and (max-width: 480px) {
    .main-header {
        padding: 5px 10px;
    }

    /* Horizontal flex container to align elements */
    .header-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Left side: logo + titles */
    .header-left {
        gap: 8px;
        flex: 1;
    }

    /* Logo hidden on smartphone */
    .header-logo {
        display: none;
    }

    .header-titles {
        gap: 1px;
    }

    /* Main title reduced */
    .header-title {
        font-size: 14px;
        letter-spacing: 0.3px;
        line-height: 1;
    }

    /* Subtitle hidden on smartphone */
    .header-subtitle {
        display: none;
    }

    /* Right side */
    .header-right {
        flex-direction: row;
        gap: 6px;
        width: auto;
        align-items: center;
    }

    /* Navigation hidden on smartphone */
    .header-navigation {
        display: none;
    }

    .status-indicator {
        padding: 3px 6px !important;
        font-size: 6.5px !important;
        gap: 3px !important;
        border-radius: 4px !important;
        border-width: 0.5px !important;
    }

    .status-dot-live {
        width: 3px !important;
        height: 3px !important;
        box-shadow: 0 0 5px rgba(255, 165, 0, 0.6) !important;
    }

    .status-text {
        font-size: 6.5px !important;
        white-space: nowrap;
        letter-spacing: -0.3px;
    }

    /* Registro / Autoregistro buttons match UTC clock */
    #registro-btn,
    #autoregistro-btn {
        padding: 3px 6px !important;
        min-height: 24px !important;
        height: 24px !important;
        min-width: 75px !important;
        width: 75px !important;
        font-size: 9px !important;
        gap: 3px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    #registro-btn span:first-child,
    #autoregistro-btn span:first-child {
        font-size: 12px !important;
    }

    /* UTC clock on smartphone */
    .header-clock {
        font-size: 9px;
        padding: 3px 6px;
        min-width: 75px;
        width: 75px;
        min-height: 24px;
        height: 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Meteorological layers panel on smartphone */
    .layers-control {
        position: fixed !important;
        top: auto !important;
        bottom: 10px !important;  /* era 330px (obsoleto) — canonical matrix en layout.css ya fija 10px */
        right: 5px !important;
        left: auto !important;
        padding: 8px 4px !important;
        border-radius: 12px !important;
        min-width: auto !important;
        max-width: 50px !important;
        width: auto !important;
        overflow: visible;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center;
        gap: 8px !important;
        background: rgba(26, 77, 77, 0.95) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        border: 2px solid rgba(160, 216, 232, 0.5) !important;
        margin: 0 !important;
    }

    .layers-control h3 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    .layer-option {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .layer-option label:not(.layer-icon-label) {
        display: none;
    }

    .layer-icon-label {
        font-size: 24px;
        cursor: pointer;
        margin: 0;
        padding: 4px;
    }

    .layer-checkbox {
        display: none;
    }

    .status-dot {
        width: 6px;
        height: 6px;
    }

    /* Vessel search box: posición fija derecha, ancho constante en px (fallback sin data-screen-type) */
    .vessel-search-box {
        left: auto !important;
        right: 5px !important;
        top: calc(var(--effective-header-height) + 8px) !important;
        width: 155px !important;
        min-width: 0 !important;
        max-width: 155px !important;
        position: fixed !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    #vessel-search-input {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
        box-sizing: border-box !important;
    }

    #vessel-search-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }

    /* Map height for smartphone */
    #map {
        top: calc(var(--effective-header-height) + 1px) !important;
        height: calc(100vh - var(--effective-header-height) - 1px) !important;
        height: calc(100dvh - var(--effective-header-height) - 1px) !important;  /* iOS Safari dynamic viewport */
    }
}

/* Smartphones XS (<=360px) */
@media screen and (max-width: 360px) {
    .main-header {
        padding: 4px 8px;
    }

    .header-logo {
        width: 24px;
        height: 24px;
    }

    .header-logo svg {
        width: 16px;
        height: 16px;
    }

    .header-title {
        font-size: 12px;
        letter-spacing: 0.2px;
    }

    .status-indicator {
        padding: 3px 6px;
        font-size: 8px;
    }

    .status-dot-live {
        width: 5px;
        height: 5px;
    }

    .header-clock {
        font-size: 9px;
        padding: 3px 6px;
        min-width: 80px;
    }

    .layers-control {
        bottom: 10px !important;
        top: auto !important;
        right: 5px;
        left: auto;
        padding: 6px 4px;
        min-width: 60px;
        max-width: 75px;
    }

    .layers-control h3 {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .layer-option {
        margin-bottom: 4px;
    }

    .layer-option label {
        font-size: 10px;
    }

    /* Map with compact header */
    #map {
        top: calc(var(--effective-header-height) + 1px) !important;
        height: calc(100vh - var(--effective-header-height) - 1px) !important;
    }

    /* Vessel selector XS: posición fija izquierda, ancho reducido para 320px (fallback sin data-screen-type) */
    .vessel-selector {
        top: calc(var(--effective-header-height) + 8px) !important;
        left: 5px !important;
        right: auto !important;
        width: 170px !important;
        min-width: 0 !important;
        max-width: 170px !important;
        position: fixed !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    .vessel-selector-list.expanded {
        max-height: 300px;
    }
}

/* Landscape orientation on mobile/tablet (<=768px) */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .main-header {
        padding: 4px 10px;
    }

    .header-content {
        flex-direction: row;
        align-items: center;
    }

    .header-logo {
        width: 24px;
        height: 24px;
    }

    .header-title {
        font-size: 12px;
    }

    .header-subtitle {
        display: none;
    }

    .header-right {
        flex-direction: row;
        gap: 8px;
        width: auto;
    }

    .status-indicator {
        padding: 3px 6px;
        font-size: 9px;
    }

    .header-clock {
        font-size: 9px;
        padding: 3px 6px;
        min-width: 80px;
    }
}

/* Touch optimization for mobile devices */
@media (hover: none) and (pointer: coarse) {
    .layer-option {
        padding: 8px;
        margin: 4px 0;
        border-radius: 6px;
        transition: background-color 0.2s;
    }

    .layer-option:active {
        background: rgba(255, 255, 255, 0.1);
    }

    .layer-checkbox {
        transform: scale(1.3);
        margin: 4px;
    }

    .layer-option label {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    }
}

/* Additional optimization for layers panel in iframe */
@media screen and (max-width: 600px) {
    .layers-control {
        right: 5px;
        min-width: 140px;
        max-width: 160px;
        padding: 8px;
    }

    .layers-control h3 {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .layer-option {
        margin: 5px 0;
    }

    .layer-label {
        font-size: 10px;
    }
}

/* Two-column form layout for small screens */
@media (max-width: 600px) {
    .registro-form-row {
        grid-template-columns: 1fr;
    }
}

/* body[data-screen-type] tablet/smartphone — movidos a layout.css (Sprint 4) */

/* Registro modal - ajustes XXL (<=1280px) */
@media screen and (max-width: 1280px) {
    .registro-modal-content {
        max-width: 720px;
        padding: 24px;
    }

    .registro-form-row {
        gap: 12px;
    }

    .registro-submit-btn {
        padding: 12px 18px;
        font-size: 13px;
    }

    .registro-gdpr-notice {
        font-size: 12px;
    }
}

/* Registro modal - ajustes XL (<=1024px) */
@media screen and (max-width: 1024px) {
    .registro-modal-content {
        max-width: 640px;
        padding: 20px;
    }

    .registro-form-row {
        gap: 10px;
    }

    .registro-submit-btn {
        padding: 10px 16px;
        font-size: 12px;
    }

    .registro-gdpr-notice {
        font-size: 11px;
    }
}

/* Responsive LG (<=768px) - security panel */
@media screen and (max-width: 768px) {
    .maritime-security-section {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .quick-links {
        grid-template-columns: 1fr;
    }

    .security-panel.open {
        max-height: 500px;
        overflow-y: auto;
    }
}