/* Estilos especificos para la seccion de quejas */

:root {
    --main-fondo: #1e293b;
    --borde-color: #334155;
    --borde-input: #475569;
    --bg-naranja: #f59e0b;
    --borde-naranja: #d97706;
    --texto-blanco: #fff;
    --texto-input: #94a3b8;
    --texto-label: #e2e8f0;
    --fondo-input: #0f172a;
    --radio-caja: 8px;
    --radio-form: 10px;
    --radio-input: 6px;
    --margen-chico: 8px;
    --margen-mediano: 20px;
}

/* la caja naranja que avisa que esta en desarrollo */
.aviso-desarrollo {
    background-color: var(--bg-naranja);
    /* color de fondo naranja */
    color: var(--texto-blanco);
    /* color del texto en blanco */
    padding: 15px;
    /* relleno interior para separar el texto de los bordes */
    border-radius: var(--radio-caja);
    /* hace que las esquinas de la caja se vean curvas */
    margin: 0 auto var(--margen-mediano) auto;
    /* 0 arriba, auto los lados (para centrar), 20px abajo, auto izquierda */
    max-width: 600px;
    /* establece el tamano maximo de ancho para que no se estire en pantallas grandes */
    font-weight: bold;
    /* pone las letras mas gruesas (negritas) */
    border: 1px solid var(--borde-naranja);
    /* linea continua de borde de 1 pixel color naranja oscuro */
}

/* el cuadro oscuro principal donde va dentro todo el formulario */
.caja-formulario {
    background-color: var(--main-fondo);
    /* fondo grisaceo/azul muy oscuro */
    border: 1px solid var(--borde-color);
    /* linea de contorno gris oscuro, delimita la caja */
    border-radius: var(--radio-form);
    /* esquinas redondas con radio de 10 pixeles */
    padding: 30px;
    /* separacion amplia entre el borde y su contenido (30 pixeles en los 4 lados) */
    max-width: 600px;
    /* mismo ancho maximo limite que la caja de arriba para parejear el diseño */
    margin: 0 auto;
    /* margen 0 arriba y abajo, "auto" a los lados lo cual empuja la caja al centro */
    text-align: left;
    /* fuerza a que los textos y cajas dentro se peguen por defecto a la izquierda */
}

/* las envolturas que separan un label (texto de etiqueta) del input (caja donde escribes) */
.grupo-campo {
    margin-bottom: var(--margen-mediano);
    /* empuja 20 pixeles invisibles hacia abajo para que la siguiente caja no estorbe */
}

/* el pequeño texto que le indica al usuario que llenar "Nombre", "Correo", etc */
.grupo-campo label {
    display: block;
    /* obliga al texto a abarcar toda la fila horizontal; asi el input cae abajo por default */
    margin-bottom: var(--margen-chico);
    /* deja una ranura de 8 pixeles de aire entre el texto y la caja de escritura */
    font-weight: bold;
    /* pone este pequeño titulo marcado en negritas */
    color: var(--texto-label);
    /* aplica un color gris sumamente bajito acercado al blanco */
}

/* este bloque agrupa todas las cajas que reciben interaccion del usuario:
caja chica de texto, cajita de la lista de opciones (select) y la cajota gigante (textarea) */
.grupo-campo input,
.grupo-campo select,
.grupo-campo textarea {
    width: 100%;
    /* le dice a la caja de escribir que de lado a lado absorba todo el ancho padre (caja-formulario) */
    padding: 12px;
    /* colchon interno de 12px para que al escribir el nombre no este restregado vs el borde */
    border-radius: var(--radio-input);
    /* esquinas redondeadas chiquitas */
    border: 1px solid var(--borde-input);
    /* orillita solida de 1px apenas perceptible de gris intermedio */
    background-color: var(--fondo-input);
    /* el color solido oscuro estilo terminal para la cajita que recive texto */
    color: var(--texto-input);
    /* la letra con la que el usuario escribe sera entre ploma y azul grisaceo oscuro */
    font-family: inherit;
    /* no usa otra tipografia diferente sino que chupa o hereda (inherit) la del body (Arial) */
    font-size: 16px;
    /* 16px previene que el iphone haga zoom loco molesto al picarle a un select */
    cursor: not-allowed;
    /* si tienes pc normal (mouse), dibuja sobre estas cajas el tachado universal de NO DISPONIBLE */
    opacity: 0.7;
    /* hace que se vean levemente despintadas o fantasmas (efecto deshabilitado visual) */
}

/* cuando pinchas las cajitas (focus = enfocado por teclado o touch pero que estan muertas ahorita) */
.grupo-campo input:focus,
.grupo-campo select:focus,
.grupo-campo textarea:focus {
    outline: none;
    /* quita el outline nativo (usualmente aros azules o naranjas) que el navegador le mete x default */
    border-color: #475569;
    /* dice "ok no me pintes outline loco de focus, mejor me devuelves mi borde grisecito asbesto" */
}

/* el boton largo hasta abajo de mandar el formulario */
.btn-enviar {
    width: 100%;
    /* rellenar lado a lado horizontal el boton */
    padding: 14px;
    /* acolchado superior e inferior para hacerlo verse grueso y tocable (pulgar movil friendly) */
    background-color: var(--borde-input);
    /* lo pinto liso en gris "roca" para sugerir sin decirtelo que el color no jala (pq ta en desarollo) */
    color: var(--texto-input);
    /* texto palido que empata con "estoy viejo o inactivo en este momento" */
    border: none;
    /* le quita los feos cuadros biselados grises 3d que meten todos los botones base HTML nativos */
    border-radius: var(--radio-input);
    /* quiebra los filos esquinados del rectangulo base del boton */
    font-size: 16px;
    /* al igual que el input arriba es un tamaño de texto facil d captar desde la pantalla telefono a un palmo */
    font-weight: bold;
    /* engrosa las letras internamente de la fuente */
    cursor: not-allowed;
    /* tu mouse cambia y simula otra vez q es in-clickeable y asi das pistas correctas desde lo visual */
    margin-top: 10px;
    /* ultimo aliento d margen para q no colisione tan cercano al select o cajote que esta arrimandosele arriba */
}



/* para amoldar la estructura en celulares normales (hasta un max-width de 600px) */
@media screen and (max-width: 600px) {
    /* atrapo la caja principal externa donde metí todo el formulario */
    .caja-formulario {
        /* le reduzco un poco el espacio de adentro bajando el padding a 15px para que la pantalla no se sienta apretada */
        padding: 15px;
    }
}

/* aquí ajusto el diseño para las tablets bonitas (entre 601px y 1024px) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* elijo nuevamente todo el cascarón del formulario */
    .caja-formulario {
        /* le aumento el colchoncito a 25px porque una tablet tiene pantalla suficiente para darle más aire y que se vea lindo */
        padding: 25px;
    }
}

/* y para los teléfonos súper estrechitos o más viejitos (máximo 380px) */
@media screen and (max-width: 380px) {
    /* recojo nada más el párrafo donde dejé el aviso naranja */
    .aviso-desarrollo {
        /* reescribo las propiedades para hacer la letra más chiquita a solo 14px... si no, se hacen dos líneas súper feas y se rompe el cajoncito */
        font-size: 14px;
    }
}

/* al entrar en compus portátiles y monitores grandecitos (cuando lleguen al menos a 1025px) */
@media screen and (min-width: 1025px) {
    /* pesco la misma dichosa cajita del envío */
    .caja-formulario {
        /* la inflo poniéndole 40px en sus lados, queda muy bien centradita en una pantalla de escritorio */
        padding: 40px;
    }
}

/* para los monitores ultra anchos o pantallas gigantes (de 1400px en adelante) */
@media screen and (min-width: 1400px) {
    /* rescato mis alertitas naranja */
    .aviso-desarrollo {
        /* no dejo que crezcan desproporcionadas poniéndoles un tope máximo de 800px... no quiero que sean líneas de texto infinitas de lado a lado */
        max-width: 800px;
    }

    /* escojo también la gran envoltura del form */
    .caja-formulario {
        /* de nuevo las limito forzando con max-width igual a 800 píxeles... evito que el panel se vea raro por tan ancho */
        max-width: 800px;
    }
}

/* esta regla media detecta si la persona está usando un mouse de verdad y no el dedo de su celular */
@media (hover: hover) {
    /* le agarro al botón enorme de enviar cuando le pasan la flechita por arriba (su estado hover) */
    .btn-enviar:hover {
        /* le bajo tantito la opacidad a 0.9 para darle ese efectito sutil de que sí lo estás tocando con el cursor */
        opacity: 0.9;
    }
}

/* para celulares de esos que son mega mini miniatura (menos de 320px) */
@media screen and (max-width: 320px) {
    /* voy a cambiar directamente las letritas de arriba de las cajas de texto */
    .texto-label { 
        /* le bajo el tamaño de letra a 13px para salvar esa pantalla enanita */
        font-size: 13px; 
    }
}

/* las famosas pantallas 4k enormes (desde sus 2560px de ancho) */
@media screen and (min-width: 2560px) {
    /* invoco de nuevo la cajita principal de este formulario de reportes */
    .caja-formulario { 
        /* le inyecto unos grandísimos 60px de padding interior por todos lados... para mantener la fluidez en esta enorme resolución */
        padding: 60px; 
    }
}

/* por si les gusta a los profes leer en modo claro natural de sistema de su celu */
@media (prefers-color-scheme: light) {
    /* apunto directo a mis avisitos del sitio */
    .aviso-desarrollo { 
        /* le marco un borde bien definido con border solid coral de 2px de grosor para que destaque si su vista general es blanquita */
        border: 2px solid coral; 
    }
}

/* si acuestan la tablet en horizontal (landscape a partir de mínimo 800px) */
@media screen and (min-width: 800px) and (orientation: landscape) {
    /* voy a la madre general de la forma html del formulario */
    .caja-formulario { 
        /* limito su ancho bajándolo a un bonito y cómodo 70% de la pantalla */
        width: 70%; 
        /* y la magia obvia... un lindo margin auto para tirar este molde directo y perrón al centro, súper balanceado */
        margin: auto; 
    }
}

/* regla súper bonita de accesibilidad por si la gente configuró en su panel no querer tener movimientos extraños para cuidar sus ojos */
@media (prefers-reduced-motion: reduce) {
    /* agarramos a nuestro clásico botoncito lindo de envíos */
    .btn-enviar { 
        /* anulo completamente cualquier transición o duración poniéndole "none" para que aparezca todo en flash e instantáneo sin movimientos mareadores */
        transition: none; 
    }
}