/* --- Variables y Estilos Globales --- */
:root {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --primary-color: #040404; /* Negro oficial */
    --secondary-color: #d60608; /* Rojo oficial */
    --dark-color: #040404;
    --light-color: #f4f4f4;
    --white-color: #fff;
    --font-family-body: 'Montserrat', sans-serif;
    --font-family-heading: 'Teko', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-family-body);
    line-height: 1.6;
    margin: 0;
    color: var(--dark-color);
    background-color: var(--white-color);

}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
}

h1, h2, h3 {
    font-family: var(--font-family-heading);
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

ul {
    list-style: none;
    padding: 0;
}

main {
    flex: 1 0 auto; /* Hace que el contenido principal crezca y empuje el footer hacia abajo */
}

/* --- Barra de Navegación --- */
.main-header {
    background-color: var(--white-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1vh 20px;
}

.navbar-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.navbar-logo {
    z-index: 101;
}

.navbar-logo img {
    height: 50px; /* Aumentamos la altura para un logo más grande */
    width: auto; /* Mantener la proporción */
    max-width: 200px; /* Evita que el logo sea demasiado ancho en pantallas pequeñas */
    display: block;
}

.navbar-menu {
    display: flex;
    gap: 1.5rem;
}

.navbar-links {
    display: flex;
    align-items: center;
}

.navbar-menu a, .navbar-links a {
    color: var(--dark-color);
    font-weight: 600;
    transition: color 0.3s ease;
}

.navbar-menu a:hover {
    color: var(--secondary-color);
}

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--primary-color);    
    z-index: 101;
}

.btn-login {
    background-color: var(--secondary-color);
    color: var(--white-color);
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.btn-login:hover {
    background-color: #b30507; /* Un rojo un poco más oscuro */
}

.btn-login:active {
    transform: scale(0.98); /* Efecto de clic */
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-actions .btn,
.navbar-actions .btn-login {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Menú de Usuario (Logueado) --- */
.user-menu {
    position: relative;
    display: none; /* Oculto por defecto */
}

.btn-user {
    background-color: var(--secondary-color);
    border: none;
    cursor: pointer;
    color: var(--white-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 5px;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--white-color);
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    min-width: 220px;
    z-index: 102;
    overflow: hidden;
}

.user-dropdown.active {
    display: block;
}

.user-dropdown a,
.user-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    color: var(--dark-color);
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
    background-color: var(--light-color);
}

.user-dropdown a i,
.user-dropdown button i {
    margin-right: 0.75rem;
    width: 1em; /* Alinea los textos */
}
/* Clases para controlar visibilidad de sesión */
.logged-in .btn-login { display: none; }
.logged-in .user-menu { display: block; }
.sesion-cargando .navbar-actions .btn-login { display: none; }
.sesion-cargando .navbar-actions .user-menu { display: block; visibility: visible; }

/* --- Botones --- */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border: none;
}

.btn-secondary:hover {
    opacity: 0.9;
}

.btn-full {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

.password-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.password-input-wrap input {
    width: 100%;
    padding-right: 3rem;
    box-sizing: border-box;
}

.password-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: absolute !important;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #68707b;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--secondary-color);
    background-color: #f1f3f5;
    outline: none;
}

.password-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(230, 6, 6, 0.18);
}

.btn-danger {
    background-color: #dc3545;
    color: var(--white-color);
    border: none;
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.btn:disabled .loader {
    display: inline-block !important;
}
.btn.loading i {
    animation: rotation 1s linear infinite;
}

.btn-back {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--dark-color);
    font-weight: bold;
    transition: color 0.3s ease;
}
.btn-back i {
    margin-right: 0.5rem;
}
.btn-back:hover {
    color: var(--secondary-color);
}

