:root {
        --primary-color: #2c3e50;
        --secondary-color: #3498db;
        --text-color: #ecf0f1;
        --hover-color: #2980b9;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', system-ui, sans-serif;
        background-color: #f5f6fa;
    }

    .header {
        background-color: var(--primary-color);
        padding: 1rem 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        color: var(--text-color);
        font-size: 1.5rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .nav-links {
        display: flex;
        gap: 2rem;
        list-style: none;
    }

    .nav-links a {
        color: var(--text-color);
        text-decoration: none;
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background-color: var(--hover-color);
        transform: translateY(-2px);
    }

    .menu-toggle {
        color: var(--text-color);
        font-size: 1.5rem;
        cursor: pointer;
        display: none;
    }

    @media (max-width: 768px) {
        .nav-links {
            position: fixed;
            right: -100%;
            top: 64px;
            flex-direction: column;
            background-color: var(--primary-color);
            width: 100%;
            text-align: center;
            transition: 0.3s;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .nav-links.active {
            right: 0;
        }

        .menu-toggle {
            display: block;
        }

        .nav-links li {
            margin: 1rem 0;
        }
    }

    /* Contenido principal */
    .contenido-principal {
        margin-top: 70px;
        padding: 2rem;
    }

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

    .tarjeta {
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .tarjeta h3 {
        color: var(--primary-color);
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

    .valor {
        color: var(--secondary-color);
        font-size: 2rem;
        font-weight: 600;
    }

    /* Tabla */
    .tabla-servicios {
        width: 100%;
        border-collapse: collapse;
        background: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin-top: 1rem;
    }

    .tabla-servicios th,
    .tabla-servicios td {
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .tabla-servicios th {
        background-color: var(--primary-color);
        color: white;
    }

    /* Gráficos */
    .graficos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }

    .placeholder-grafico {
        height: 300px;
        background: #f0f0f0;
        border-radius: 8px;
        margin-top: 1rem;
    }

    /* Elementos interactivos */
    .boton-filtro {
        padding: 0.5rem 1rem;
        margin-right: 0.5rem;
        border: 1px solid var(--primary-color);
        border-radius: 20px;
        background: none;
        cursor: pointer;
    }

    .boton-filtro.active {
        background: var(--secondary-color);
        color: white;
        border-color: var(--secondary-color);
    }

    .etiqueta {
        background: #e8f4fc;
        color: var(--secondary-color);
        padding: 0.3rem 0.8rem;
        border-radius: 15px;
        font-size: 0.9rem;
    }

    /* Responsividad */
    @media (max-width: 768px) {
        .graficos {
            grid-template-columns: 1fr;
        }

        .tabla-servicios {
            overflow-x: auto;
            display: block;
        }
    }

    /* =============== NUEVOS ESTILOS SEGUROS =============== */
    /* (No afectan elementos existentes) */

    /* Contenedor específico para calendario */
    .seccion-calendario {
        margin: 2rem auto;
        max-width: 1200px;
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* Calendario mejorado (específico) */
    .calendario-mejorado {
        background: #f8f9fa;
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
    }

    /* Tabla específica para calendario */
    .tabla-calendario-mejorada {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        background: white;
        border-radius: 8px;
        overflow: hidden;
    }

    .tabla-calendario-mejorada th {
        background: var(--primary-color);
        color: white;
        font-weight: 500;
        padding: 1.2rem;
        border: none;
    }

    .tabla-calendario-mejorada td {
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
        border: 1px solid #eee;
        padding: 1rem;
        text-align: center;
    }

    /* Mantiene estilos existentes de .seccion original */
    .seccion {
        /* Tus estilos originales se mantienen intactos */
        margin-top: 2rem;
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* Horarios específicos para calendario */
    .horarios-calendario {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.8rem;
        margin-top: 1rem;
    }

    /* Mantiene estilos existentes de .horarios original */
    .horarios {
        /* Tus estilos originales se mantienen */
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    /* Documentos específicos para calendario */
    .documentos-calendario .area-carga {
        border: 2px dashed var(--primary-color);
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        margin: 1rem 0;
        color: var(--primary-color);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    /* ========== BARRA DE ETAPAS ========== */
    .etapas-servicio {
        display: flex;
        justify-content: space-between;
        margin: 2rem auto;
        max-width: 1200px;
        counter-reset: etapa;
    }

    .etapa {
        flex: 1;
        text-align: center;
        position: relative;
        padding: 1rem;
        color: var(--primary-color);
        cursor: pointer;
    }

    .etapa::before {
        content: counter(etapa);
        counter-increment: etapa;
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        background: #e0e0e0;
        margin: 0 auto 0.5rem;
        color: white;
        font-weight: bold;
    }

    .etapa::after {
        content: '';
        position: absolute;
        top: 40%;
        left: 50%;
        width: 100%;
        height: 3px;
        background: #e0e0e0;
        z-index: -1;
    }

    .etapa:last-child::after {
        display: none;
    }

    .etapa.active {
        color: var(--secondary-color);
    }

    .etapa.active::before {
        background: var(--secondary-color);
    }

    .etapa.active::after {
        background: var(--secondary-color);
    }

    /* Separación del menú principal */
    .header {
        margin-bottom: 30px;
    }

    /* Ajuste posición main */
    main {
        margin-top: 100px;
        padding: 0 2rem;
    }

    /* ========= FORMULARIO DE SOPORTE ========= */
    .seccion-formulario {
        max-width: 800px;
        margin: 2rem auto;
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .titulo-seccion {
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        font-size: 1.8rem;
    }

    .formulario-soporte {
        display: grid;
        gap: 1.5rem;
    }

    .campo-formulario label {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--primary-color);
        font-weight: 500;
    }

    .input-text {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .input-text:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    .opciones-sistema {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .opcion {
        background: #f8f9fa;
        padding: 0.8rem 1.5rem;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .opcion:hover {
        background: var(--secondary-color);
        color: white;
    }

    .opcion input[type="radio"] {
        display: none;
    }

    .input-textarea {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        resize: vertical;
    }

    .area-carga-archivos {
        border: 2px dashed var(--primary-color);
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        position: relative;
    }

    .instrucciones {
        color: var(--primary-color);
    }

    .instrucciones i {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .input-archivo {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

    .boton-enviar {
        background: var(--secondary-color);
        color: white;
        padding: 1rem 2rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .boton-enviar:hover {
        background: var(--hover-color);
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        .opciones-sistema {
            flex-direction: column;
        }

        .opcion {
            text-align: center;
        }
    }

    /* Control de visibilidad de secciones */
    .seccion-oculta {
        display: none;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .seccion-activa {
        display: block;
        opacity: 1;
        animation: aparecer 0.5s ease;
    }

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

    .whatsapp-float {
        position: fixed;
        bottom: 20px;
        right: 20px;
        /* Degradado para un efecto más moderno */
        background: linear-gradient(135deg, #25D366, #128C7E);
        color: white;
        border-radius: 50%;
        padding: 20px; /* Aumentamos el padding para que el icono sea más grande */
        font-size: 28px; /* Tamaño de fuente más grande */
        z-index: 10000;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        position: fixed;
    }

    /* Efecto hover para agrandar y realzar la sombra */
    .whatsapp-float:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    /* Pseudo-elemento para agregar un halo sutil al pasar el cursor */
    .whatsapp-float::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        background: rgba(37, 211, 102, 0.2);
        border-radius: 50%;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .whatsapp-float:hover::before {
        opacity: 1;
    }

    /* Preloader que cubre la pantalla */
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white; /* Puedes cambiar el color de fondo */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
    }
    /* Ejemplo de spinner */
    .spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* ===================== Sección de Ayuda y FAQ ===================== */
    .ayuda-container {
      max-width: 900px;
      margin: 0 auto;
      background: #fff;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .ayuda-container h1,
    .ayuda-container h2 {
      color: var(--primary-color);
      margin-bottom: 1rem;
    }

    /* Estilos para los items del FAQ */
    .faq {
      margin-top: 2rem;
    }

    .faq-item {
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-bottom: 1rem;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .faq-question {
      background: var(--primary-color);
      color: var(--text-color);
      padding: 1rem;
      cursor: pointer;
      position: relative;
      font-weight: bold;
    }

    /* Icono con Font Awesome para indicar que se puede expandir */
    .faq-question::after {
      content: "\f078"; /* Código de Font Awesome para 'chevron-down' */
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      right: 1rem;
      transition: transform 0.3s ease;
    }

    .faq-item.active .faq-question::after {
      transform: rotate(180deg);
    }

    .faq-answer {
      padding: 1rem;
      background: #fff;
      display: none;
    }

    .faq-item.active .faq-answer {
      display: block;
    }

    /* Estilos para el formulario de contacto */
    .seccion-formulario {
      margin-top: 1.5rem;
    }

    .titulo-seccion {
      color: var(--primary-color);
      margin-bottom: 1.5rem;
      font-size: 1.8rem;
    }

    .formulario-soporte {
      display: grid;
      gap: 1.5rem;
    }

    .campo-formulario label {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--primary-color);
      font-weight: 500;
    }

    .input-text,
    .input-textarea {
      width: 100%;
      padding: 0.8rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .input-text:focus,
    .input-textarea:focus {
      border-color: var(--secondary-color);
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    .boton-enviar {
      background: var(--secondary-color);
      color: white;
      padding: 1rem 2rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    .boton-enviar:hover {
      background: var(--hover-color);
      transform: translateY(-2px);
    }

    /* ===================== Footer ===================== */
    .footer {
        background-color: var(--primary-color);
        color: var(--text-color);
        padding: 1rem 2rem;
        text-align: center;
        font-size: 0.9rem;
    }

    .footer .container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer p {
        margin: 0.5rem 0;
    }

    .footer .social-links {
        list-style: none;
        display: flex;
        gap: 1rem;
        margin: 0.5rem 0;
        padding: 0;
    }

    .footer .social-links li a {
        color: var(--text-color);
        font-size: 1.2rem;
        transition: color 0.3s ease;
    }

    .footer .social-links li a:hover {
        color: var(--hover-color);
    }

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

    .grafico {
        background: white;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    canvas {
        width: 100% !important;
        height: 300px;
    }

    /* Encabezado del calendario */
    .header-calendario {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .btn-nav {
        background: var(--secondary-color);
        border: none;
        color: white;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.3s ease;
    }

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

    /* Calendario */
    .tabla-calendario-mejorada table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

    .tabla-calendario-mejorada th,
    .tabla-calendario-mejorada td {
        padding: 0.8rem;
        border: 1px solid #ddd;
    }

    .tabla-calendario-mejorada td {
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .tabla-calendario-mejorada td:hover,
    .tabla-calendario-mejorada td.selected {
        background: var(--secondary-color);
        color: white;
    }

    /* Franjas horarias */
    .horarios-calendario button.hora {
        background: #f8f9fa;
        border: 1px solid var(--primary-color);
        padding: 0.6rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .horarios-calendario button.hora.selected,
    .horarios-calendario button.hora:hover {
        background: var(--secondary-color);
        color: white;
    }

    /* Opciones de sistema operativo - estilo de botones */
    .opciones-sistema {
        display: flex;
        gap: 1rem;
    }

    .opcion {
        display: inline-block;
        background: #f8f9fa;
        border: 1px solid var(--primary-color);
        border-radius: 20px;
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease;
    }

    .opcion input[type="radio"] {
        display: none;
    }

    .opcion:hover,
    .opcion input[type="radio"]:checked + span {
        background: var(--secondary-color);
        color: white;
    }

    /* Ajuste general para el select de servicio */
    select.input-text {
        appearance: none;
        padding: 0.8rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 100%;
    }

    button.hora.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Clase para evitar que se pueda hacer clic en las etapas completadas */
    .no-click {
        cursor: default;
        pointer-events: none;
    }

/* Para que en móviles el contenedor del calendario permita scroll horizontal */
#calendar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Se sugiere asignar un ancho mínimo a la tabla para que se active el scroll */
#calendar table {
    min-width: 600px; /* Ajusta este valor según lo que necesites */
}