/* ============================================================
   AgriGonza — Ajustes responsive comunes
   ------------------------------------------------------------
   Se carga DESPUES del CSS propio de cada vista, para poder
   corregir lo que las hojas de estilo individuales dejan mal
   en pantallas de celular. Aqui solo van reglas transversales:
   lo especifico de una vista sigue en su propia hoja.
   ============================================================ */


/* ---------- 1. Nada se sale de la pantalla ----------
   Un solo elemento ancho (una imagen, una URL larga, una tabla)
   provoca scroll horizontal en TODA la pagina y arruina el
   diseño en movil. Estas guardas lo evitan de raiz. */

html {
    /* Evita que iOS reescale el texto al girar el telefono */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
canvas,
svg:not([width]) {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Palabras muy largas (correos, URLs, documentos) que estiran
   la caja que las contiene. */
p,
h1, h2, h3, h4,
td, th,
li,
label,
.celda-titulo,
.celda-desc {
    overflow-wrap: break-word;
}


/* ---------- 2. Sin zoom automatico al escribir (iOS) ----------
   Safari en iPhone hace zoom a la pagina cuando enfocas un campo
   con letra menor a 16px, y el usuario queda con el diseño
   descuadrado y desplazado. Subir la letra a 16px lo desactiva.
   Solo aplica en pantallas tactiles chicas: en escritorio se
   conserva la tipografia original del diseño. */

@media (max-width: 900px) {
    input,
    select,
    textarea,
    #chat-input,
    .chatbot-input {
        /* Nunca menos de 16px, pero sigue creciendo si el usuario
           activo "texto grande" en el panel de accesibilidad. */
        font-size: max(16px, 1rem) !important;
    }
}


/* ---------- 3. Zonas tactiles usables con el dedo ----------
   Un boton de 30px es dificil de acertar con el pulgar. Se suben
   solo los botones con texto: a los botones circulares de icono
   NO se les toca la altura, porque un min-height los volveria
   ovalos (el ancho lo fija su propia hoja de estilo). */

@media (max-width: 760px) {
    .btn,
    .btn-sm,
    a.btn,
    button[type="submit"]:not(.chat-enviar):not(.grabacion-enviar):not(.chatbot-enviar),
    input[type="submit"],
    input[type="button"] {
        min-height: 42px;
    }

    /* Enlaces de navegacion con forma de pastilla */
    .volver-link,
    .volver,
    .chat-global-link,
    .cerrar-sesion-link {
        min-height: 42px;
    }

    /* Las acciones dentro de tablas y tarjetas se reparten el ancho
       en lugar de amontonarse. Cada accion va envuelta en un <form>,
       asi que el ancho hay que pasarlo tambien al boton de dentro. */
    .acciones-fila {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .acciones-fila > * {
        flex: 1 1 auto;
    }
    .acciones-fila form {
        display: flex;
    }
    .acciones-fila form > .btn {
        flex: 1;
        justify-content: center;
    }
}


/* ---------- 4. Muescas y barras del sistema (notch) ----------
   En iPhone con notch y en Android con barra de gestos, el
   contenido pegado a los bordes queda tapado. */

@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}


/* ---------- 5. Tablas: de rejilla a tarjetas ----------
   Las tablas de administracion tienen hasta 9 columnas y un
   min-width de 800px; en un celular obligan a hacer scroll
   horizontal y solo se ve un tercio de la informacion.
   Debajo de 760px cada fila se vuelve una tarjeta y cada celda
   muestra su encabezado con el atributo data-label. */

@media (max-width: 760px) {

    .tabla-wrap,
    .reciente-tabla-wrap {
        overflow-x: visible;
        border: none;
        background: transparent;
    }

    .tabla-wrap table,
    .reciente-tabla-wrap table,
    table.tabla-responsive {
        min-width: 0 !important;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        display: block;
    }

    /* El encabezado se oculta: cada celda ya lleva su etiqueta */
    .tabla-wrap thead,
    .reciente-tabla-wrap thead,
    table.tabla-responsive thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tabla-wrap tbody,
    .reciente-tabla-wrap tbody,
    table.tabla-responsive tbody {
        display: block;
    }

    .tabla-wrap tbody tr,
    .reciente-tabla-wrap tbody tr,
    table.tabla-responsive tbody tr {
        display: block;
        background: var(--blanco, #ffffff);
        border: 1px solid var(--linea, #d8dfca);
        border-radius: 14px;
        padding: 6px 4px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(27, 46, 31, 0.06);
    }

    .tabla-wrap tbody td,
    .reciente-tabla-wrap tbody td,
    table.tabla-responsive tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        width: auto !important;
        max-width: none !important;
        min-height: 0;
        padding: 8px 12px !important;
        border: none !important;
        border-bottom: 1px solid rgba(216, 223, 202, 0.55) !important;
        text-align: right;
        white-space: normal !important;
    }

    .tabla-wrap tbody tr td:last-child,
    .reciente-tabla-wrap tbody tr td:last-child,
    table.tabla-responsive tbody tr td:last-child {
        border-bottom: none !important;
    }

    /* La etiqueta de la columna, a la izquierda de cada dato */
    .tabla-wrap tbody td[data-label]::before,
    .reciente-tabla-wrap tbody td[data-label]::before,
    table.tabla-responsive tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--campo, #2f6e3c);
        padding-top: 2px;
    }

    /* La descripcion larga se muestra completa, no recortada */
    .tabla-wrap tbody td.celda-desc,
    table.tabla-responsive tbody td.celda-desc {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        overflow: visible;
        text-overflow: clip;
    }
    .tabla-wrap tbody td.celda-desc::before,
    table.tabla-responsive tbody td.celda-desc::before {
        flex: none;
        margin-bottom: 4px;
    }

    /* La celda de acciones ocupa todo el ancho */
    .tabla-wrap tbody td.celda-acciones,
    table.tabla-responsive tbody td.celda-acciones {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .tabla-wrap tbody td.celda-acciones::before,
    table.tabla-responsive tbody td.celda-acciones::before {
        flex: none;
        margin-bottom: 6px;
    }

    /* Fila de "no hay datos": sin etiqueta y centrada */
    .tabla-wrap tbody td.estado-vacio,
    .reciente-tabla-wrap tbody td.estado-vacio,
    .tabla-wrap tbody td.td-empty,
    .reciente-tabla-wrap tbody td.td-empty,
    table.tabla-responsive tbody td.estado-vacio {
        display: block;
        text-align: center;
    }
    .tabla-wrap tbody td.estado-vacio::before,
    .reciente-tabla-wrap tbody td.estado-vacio::before,
    .tabla-wrap tbody td.td-empty::before,
    .reciente-tabla-wrap tbody td.td-empty::before,
    table.tabla-responsive tbody td.estado-vacio::before {
        content: none;
    }
}


/* ---------- 6. Ventanas modales ----------
   Con el teclado abierto una modal de 90vh no cabe, y los
   formularios largos (editar usuario) se salen de la pantalla sin
   forma de desplazarlos. Se usa dvh, que si descuenta el teclado. */

@media (max-width: 760px) {
    dialog {
        width: min(560px, calc(100vw - 24px));
        max-height: 88dvh;
    }

    /* El cuerpo de la modal se desplaza por dentro en vez de
       desbordar la ventana */
    .modal-inner,
    .modal-caja,
    .modal-contenido {
        max-height: 88dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-inner {
        padding: 24px 18px !important;
    }

    .modal-fondo {
        padding: 14px;
    }

    /* Los pies de modal con dos botones se apilan y se estiran */
    .modal-pie,
    .modal-acciones {
        flex-wrap: wrap;
    }
    .modal-pie > *,
    .modal-acciones > * {
        flex: 1 1 140px;
    }
}


/* ---------- 7. Cabeceras de pagina ----------
   La barra superior lleva marca + acciones + avatar. En pantallas
   angostas se permite que baje de linea en vez de desbordarse. */

@media (max-width: 560px) {
    header {
        flex-wrap: wrap;
        gap: 12px;
        row-gap: 12px;
    }

    .header-derecha {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .pagina-cabecera h1,
    .panel-cabeza h1 {
        font-size: clamp(1.4rem, 6vw, 1.9rem);
    }
}


/* ---------- 8. Formularios en dos columnas ----------
   Cualquier rejilla de dos columnas del proyecto pasa a una sola
   en celular, incluso si su hoja de estilo no lo contemplaba. */

@media (max-width: 640px) {
    .grid-2,
    .fila-oferta,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .form-acciones,
    .acciones {
        flex-wrap: wrap;
    }
    .form-acciones > .btn,
    .form-acciones > button {
        flex: 1 1 100%;
    }
}


/* Nota: los ajustes moviles del widget del chatbot viven en
   chatbot_bot/assets/css/chatbot.css, porque esa hoja se carga
   despues de esta y de otro modo ganaria siempre. */


/* ==========================================================================
   FOTO DE PERFIL
   Rellena cualquier contenedor de avatar que ya exista en la vista
   (.avatar, .comerciante-avatar, .td-avatar, .perfil-avatar, .avatar-contacto).
   Vive aca, y no en cada hoja, porque responsive.css es la unica que cargan
   todas las pantallas y ademas se incluye de ultima: asi la foto gana sobre el
   degradado del contenedor sin necesidad de !important.
   ========================================================================== */

.avatar-foto {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* Casi todos los contenedores de avatar son flex (centraban la inicial).
       Sin esto, la foto entraria como item flexible y se encogeria. */
    flex-shrink: 0;
    align-self: stretch;
}

/* El contenedor deja de aportar fondo y tipografia cuando lo que hay dentro
   es una foto: el degradado se veria como un borde de color al recortar. */
.avatar:has(> .avatar-foto),
.comerciante-avatar:has(> .avatar-foto),
.td-avatar:has(> .avatar-foto),
.perfil-avatar:has(> .avatar-foto),
.avatar-contacto:has(> .avatar-foto),
.rep-avatar:has(> .avatar-foto),
.rep-comentario-avatar:has(> .avatar-foto),
.avatar-mini:has(> .avatar-foto) {
    background: transparent;
    padding: 0;
    overflow: hidden;
}