/*****INICIO CSS CUERPO CONTACTO*****/

/*--css--*/
header.nav-open nav {
    display: flex;
    position: absolute;
    top: 100%;
    right: 1rem;
    flex-direction: column;
    background: #004e89;
    width: 200px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
header.nav-open nav a {
    padding: 0.8rem 1.5rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: background 0.2s;
}
header.nav-open nav a:last-child {
    border-bottom: none;
}
header.nav-open nav a:hover {
    background: rgba(255, 255, 255, 0.1);
}
header.nav-open nav a.active {
    background: orange;
}
/*--css--*/

/* MAIN: formulario */
    main {
      width:100%; padding:90px 0 20px; flex:1;
    }
    .main-inner {
      max-width:900px; margin:0 auto; padding:0 20px;
    }
    .ticket {
      display:none;
      padding:20px;
      margin: 20px auto; /* Center it horizontally and add vertical margin */
      background:#d4edda; color:#155724;
      border:1px solid #b2d8b2; border-radius:6px;
      font-weight:600;
      text-align: center; /* Center the text */
      max-width: 600px; /* Limit its width for better readability */
      position: relative; /* Needed for z-index if overlapping content */
      z-index: 100; /* Ensure it's above other content if needed */
      top: 50px; /* Adjust as needed to bring it down from the top */
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add a subtle shadow */
    }
    .contact-form {
      display:flex; flex-direction:column; gap:20px;
      background:#FFF4E6; padding:30px;
      border-radius:8px;
      box-shadow:0 2px 8px rgba(0,0,0,0.1);
    }
    .form-row { display:flex; flex-direction:column }
    .contact-form label {
      margin-bottom:6px; font-weight:600; color:#004e89;
    }
    /* Estilos para el nuevo grupo de entrada de teléfono */
    .phone-input-group {
        display: flex;
        align-items: center;
        border: 1px solid #bbb;
        border-radius: 6px;
        background-color: #fff;
        min-width: 0;
    }
    .phone-input-group .country-code {
        padding: 8px 5px 8px 10px; /* Ajusta el padding para la alineación visual */
        color: #555; /* Color ligeramente apagado para la parte fija */
        background-color: #f0f0f0; /* Fondo sutil para distinguirlo */
        border-right: 1px solid #bbb;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        font-size: 1rem;
        user-select: none; /* Evita que se pueda seleccionar el +56 */
    }
    .phone-input-group input {
        flex-grow: 1; /* Hace que el input tome el espacio restante */
        border: none; /* Elimina el borde individual del input */
        padding: 8px; /* Coincide el padding de otros inputs */
        border-radius: 0 6px 6px 0; /* Solo esquinas derechas redondeadas */
        font-size: 0.85rem;
    }

    .phone-input-group input {
        flex: 1 1 auto;        /* crece y encoje */
        min-width: 0;           /* ancho mínimo 0 */
        overflow: hidden;       
        text-overflow: ellipsis;
        white-space: nowrap;
     }

     /* Estilo para el placeholder del campo de Teléfono / Whatsapp */
    .phone-input-group input::placeholder {
        white-space: nowrap;      /* Evita que el texto del placeholder salte de línea */
        overflow: hidden;         /* Oculta el texto que excede el ancho del campo */
        text-overflow: ellipsis;  /* Muestra puntos suspensivos (...) si el texto se trunca */
     }

    /* Elimina el borde y padding del input original para que se vea como parte del grupo */
    .contact-form input:not(#whatsapp),
    .contact-form textarea {
      padding:8px; border:1px solid #bbb;
      border-radius:6px; font-size:1rem;
    }
    .phone-input-group input:focus {
        outline: none; /* Quita el contorno de enfoque por defecto */
    }
    /* Estilo de enfoque para el grupo completo del teléfono */
    .phone-input-group:focus-within {
        border-color: #004e89;
        box-shadow: 0 0 0 0.1rem rgba(0, 78, 137, 0.25); /* Sombra sutil al enfocar */
    }
    .contact-form input::placeholder { color:#999 }
    .contact-form textarea {
      resize:vertical; min-height:120px;
    }
    .char-count {
      font-size:.85rem; color:#666; text-align:right;
      margin-top:4px;
    }
    .error-message {
      color:red; font-size:.85rem;
      margin-top:4px; display:none;
    }
    .contact-form .captcha {
      display:flex; align-items:center;
    }

    /* Estilos para el checkbox "No soy un robot" */
    .contact-form .captcha input[type="checkbox"] {
        /* Oculta el checkbox nativo */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        /* Estilos del checkbox personalizado */
        width: 22px; /* Tamaño del cuadro */
        height: 22px;
        border: 2px solid #004e89; /* Borde azul oscuro */
        border-radius: 4px; /* Esquinas ligeramente redondeadas */
        background-color: #fff;
        cursor: pointer;
        position: relative; /* Necesario para la marca de verificación */
        margin-right: 10px; /* Espacio entre el cuadro y la etiqueta */
        flex-shrink: 0; /* Evita que el cuadro se encoja */
        transition: background-color 0.2s, border-color 0.2s;
    }

    /* Estilo de la marca de verificación cuando está marcado */
    .contact-form .captcha input[type="checkbox"]:checked {
        background-color: #00A86B; /* Nuevo: Fondo verde de aceptación */
        border-color: #00A86B; /* Nuevo: Borde verde de aceptación */
    }

    .contact-form .captcha input[type="checkbox"]:checked::after {
        content: '';
        position: absolute;
        top: 3px; /* Ajusta para centrar verticalmente */
        left: 7px; /* Ajusta para centrar horizontalmente */
        width: 6px; /* Ancho de la marca */
        height: 12px; /* Alto de la marca */
        border: solid white; /* Marca blanca */
        border-width: 0 2px 2px 0; /* Solo bordes inferior y derecho */
        transform: rotate(45deg); /* Rotar para formar la marca de verificación */
    }

    /* Estilo de enfoque para accesibilidad */
    .contact-form .captcha input[type="checkbox"]:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 78, 137, 0.4); /* Resplandor azul al enfocar */
    }

    /* Estilo de la etiqueta del checkbox (en negrita y color de cabecera) */
    .contact-form .captcha label {
        font-weight: bold; /* En negrita */
        color: #004e89; /* Color del fondo de cabecera */
        cursor: pointer;
        margin-bottom: 0; 
    }

    /* Estilos para el mensaje de privacidad */
    .privacy-text {
        font-size: 0.9rem;
        color: #004e89; /* Color del fondo de cabecera */
        font-weight: bold; /* Negrita */
        margin-top: 15px; 
        margin-bottom: 15px; 
        padding: 8px 12px;
        background-color: #f0f8ff; 
        border: 1px solid #cceeff; 
        border-radius: 5px;
        line-height: 1.4;
        text-align: center;
        max-width: 500px; 
        margin-left: auto; 
        margin-right: auto; 
    }


    /* New class: Only for the row containing the buttons */
    .form-buttons-row {
        display: flex;
        flex-direction: row; /* Align buttons in a row */
        justify-content: space-between; /* Distribuye los botones a los extremos */
        align-items: center;
    }
    .form-buttons-row button { /* Apply to all buttons within this specific row */
      padding:10px 20px;
      border:none; border-radius:6px; cursor:pointer;
      transition:background .2s;
    }
    .form-buttons-row button[type="submit"] {
      background:#004e89; color:#fff;
    }
    .form-buttons-row button[type="submit"]:hover {
      background:#003766;
    }
    /* Style for the new "Limpiar" button */
    #clear-btn {
        background: #6c757d; /* A neutral color for clear button */
    }
    #clear-btn:hover {
        background: #5a6268;
    }

    /* MODAL */
    .modal-overlay {
      position:fixed; top:0; left:0; width:100%; height:100%;
      background:rgba(0,0,0,0.5); display:none;
      align-items:center; justify-content:center;
      z-index:2000;
    }
    .modal {
      background:#fff; padding:20px; border-radius:8px;
      max-width:500px; width:90%;
      box-shadow:0 2px 10px rgba(0,0,0,0.2);
    }
    .modal pre {
      white-space:pre-wrap; word-break:break-word;
      background:#f7f7f7; padding:10px; border-radius:6px;
      max-height:300px; overflow:auto;
    }
    .modal .buttons {
      margin-top:15px; display:flex; gap:10px; justify-content:flex-end;
    }
    .modal button {
      padding:8px 16px; border:none; border-radius:6px;
      cursor:pointer; font-size:1rem;
    }
    .btn-cancel { background:#6c757d; color:#fff }
    .btn-send   { background:#28a745; color:#fff }

/* contacto adaptativo-responsivo */
@media (min-width: 768px) {
    nav { display: flex; justify-content: center; }
    nav a { padding: 0 12px; color: #fff; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
    nav a:hover { opacity: 0.7; }
    nav a.active { border-bottom: 2px solid #fff; }
}

@media (max-width: 767px) and (orientation: portrait) {
    .footer-content { flex-direction: column; align-items: center; text-align: center; }
    .footer-left,
    .footer-center,
    .footer-right { text-align: center; width: 100%; margin-bottom: 20px; position: static; align-items: center; justify-content: center; }
    .footer-logo { margin-bottom: 10px; }
    .footer-copy { text-align: center; }
    .contact-email,
    .contact-tel { display: block; margin: 10px 0; }
}

@media (max-width: 300px) {
     .phone-input-group input { font-size: 0.75rem; }
}