/* ==========================================================================
   TERE Frontliner — Responsive layer (shared by all pages)
   Loaded AFTER each page's inline <style>, so same-specificity rules here win.
   Mobile-first overrides; desktop styles remain as defined per page.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* Comfortable touch targets everywhere */
.btn, .btn-search, .logout-btn, .nav-links a, .pager button, .card a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
}
button, input, select, textarea { font-family: inherit; }

/* Header: allow wrapping on any width */
header { flex-wrap: wrap; gap: 10px 15px; }
header h1 { min-width: 0; overflow-wrap: anywhere; }
.nav-links { flex-wrap: wrap; gap: 6px; }
.nav-links a { margin-left: 0; white-space: nowrap; }

/* Tables: never break page width */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Tablet & down ---------- */
@media (max-width: 900px) {
    .container { padding: 0 16px; margin-top: 16px; margin-bottom: 24px; }
    .card { padding: 18px; }
    .form-row { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
    header { padding: 12px 16px; }
    header h1 { font-size: 17px; width: 100%; }
    .header-info { font-size: 12px; }

    /* Header stacks: title, info, then nav/logout at the bottom */
    header { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
    .logout-btn { float: none; width: 100%; order: 99; margin-top: 4px; }
    .nav-links { order: 99; }

    .nav-links { width: 100%; }
    .nav-links a { flex: 1 1 auto; font-size: 13px; padding: 10px 8px; }

    .container { padding: 0 12px; }
    .card { padding: 16px; border-radius: 8px; }
    .card h2 { font-size: 16px; }
    .card:hover { transform: none; }
    .section-title { font-size: 17px; margin-top: 24px; }
    .dashboard-grid { grid-template-columns: 1fr; gap: 14px; }

    /* Inputs: 16px avoids iOS auto-zoom on focus */
    input, select, textarea { font-size: 16px !important; }
    .form-group { min-width: 0; }
    .form-group input, .form-group select, .form-group textarea { padding: 12px; }

    /* Search form (dashboard/detalle): stack input + button */
    .search-form { flex-direction: column; align-items: stretch; gap: 12px; }
    .btn-search { width: 100%; padding: 12px; }

    /* Info grids collapse to one column */
    .info-row { grid-template-columns: 1fr; gap: 10px; }
    .info-item { min-width: 0; }
    .info-value { overflow-wrap: anywhere; }

    /* Button groups: full width, stacked */
    .actions, .button-group { flex-direction: column; align-items: stretch; gap: 10px; }
    .actions .btn, .button-group .btn, .actions select { width: 100%; }
    .actions form { width: 100%; }

    /* Pending-action strips (detalle): stack text + button */
    .pending-action { flex-direction: column; align-items: stretch; gap: 10px; }
    .pending-action .btn { width: 100%; }
    .pending-action form { width: 100%; }

    /* Totals */
    .totales { gap: 10px; }
    .tot-item { flex: 1 1 calc(50% - 10px); min-width: 0; }
    .tot-value { font-size: 15px; }

    /* Table tools + pager */
    .table-tools { flex-direction: column; align-items: stretch; }
    .table-tools input { min-width: 0; width: 100%; }
    .table-tools .count { text-align: right; }
    .pager { flex-wrap: wrap; }
    .pager button { padding: 10px 14px; }

    /* Summary (envio_manual) */
    .resumen { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .resumen-item { padding: 12px 8px; }
    .resumen-item .value { font-size: 20px; }

    /* Step indicator (envio_manual) */
    .step-indicator { flex-wrap: wrap; gap: 8px; }
    .step { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
    .step-label { font-size: 11px; margin-left: 6px; }

    /* Login */
    .login-container { padding: 28px 20px; margin: 16px; border-radius: 12px; }
    .login-container h1 { font-size: 20px; }

    /* Code samples must not widen the page */
    pre, code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
    pre { overflow-x: auto; max-width: 100%; font-size: 11px; }
    .card, .card div, .info-box { min-width: 0; overflow-wrap: anywhere; }

    /* Alerts */
    .error, .success, .info, .warn, .info-box { padding: 12px; font-size: 13px; }

    /* Tables: scroll horizontally instead of breaking layout */
    table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    table th, table td { padding: 10px 8px; font-size: 12px; }
}

/* Very small phones */
@media (max-width: 380px) {
    .resumen { grid-template-columns: 1fr; }
    .tot-item { flex-basis: 100%; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}