.page-header .btn-back {
    color: var(--white-color); /* Asegura que el botón sea visible en headers oscuros */
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 5px;
}
.btn.btn-default {
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: var(--dark-color);
}
.btn.btn-default:hover { background-color: #e0e0e0; }
/* --- Hero Section (Página de Inicio) --- */
.hero {
    background: linear-gradient(rgba(4, 4, 4, 0.7), rgba(4, 4, 4, 0.7)), url('../../images/DESKTOP.webp') no-repeat center center/cover;
    color: var(--white-color);
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-content {
    max-width: 800px;
}

.hero-logo {
    max-width: 400px;
    width: 80%;
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: 3rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}


.tracking-form-container {
    margin-top: 2.5rem;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(5px); /* Efecto de vidrio esmerilado */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tracking-form {
    display: flex;
    gap: 10px;
}

.tracking-input {
    flex-grow: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
}

.btn-track {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-track:hover {
    opacity: 0.9;
}
/* --- Features Section --- */
.features {
    padding: 4rem 0;
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.feature-item i {
    font-size: 4rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.feature-item img {
    margin-bottom: 1rem;
}

.features-grid { perspective: 1000px; }
.feature-item-link {
    display: block;
    color: inherit; /* Hereda el color del texto para que no se vea azul */
    text-decoration: none;
}

.feature-item {
    padding: 2rem;
    border-radius: 8px;
    background-color: var(--white-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.feature-item:hover {
    transform: translateY(-10px); /* Efecto de levantamiento */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Sombra más pronunciada */
    transform: rotateY(15deg) rotateX(5deg) scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2); /* Sombra más pronunciada para efecto 3D */
}

/* --- Coverage Section (Página de Inicio) --- */
.coverage-section {
    padding: 5rem 0;
    background: linear-gradient(rgba(4, 4, 4, 0.75), rgba(4, 4, 4, 0.75)), url('../../images/banner-2000x200-1.webp') no-repeat center center/cover;
    color: var(--white-color);
    text-align: center;
}

.coverage-section h2 {
    color: var(--white-color);
}

.coverage-section p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 1rem auto 2rem auto;
    color: var(--light-color);
}

/* --- Page Header (para páginas internas) --- */
.page-header {
    background-color: var(--light-color);
    padding: 2rem 0;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.page-header.services-header {
    background: linear-gradient(rgba(4, 4, 4, 0.6), rgba(4, 4, 4, 0.6)), url('../../images/banner-2000x200.webp') no-repeat center center/cover;
    color: var(--white-color);
    padding: 4rem 0; /* Aumentamos el padding para que la imagen se vea mejor */
    border-bottom: none;
}
.page-header.services-header p {
    color: var(--light-color);
}

.page-header.about-header {
    background: linear-gradient(rgba(4, 4, 4, 0.6), rgba(4, 4, 4, 0.6)), url('../../images/banner-2000x200-1.webp') no-repeat center center/cover;
    color: var(--white-color);
    padding: 4rem 0;
    border-bottom: none;
}

.page-header.contact-header {
    background: linear-gradient(rgba(4, 4, 4, 0.6), rgba(4, 4, 4, 0.6)), url('../../images/banner-2000x200-2.webp') no-repeat center center/cover;
    color: var(--white-color);
    padding: 4rem 0;
    border-bottom: none;
}

.page-header.contact-header p {
    color: var(--light-color);
}

.page-header.quote-header {
    background: linear-gradient(rgba(4, 4, 4, 0.6), rgba(4, 4, 4, 0.6)), url('../../images/cotizador.webp') no-repeat center center/cover;
    color: var(--white-color);
    padding: 4rem 0;
    border-bottom: none;
}

.page-header.account-page-header {
    background: linear-gradient(rgba(4, 4, 4, 0.6), rgba(4, 4, 4, 0.6)), url('../../images/panel.webp') no-repeat center center/cover;
    color: var(--white-color);
    padding: 4rem 0;
    border-bottom: none;
}

.page-header.history-header {
    background: linear-gradient(rgba(4, 4, 4, 0.6), rgba(4, 4, 4, 0.6)), url('../../images/historial.webp') no-repeat center center/cover;
    color: var(--white-color);
    padding: 4rem 0;
    border-bottom: none;
}

.page-header.edit-profile-header {
    background: linear-gradient(rgba(4, 4, 4, 0.6), rgba(4, 4, 4, 0.6)), url('../../images/usuario.webp') no-repeat center center/cover;
    color: var(--white-color);
    padding: 4rem 0;
    border-bottom: none;
}

.page-header.billing-page-header {
    background: linear-gradient(rgba(4, 4, 4, 0.6), rgba(4, 4, 4, 0.6)), url('../../images/facturacion.webp') no-repeat center center/cover;
    color: var(--white-color);
    padding: 4rem 0;
    border-bottom: none;
}

.content-section {
    padding: 4rem 0;
}

/* --- Cotizador --- */
.quote-section {
    padding: 4rem 0;
    background-color: var(--light-color);
}

.quote-form {
    background: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.form-step {
    margin-bottom: 2rem;
}

.form-step h3 {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.quote-form .form-step:first-of-type .form-group,
.quote-form .form-step:first-of-type .form-group-row {
    margin-top: 0;
}
.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group-row-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.form-group-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    color: #555;
}

.form-group-checkbox input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.form-group-checkbox a {
    color: var(--secondary-color);
    text-decoration: underline;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.quote-form .form-group, .quote-form .form-group-row {
    margin-top: 1.5rem;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group.form-group-small {
    flex-grow: 0;
}
.form-group.form-group-small input,
.form-group.form-group-small select {
    width: auto;
}

.commercial-mode-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.commercial-mode-fieldset legend {
    margin-bottom: 1rem;
    font-weight: 700;
}

.commercial-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.commercial-mode-card {
    position: relative;
    cursor: pointer;
}

.commercial-mode-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.commercial-mode-card-content {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: .1rem .7rem;
    height: 100%;
    min-height: 76px;
    padding: .75rem 1rem;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
    background: var(--secondary-color);
    color: var(--white-color);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.commercial-mode-card:hover .commercial-mode-card-content {
    border-color: #a90000;
    background: #c90000;
    transform: translateY(-2px);
}

.commercial-mode-card input:focus-visible + .commercial-mode-card-content {
    outline: 3px solid rgba(227, 6, 6, .25);
    outline-offset: 2px;
}

.commercial-mode-card input:checked + .commercial-mode-card-content {
    border-color: #750000;
    background: #a90000;
    box-shadow: 0 7px 20px rgba(163, 0, 0, .3);
}

.commercial-mode-card-content strong,
.commercial-mode-card-content > span:not(.commercial-mode-icon) {
    grid-column: 2;
}

.commercial-mode-icon {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--white-color);
}

.commercial-mode-card-content > span:not(.commercial-mode-icon) {
    line-height: 1.25;
    color: rgba(255, 255, 255, .9);
}

.quote-data-step[hidden],
#quote-submit[hidden] {
    display: none !important;
}

.quote-data-step.is-revealed,
#quote-submit.is-revealed {
    animation: quote-fields-reveal .28s ease-out;
}

@keyframes quote-fields-reveal {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.commercial-mode-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border-left: 4px solid #777;
    border-radius: 5px;
    background: #f5f5f5;
}

.commercial-mode-status[hidden] {
    display: none !important;
}

.commercial-mode-status.is-valid { border-color: #217a42; background: #edf8f1; }
.commercial-mode-status.is-warning { border-color: #a86400; background: #fff7e8; }
.commercial-mode-status.is-invalid { border-color: #a12626; background: #fff0f0; }
.commercial-mode-status #commercial-mode-status-message { font-weight: 700; }
.commercial-mode-status .btn { flex: 0 0 auto; }

.quote-route-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.quote-route-inputs .form-group,
.package-main-row .form-group,
.package-dimensions-row .form-group {
    margin-top: 0;
}

.package-editor-item {
    display: grid;
    gap: 1.25rem;
}

.package-main-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.package-dimensions-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: .75rem;
}

.package-dimension-separator {
    padding-bottom: .75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.quote-form button[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

@media (max-width: 700px) {
    .commercial-mode-grid { grid-template-columns: 1fr; }
    .quote-route-inputs,
    .package-main-row { grid-template-columns: 1fr; }
    .commercial-mode-status { align-items: stretch; flex-direction: column; }
}

.unidades-listado-modal{width:min(1100px,calc(100vw - 2rem))!important}.unidades-listado-layout{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.5fr);gap:2rem;min-height:430px}.unidades-listado-selector{display:flex;flex-direction:column;gap:.8rem;max-height:65vh;overflow:auto}.unidad-listado-opcion{display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;align-items:center;gap:.2rem .7rem;padding:1rem;border:2px solid #ddd;border-radius:10px;background:#fff;text-align:left;cursor:pointer}.unidad-listado-opcion:hover,.unidad-listado-opcion.activa{border-color:#e30606;box-shadow:0 4px 12px rgba(0,0,0,.12)}.unidad-listado-opcion i{grid-row:1/3;font-size:2rem;color:#e30606}.unidad-listado-opcion strong{font-size:1.05rem}.unidad-listado-opcion span{font-size:.9rem;color:#555}.unidad-listado-opcion small{grid-column:2/4;font-size:.9rem;font-weight:700}.unidad-detalle-activa{border-left:1px solid #ddd;padding:1rem 1.5rem}.unidad-detalle-activa h3{font-size:1.8rem;margin:.25rem 0 .5rem}.unidad-detalle-capacidad{font-size:1.35rem;font-weight:700;color:#e30606}.unidad-detalle-activa dl{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.4rem}.unidad-detalle-activa dt{font-weight:700;color:#555}.unidad-detalle-activa dd{margin:0}@media(max-width:700px){.unidades-listado-layout{grid-template-columns:1fr}.unidad-detalle-activa{border-left:0;border-top:1px solid #ddd;padding:1rem 0}}
.modal-overlay.active .config-modal-shell,.modal-overlay.active .config-modal-wide,.modal-overlay.active .unidades-listado-modal{width:min(1200px,calc(100vw - 2rem))!important;max-height:78vh!important}.config-modal-shell .modal-content,.config-modal-wide .modal-content{max-height:calc(78vh - 76px)!important}.config-modal-form [hidden]{display:none!important}.dimensiones-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:end;gap:.45rem}.dimensiones-grid label{min-width:0}.dimension-separador{font-size:1.3rem;font-weight:700;padding-bottom:.7rem}.unidad-rendimiento{display:flex;align-items:end;gap:.35rem}.unidad-rendimiento input{flex:1}.unidad-sufijo{font-weight:700;padding-bottom:.75rem;white-space:nowrap}.config-costos-tabs .activo{background:#e30606!important;color:#fff!important}

.profile-compact-row {
    align-items: end;
}

.form-group.form-group-compact {
    flex: 0 1 15rem;
}

.form-group.form-group-compact input[type="date"] {
    max-width: 15rem;
}

.account-flow-form {
    margin-top: 2rem;
}

.form-group input, .form-group select, .form-group textarea {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: var(--secondary-color);
}

.form-group textarea {
    resize: vertical; /* Permite solo redimensionar verticalmente */
    min-height: 150px; /* Altura mínima */
    display: flex;
}

.char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.25rem;
}

.validation-message {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.form-group-checkbox + .btn {
    margin-top: 0;
}

.quote-result {
    margin-top: 2rem;
    background: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed var(--secondary-color);
}

/* --- Lógica de visibilidad en Cotizador según sesión --- */
.logged-out .logged-in-options,
.logged-out #saved-address-container,
.logged-out #new-address-container,
.logged-out #saved-address-container-dest,
.logged-out #new-address-container-dest {
    display: none !important;
}

.logged-in .logged-out-options {
    display: none !important;
}



.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: flex-start;
}

.address-details-box {
    background-color: var(--light-color);
    border: 1px solid #ddd;
    border-left: 4px solid var(--secondary-color);
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.quote-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.quote-actions .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Estilos para Textarea de Material (Cotizador) --- */
.material-textarea {
    min-height: auto !important; /* Anula la altura mínima general */
    transition: color 0.3s ease;
}
.material-ok {
    color: var(--dark-color); /* Color normal */
}
.material-warning {
    color: #ff8c00; /* Naranja para advertencia */
}
.material-limit {
    color: var(--secondary-color); /* Rojo para límite */
}

/* --- Página de Rastreo --- */
.tracking-page-container {
    background: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.tracking-results-container {
    background: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.tracking-results-container h3 {
    text-align: center;
    margin-bottom: 2rem;
}

.tracking-results-container .tracking-number {
    color: var(--secondary-color);
}

.tracking-status {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.status-item {
    text-align: center;
    color: #aaa;
    width: 100px;
}

.status-item.active {
    color: var(--dark-color);
}

.status-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #eee;
    color: #aaa;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
}

.status-item.active .status-icon {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.status-text {
    font-weight: bold;
    font-size: 0.9rem;
}
.status-date {
    font-size: 0.8rem;
    color: #777;
}

.status-line {
    flex-grow: 1;
    height: 4px;
    background-color: #eee;
    margin: 30px 0;
}

.status-line.active {
    background-color: var(--secondary-color);
}

.tracking-form-status {
    margin: 1rem 0 0;
    color: var(--secondary-color);
    text-align: center;
    font-weight: 600;
}

.tracking-info {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
}
/* --- Página de Cuenta --- */
.account-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

.account-card {
    background: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.account-card--shipments {
    display: flex;
    flex-direction: column;
}

.account-card--shipments .account-shipment-list {
    flex-grow: 1; /* Permite que la lista crezca */
    overflow-y: auto; /* Añade scroll si el contenido es muy largo */
    min-height: 200px; /* Altura mínima para que no colapse si está vacía */
}

.address-management-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.address-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.sender-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.sender-item:last-child {
    border-bottom: none;
}

.sender-info {
    flex-grow: 1;
    padding-right: 1rem;
}

.sender-actions {
    display: flex;
    gap: 0.5rem;
}

.account-card h3 {
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.shipment-list {
    list-style: none;
    padding: 0;
}

.shipment-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.shipment-list li:last-child {
    border-bottom: none;
}

.shipment-id {
    font-weight: bold;
}

.btn-details {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background-color: #f0f0f0;
    color: var(--dark-color);
    border: 1px solid #ccc;
    border-radius: 5px;
}
.btn-details:hover {
    background-color: #e0e0e0;
}

.status-delivered { color: #28a745; }
.status-in-transit { color: #ffc107; }
.status-received { color: #17a2b8; }

.profile-summary {
    margin-bottom: 1rem;
}
.profile-summary h4 {
    font-size: 0.9rem;
    font-family: var(--font-family-body);
    font-weight: bold;
    text-transform: none;
    color: var(--dark-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3rem;
    margin-top: 0.7rem;
    margin-bottom: 0.35rem;
}
.profile-summary h4:first-of-type {
    margin-top: 0;
}
.profile-summary p {
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0.55rem 0;
}
.missing-data {
    color: var(--secondary-color);
    font-style: italic;
    font-weight: bold;
}
.data-info {
    color: #6c757d; /* Gris */
    font-style: italic;
}
/* --- Banner de Información --- */
.info-banner {
    background-color: #e2f3fe; /* Azul claro */
    color: #0c5460;
    border: 1px solid #b6d4fe;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1.5rem;
}
.info-banner p {
    margin: 0;
    font-size: 0.9rem;
}

.missing-data-message {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    padding: 0.6rem 0.75rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}
.missing-data-message p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.25;
}

.form-field-status {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    line-height: 1.3;
    color: #555;
}

.account-security-actions {
    margin-top: 1.25rem;
}

.section-subtitle-form {
    font-family: var(--font-family-body);
    font-weight: bold;
    text-transform: none;
    font-size: 1.1rem;
    color: #555;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
/* --- Controles de Historial --- */
.history-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.search-bar {
    position: relative;
    flex-grow: 1;
    min-width: 250px;
}

.search-bar input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-right: 2.5rem; /* Espacio para el ícono */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.search-bar i {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
}

.items-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.items-per-page select {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--white-color);
}

/* --- Paginación --- */
.pagination-container {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 0.5rem;
}

.pagination button {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    background-color: var(--white-color);
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s;
}
.pagination button:hover {
    background-color: var(--light-color);
}
.pagination button.active {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}

/* --- Página de Historial (Nuevo diseño de lista) --- */
.shipment-history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-shipment-list .shipment-item {
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.shipment-item {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.shipment-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto; /* Default layout */
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    background-color: var(--white-color);
    transition: background-color 0.2s ease;
}

.selection-checkbox {
    display: none;
    width: 20px;
    margin-right: 1rem;
}

.selection-mode-active .selection-checkbox {
    display: block;
}
.selection-mode-active .shipment-header {
    /* Layout when checkboxes are visible */
    grid-template-columns: auto 1fr 1fr 1fr auto; 
}
.shipment-header:hover {
    background-color: #f9f9f9;
}

.shipment-header .shipment-id {
    font-weight: bold;
}

.shipment-header .shipment-destination {
    color: #555;
}

.shipment-header i {
    transition: transform 0.3s ease;
}

.shipment-item.active .shipment-header i {
    transform: rotate(180deg);
}

.shipment-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    background-color: var(--light-color);
    padding: 0 1.5rem;
}

.shipment-item.active .shipment-details {
    max-height: 500px; /* Altura suficiente para el contenido */
    padding: 1.5rem;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.account-actions-footer {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.account-actions-footer .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.history-actions-footer {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* --- Página de Historial --- */
.history-table-container {
    overflow-x: auto; /* Para responsividad en tablas */
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}

.history-table th,
.history-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.history-table th {
    background-color: var(--light-color);
    font-weight: bold;
}

.history-table tbody tr:hover {
    background-color: #f9f9f9;
}

.history-table .btn-track-small {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-radius: 5px;
    white-space: nowrap;
}
.history-table .btn-track-small:hover {
    opacity: 0.9;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.action-buttons .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.action-buttons .btn i {
    margin-right: 0.5rem;
    gap: 0.5rem;
    align-items: center;
}
.shipment-list .action-buttons .btn {
    padding: 0.5rem;
    font-size: 0.9rem;
}

.history-table .btn-invoice-small,
.history-table .btn-duplicate-small {
    padding: 0.5rem;
    font-size: 0.85rem;
    border-radius: 5px;
    color: var(--white-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.history-table .btn-invoice-small {
    background-color: #007bff; /* Azul */
}
.history-table .btn-invoice-small:hover {
    background-color: #0056b3;
}

.history-table .btn-duplicate-small {
    background-color: #6c757d; /* Gris */
}
.history-table .btn-duplicate-small:hover {
    background-color: #5a6268;
}

/* --- Zona de Peligro (Editar Perfil) --- */
.danger-zone {
    border: 2px solid var(--secondary-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
    background-color: #fff5f5;
}

.danger-zone h3 {
    color: var(--secondary-color);
}
.delete-survey hr {
    margin: 1.5rem 0;
}

#other-reason-container {
    margin-top: 1.5rem;
}

.delete-survey #confirm-delete-btn {
    margin-top: 1.5rem;
}
/* --- Footer --- */
.main-footer {
    background-color: var(--dark-color);
    color: var(--white-color);
    padding: 4rem 0 2rem 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: var(--white-color);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer-col:not(:last-of-type) {
    border-right: 1px solid #444;
    padding-right: 2rem;
}

.footer-col p {
    color: #ccc;
}

.footer-contact-info {
    margin-top: 1rem;
    font-style: normal;
    font-size: 0.9rem;
}

.footer-contact-info p {
    margin: 0.3rem 0;
}

.social-links {
    margin-top: 1.5rem;
}

.social-links a {
    color: var(--white-color);
    font-size: 1.5rem;
    margin-right: 1rem;
    transition: color 0.3s ease;
}
.social-links a:hover { color: var(--secondary-color); }

.footer-logo img {
    max-width: 150px;
    margin-bottom: 1rem;
}

.footer-nav-links li {
    margin-bottom: 0.75rem;
}

.footer-nav-links a {
    color: var(--light-color);
    transition: color 0.3s ease;
}

.footer-nav-links a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

/* Clases para controlar visibilidad de sesión en el footer */
.logged-in .footer-login-item { display: none; }
.logged-out .footer-logout-item { display: none; }
.logged-out .footer-edit-profile-item { display: none; }
.logged-out .footer-invoice-item { display: none; }

.footer-nav-links button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--light-color);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    transition: color 0.3s ease;
}

.footer-nav-links button:hover {
    color: var(--secondary-color);
}

.newsletter-form {
    display: flex;
    flex-direction: column;
}

.newsletter-form input {
    padding: 0.75rem;
    border: 1px solid #555;
    background-color: #333;
    color: var(--white-color);
    border-radius: 5px;
    margin-bottom: 1rem;
}

.newsletter-form .form-group-checkbox {
    margin: 0 0 1rem 0;
    font-size: 0.8rem;
    color: #ccc;
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: #aaa;
}

.footer-legal-links a {
    color: #aaa;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.form-group-radio-inline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
}

.form-group-radio-inline input[type="radio"] {
    margin-right: -1rem;
}

.person-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 34rem;
}

.person-type-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.person-type-card {
    min-height: 7rem;
    padding: 1rem;
    border: 2px solid #d8d8d8;
    border-radius: 8px;
    background: var(--white-color);
    color: var(--dark-color);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.person-type-card i {
    font-size: 1.8rem;
    color: var(--secondary-color);
}

.person-type-options input[type="radio"]:checked + .person-type-card {
    border-color: var(--secondary-color);
    background-color: #fff5f5;
}

.person-type-options input[type="radio"]:focus-visible + .person-type-card {
    outline: 3px solid rgba(196, 30, 58, 0.25);
    outline-offset: 2px;
}

.profile-primary-actions {
    align-items: center;
    margin-bottom: 2rem;
}

/* --- Modal de Inicio de Sesión --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background-color: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    width: 90%;
    max-width: 400px;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
}

.modal-content h2 {
    margin-top: 0;
    color: var(--primary-color);
}

.form-container {
    text-align: left;
}

.form-container .form-group {
    margin-bottom: 1rem;
}

.social-login {
    margin: 1.5rem 0;
    text-align: center;
}

.social-login p {
    margin-bottom: 1rem;
    position: relative;
    color: #888;
}

.social-login p::before, .social-login p::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background-color: #ddd;
}

.social-login p::before {
    left: 0;
}

.social-login p::after {
    right: 0;
}

.btn-google {
    background-color: #4285F4;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
}
.btn-google i {
    margin-right: 0.5rem;
}

.form-switch {
    margin-top: 1.5rem;
    text-align: center;
}

.form-switch a {
    color: var(--secondary-color);
    font-weight: bold;
    cursor: pointer;
}

/* --- Estilos adicionales para el modal --- */
.form-link-forgot {
    display: block;
    text-align: right;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    color: var(--secondary-color);
}

.form-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.loader {
    width: 18px;
    height: 18px;
    border: 2px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.confirmation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    gap: 0.5rem;
}
/* --- Banner de Cookies --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(4, 4, 4, 0.9);
    color: var(--white-color);
    padding: 1rem 2rem;
    display: none; /* Oculto por defecto */
    justify-content: space-between;
    align-items: center;
    z-index: 1100;
    gap: 1rem;
}

.cookie-banner.active {
    display: flex;
}

.notification-bar {
    background-color: #fff3cd;
    color: #664d03;
    padding: 0.75rem 0;
    text-align: center;
    border-bottom: 1px solid #ffecb5;
}

.notification-bar p {
    margin: 0;
}

.notification-bar a {
    color: #664d03;
    font-weight: bold;
    text-decoration: underline;
}

/* --- Notificaciones flotantes --- */
#notification-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Modal de Éxito --- */
.success-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.success-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.success-modal-content {
    background-color: var(--white-color);
    padding: 3rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.success-modal-overlay.active .success-modal-content {
    transform: scale(1);
}

.success-modal-content .icon {
    font-size: 5rem;
    color: #28a745; /* Verde de éxito */
    margin-bottom: 1.5rem;
}

/* --- Panel de Facturación --- */
.billing-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.billing-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.billing-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
    background-color: var(--white-color);
    transition: background-color 0.2s ease;
}

.billing-header:hover {
    background-color: #f9f9f9;
}

.billing-id, .billing-total {
    font-weight: bold;
}

.billing-razon-social {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.billing-header i {
    transition: transform 0.3s ease;
    justify-self: end;
}

.billing-item.active .billing-header i {
    transform: rotate(180deg);
}

.billing-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    background-color: var(--light-color);
    padding: 0 1.5rem;
}

.billing-item.active .billing-details {
    max-height: 500px;
    padding: 1.5rem;
}

.billing-table-container {
    overflow-x: auto;
    width: 100%;
}

.billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}

.billing-table th,
.billing-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.billing-table th {
    background-color: var(--light-color);
}

.billing-table tbody tr:hover {
    background-color: #f9f9f9;
}

.status-select {
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-weight: bold;
}

.status-pending { background-color: #fff3cd; color: #664d03; }
.status-terminado { background-color: #d4edda; color: #155724; }
.status-cancelado { background-color: #f8d7da; color: #721c24; }

.status-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-confirm-status {
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
}

.status-badge.status-terminado { background-color: #28a745; color: white; }
.status-badge.status-cancelado { background-color: #dc3545; color: white; }

.btn-copy-info {
    background: none;
    border: 1px solid #ccc;
    color: #555;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-copy-info:hover {
    background-color: #e9e9e9;
}
.btn-copy-info:active {
    background-color: #ddd;
}

#history-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
}

/* --- Sección de Mapa de Cobertura --- */
.map-section {
    padding: 4rem 0;
    background-color: var(--light-color);
    position: relative;
    overflow: hidden;
    transition: background-color 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s ease;
}

.map-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: -1;
}

.map-section.bg-active::before {
    opacity: 0.15; /* Opacidad de la imagen de fondo */
    z-index: 0;
}
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 3rem;
}
.map-container {
    padding: 2em 20%;
    text-align: center;
}
.map-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Título dinámico para el estado del mapa */
.map-state-title {
    text-align: center;
    font-size: 2rem; /* Título más grande */
    color: var(--secondary-color);
    min-height: 1.5em; /* Altura mínima para evitar saltos de contenido */
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* --- Estilos para Mapa SVG Interactivo --- */
.map-container .state-path {
    fill: #D1D5DB; /* Color base de los estados (gris claro) */
    stroke: #FFFFFF;
    stroke-width: 1.5;
    transition: fill 0.2s ease; /* Transición suave solo para el color */
    cursor: pointer;
}

.map-container .state-path:hover {
    fill: #D92323; /* Rojo al pasar el cursor */
}

.service-description {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed #ccc;
}
.service-description h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

@media (max-width: 992px) {
    .billing-header {
        grid-template-columns: 1fr 1fr auto;
    }
    .billing-header .billing-total, .billing-header .status-select, .billing-header .status-badge {
        display: none; /* Ocultar en tablet para dar espacio */
    }
}

.empty-list-message {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
    font-style: italic;
    background-color: var(--light-color);
    border-radius: 8px;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* --- Responsividad --- */
@media (max-width: 992px) { /* Tablet breakpoint */
    .navbar-menu {
        gap: 1rem; /* Reduce el espacio entre los elementos del menú */
    }

    .navbar-actions {
        gap: 0.5rem;
    }

    .btn, .btn-login, .btn-user {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }

    .footer-grid {
        grid-template-columns: 1fr; /* 1 columna en tablet para el footer */
        text-align: center;
    }

    .footer-col:not(:last-of-type) {
        border-right: none; /* Eliminar el divisor en tablet */
        padding-right: 0;
        padding-bottom: 2rem; /* Añadir espacio vertical */
    }

    .form-group-row-four {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-item {
        text-align: center;
    }
}
@media (max-width: 480px) {
    .confirmation-buttons { flex-direction: column; }
}

@media (max-width: 768px) { /* Mobile breakpoint */
    .hamburger-menu {
        display: block;
    }

    .navbar-links {
        display: none; /* Oculto por defecto en móvil */
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--white-color);
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .navbar-links.active {
        display: flex; /* Se muestra al hacer clic en la hamburguesa */
    }

    .navbar-menu {
        flex-direction: column;
        gap: 2rem;
    }

    .navbar-actions {
        order: -1; /* Mueve los botones antes de la hamburguesa */
        gap: 0.5rem;
    }

    .navbar-actions .btn-primary,
    .navbar-actions .btn-login,
    .navbar-actions .btn-user {
        padding: 0.5rem;
        font-size: 1.2rem;
        background: none;
        border: none;
        line-height: 1;
    }
    .navbar-actions .btn-primary {
        color: var(--primary-color);
    }
    .navbar-actions .btn-login {
        color: var(--secondary-color);
    }
    .navbar-actions .btn-user {
        color: var(--primary-color);
    }

    .navbar-actions .btn-text-nav,
    .navbar-actions .user-menu .fa-caret-down {
        display: none;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .form-group-row {
        grid-template-columns: 1fr;
    }

    .tracking-form {
        flex-direction: column;
        align-items: stretch;
    }

    .form-group-row-four {
        grid-template-columns: 1fr;
    }

    .cookie-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .tracking-status {
        flex-direction: column;
        align-items: center;
    }
    .status-line {
        width: 4px;
        height: 50px;
        margin: 10px 0;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }

    .address-management-grid {
        grid-template-columns: 1fr;
    }

}

.modal-overlay.active .config-modal-shell,.modal-overlay.active .config-modal-wide,.modal-overlay.active .unidades-listado-modal{width:calc(100vw - 4rem)!important;max-width:1400px!important;min-width:900px!important;max-height:78vh!important}.config-modal-form[hidden]{display:none!important}.dimensiones-grid{grid-column:1/-1!important;display:flex!important;flex-direction:row!important;align-items:flex-end!important;gap:.6rem!important;width:100%!important}.dimensiones-grid label{flex:1!important;display:flex!important;flex-direction:column!important}.dimensiones-grid .dimension-separador{flex:0 0 auto!important}.config-costos-tabs{grid-column:1/-1!important}
.config-costos-tabs button{background:#eee!important;color:#222!important}.config-costos-tabs button.activo{background:#e30606!important;color:#fff!important}
.config-launcher-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(150px,1fr))!important}.config-modal-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}.config-modal-form .dimensiones-grid{grid-column:1/-1!important}
.config-modal-header{min-height:68px!important}.config-modal-form{align-items:start!important;max-width:820px;margin:0 auto}.config-modal-form>input,.config-modal-form>select,.config-modal-form>label,.config-modal-form>.unidad-rendimiento{width:100%;box-sizing:border-box}.config-modal-form button[type=submit],.config-save-all{width:auto!important;min-width:190px!important;max-width:240px!important;justify-self:center!important;padding:.7rem 1.2rem!important;font-size:.95rem!important}.config-modal-form .dimensiones-grid{width:100%!important}.config-modal-form .form-error-message{width:100%}.config-modal-help{grid-column:1/-1!important}.places-suggestions{width:100%;grid-column:1/-1}
.config-modal-form [name="capacidadMaximaKg"]{order:10}.config-modal-form [name="capacidadSeguraKg"]{order:11}
.modal-overlay.active .config-modal-shell,.modal-overlay.active .config-modal-wide{width:min(940px,calc(100vw - 3rem))!important;min-width:0!important;max-height:84vh!important}.config-modal-shell .modal-content,.config-modal-wide .modal-content{max-height:calc(84vh - 76px)!important;padding:1.6rem 2rem!important}.config-modal-form{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.85rem 1.1rem!important}.config-modal-form input,.config-modal-form select{min-height:42px;padding:.55rem .7rem;font-size:.95rem}.dimensiones-grid{grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)!important;gap:.5rem!important}.dimensiones-grid label{min-width:0!important}.config-modal-form .unidad-rendimiento{display:flex!important;align-items:flex-end!important}.config-modal-form .unidad-rendimiento input{min-width:0!important}