/* Tema claro (default — Bootstrap usa --bs-body-bg automáticamente).
   Sobrescribimos solo el fondo para tener un gris muy suave.            */
body {
    background: var(--bs-body-bg, #f7f7fa);
}

/* En tema claro, mantenemos el gris suave que tenía la web original.    */
[data-bs-theme="light"] body {
    background: #f7f7fa;
}

[data-bs-theme="light"] .list-group-item-action:hover {
    background: #eef3ff;
}

[data-bs-theme="light"] .card {
    border: 1px solid #e3e6ea;
}

/* Tema oscuro: Bootstrap 5.3 ya provee colores via tokens. Solo afinamos
   el hover de los list-groups (Bootstrap deja un hover demasiado claro). */
[data-bs-theme="dark"] body {
    background: #121417;
}

[data-bs-theme="dark"] .list-group-item-action:hover {
    background: #1f2630;
}

.navbar-brand {
    font-weight: 600;
}

/* Logo PEYMAR — PNG ya con fondo transparente. Nada más que hacer:
   las letras naranjas se ven sobre cualquier fondo.
   Tamaño FIJO (la clase gana en especificidad a cualquier regla `img`):
   blinda el logo de la navbar contra reglas responsive que pudieran
   inflarlo. El alto coincide con el atributo height="32" del HTML. */
.logo-peymar {
    height: 32px;
    width: auto;
}

/* ───────────────────────────────────────────────────────────────────
   ÁREA SEGURA DEL SISTEMA — barra de estado, isla dinámica, notch,
   indicador de inicio del iPhone y barra de gestos de Android.

   ⚠ FUERA DE TODO @media A PROPÓSITO (auditoría 31-07-2026). Antes
   vivía dentro del bloque de teléfonos de abajo y por eso NO entraba
   en dos casos reales:
     · el iPhone EN APAISADO (~852 px de ancho): ahí el hueco no está
       arriba sino a los LADOS, y la campana, el interruptor de tema y
       el menú de usuario caían bajo la isla;
     · el iPad (768-1180 px), donde la app también se usa.
   base.html declara viewport-fit=cover, así que la webview se dibuja
   hasta el borde en TODAS las anchuras.
   En el PC env() vale 0 → el escritorio no cambia ni un píxel.
   Reversible: borrar este bloque.
   ─────────────────────────────────────────────────────────────────── */

/* ⚠ El 0.25rem es el `py-1` del <nav> de base.html:117. Si allí cambia
   el py-N, cambiar aquí también (ya se desincronizó una vez: el
   comentario viejo decía py-2).
   !important: las utilidades py-* de Bootstrap lo llevan y, sin él, no
   entramos. Los laterales van SIN base propia porque el padding
   horizontal del navbar de Bootstrap es 0: así en el PC siguen valiendo
   0 y el logo no se mueve. */
.navbar.sticky-top {
    padding-top: calc(0.25rem + env(safe-area-inset-top, 0px)) !important;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* El contenido tampoco puede meterse bajo la isla en apaisado. Los
   0.75rem son EXACTAMENTE los que pone Bootstrap (--bs-gutter-x/2), así
   que en el PC esto es la regla de siempre. */
.container, .container-fluid {
    padding-left: calc(0.75rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.75rem + env(safe-area-inset-right, 0px));
}

/* Abajo: el final de la página, por encima de la barra de gestos. */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Las barras de acción pegadas abajo se anclan a la VENTANA, no al
   body, así que el relleno del body NO las salva: sin esto, el botón de
   confirmar queda debajo de la barra del sistema.
   Se levantan con MARGEN y no tocando su relleno: cada plantilla fija el
   suyo en su propio <style> y así no hay que adivinarlo ni pisarlo. En
   el PC el margen vale 0 y queda todo igual que hoy.
   !important: esos <style> van después de esta hoja y nos ganarían. */
.pp-actions,        /* calibracion_pedido.html — botón «Subir a SAP»      */
.pp-sticky-bottom,  /* propuesta_detalle.html — introducir cotización     */
.cal-action-bar,    /* calibracion_detalle.html — acciones del correo     */
.sticky-bottom, .fixed-bottom {   /* utilidades de Bootstrap, por si acaso */
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ───────────────────────────────────────────────────────────────────
   MÓVIL — ajustes responsive para la app iOS (Capacitor sobre
   peymarapp.com). Añadido 2026-06-10.

   ⚠ TODO va dentro de @media (max-width: 767px): SOLO afecta a
   teléfonos. La vista de escritorio del equipo en la oficina queda
   EXACTAMENTE igual. Reversible: borrar este bloque y listo.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Nada se sale del ancho de la pantalla (evita scroll horizontal
       de toda la página y el típico "todo diminuto"). */
    html, body { max-width: 100%; overflow-x: hidden; }
    img, pre, code, video, iframe, canvas { max-width: 100%; }
    /* `height: auto` SOLO para imágenes sin alto explícito. Ojo: un
       `img { height: auto }` global anula el atributo HTML `height="32"`
       del logo de la navbar (el CSS gana al atributo presentacional) y lo
       inflaba a pantalla completa. Excluyendo las imágenes con `height`
       propio, el logo conserva sus 32px y las de contenido siguen siendo
       responsive. (Fix 2026-06-10) */
    img:not([height]) { height: auto; }

    /* Tablas anchas (pedidos, cobros, expediciones…): se desplazan en
       horizontal dentro de su caja en vez de reventar el layout.
       Las 41 plantillas que ya usan .table-responsive solo ganan inercia
       táctil; las 23 tablas "sueltas" pasan a poder desplazarse. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Botones y campos cómodos para el dedo. 16px en los inputs evita
       que iOS haga zoom automático al enfocar un campo. */
    .btn { min-height: 44px; }
    .btn, .form-control, .form-select, input, select, textarea { font-size: 16px; }

    /* (El margen lateral de los contenedores y el área segura del navbar
       viven ARRIBA, fuera de este @media: los mismos 12px de siempre más
       el hueco del sistema, para que valgan también en iPad y en
       apaisado. No repetirlos aquí o habría dos fuentes de verdad.) */
}