/*
 * Estilos de la aplicación de campo.
 *
 * Los valores de diseño (colores, tamaños, sombras) van en línea en index.html,
 * copiados tal cual del handoff de Claude Design para no perder fidelidad. Aquí
 * solo queda lo que no se puede escribir en línea: el marco de la app, las
 * animaciones y los estados :hover.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: #EDF1F6;
    font-family: "Open Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

a { color: #18305B; }
a:hover { color: #122752; }

input, select, textarea, button { font-family: "Open Sans", system-ui, sans-serif; }

[x-cloak] { display: none !important; }

/* Marco: a lo ancho del celular; en pantallas grandes, una columna centrada. */
.app {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 412px;
    margin: 0 auto;
    background: #F6F8FB;
    /* clip y no hidden: hidden convierte el marco en contenedor de scroll y
       rompe las barras position:sticky del pie. */
    overflow-x: clip;
}

@media (min-width: 480px) {
    .app { box-shadow: 0 0 0 1px rgba(7, 18, 51, .06), 0 24px 60px rgba(7, 18, 51, .14); }
}

/* Capas (diálogos y hojas inferiores): fijas a la ventana, del ancho del marco. */
.capa {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 412px;
    margin: 0 auto;
}

/* Los botones fijos del pie (Continuar, Completar, Exportar) van encima de la
   barra de navegación, que también está fija abajo; si no, quedan tapados.
   59px es el alto de la barra; el margen seguro ya lo añade la propia barra. */
.sobre-nav { bottom: calc(59px + env(safe-area-inset-bottom)) !important; }

/* Márgenes seguros de los celulares con muesca o barra de gestos. */
.pie-seguro { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
.nav-segura { padding-bottom: calc(11px + env(safe-area-inset-bottom)) !important; }

@keyframes cfspin { to { transform: rotate(360deg); } }

/* El icono que gira mientras se actualiza o se guarda. */
.girando { display: inline-block; animation: cfspin .9s linear infinite; }
@keyframes cfbar { 0% { width: 6%; } 60% { width: 72%; } 100% { width: 96%; } }
@keyframes cffade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Escáner: recuadro con esquinas y la línea que barre, como cualquier lector de
   códigos del celular. El resto de la imagen se oscurece con una sombra enorme,
   que es la forma de recortar un hueco sin superponer cuatro paneles. */
.escaner-marco {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 6px;
    box-shadow: 0 0 0 2000px rgba(7, 18, 51, .5);
}

.escaner-marco .esquina {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid #2FBF71;
}

.escaner-linea {
    position: absolute;
    left: 5px;
    right: 5px;
    height: 2px;
    background: #FF1616;
    box-shadow: 0 0 9px rgba(255, 22, 22, .95);
    animation: cflaser 2.1s ease-in-out infinite;
}

@keyframes cflaser { 0%, 100% { top: 6%; } 50% { top: 94%; } }

/* Hover del design system: los sólidos un paso más oscuros, los secundarios se
   rellenan. !important porque el color base va en línea. */
.hv-rojo:not(:disabled):hover { background: #E01212 !important; }
.hv-navy:not(:disabled):hover { background: #122752 !important; }
.hv-claro:not(:disabled):hover { background: #EDF2F9 !important; }
.hv-info:not(:disabled):hover { background: #DCEFFD !important; }
.hv-peligro:not(:disabled):hover { background: #FFE0E0 !important; }
.hv-vidrio:not(:disabled):hover { background: rgba(255, 255, 255, .16) !important; }
.hv-borde:hover { border-color: #A9BCD8 !important; }

input::placeholder { color: #A9BCD8; }
.oscuro::placeholder { color: rgba(255, 255, 255, .38); }
.oscuro:focus { border-color: rgba(255, 255, 255, .5) !important; }

/* El selector de fecha nativo, en blanco sobre la cabecera navy. */
.fecha-oscura::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }