/**
 * PatSys - Control Patrimonial (PWA)
 * css/app.css
 *
 * Pensado para uso en campo: contraste alto, botones grandes (se usa de pie,
 * con una mano, a veces con guantes) y tema oscuro para no encandilar en
 * almacenes ni gastar bateria en pantallas OLED.
 */

:root {
	--bg:        #0d0f14;
	--bg-card:   #171b23;
	--bg-card-2: #1f2430;
	--borde:     #2a3140;
	--txt:       #e8eaed;
	--txt-mute:  #9aa3b2;
	--acento:    #2f80ed;
	--ok:        #27ae60;
	--warn:      #e2b93b;
	--bad:       #eb5757;
	--radio:     12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
	margin: 0; padding: 0;
	background: var(--bg); color: var(--txt);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px; line-height: 1.45;
	min-height: 100%;
	overscroll-behavior-y: contain;
}

a { color: var(--acento); text-decoration: none; }

/* ---------------------------------------------------------------- Layout */
.app     { max-width: 560px; margin: 0 auto; padding: 0 16px 96px; }
.topbar  {
	position: sticky; top: 0; z-index: 20;  
	background: var(--bg); border-bottom: 1px solid var(--borde);
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
	max-width: 560px; margin: 0 auto;
}
.topbar h1 { font-size: 17px; margin: 0; font-weight: 600; flex: 1; }
.topbar .volver {
	font-size: 22px; line-height: 1; color: var(--txt-mute);
	background: none; border: 0; padding: 4px 6px; cursor: pointer;
}

/* ---------------------------------------------------------------- Tarjetas */
.card {
	background: var(--bg-card); border: 1px solid var(--borde);
	border-radius: var(--radio); padding: 16px; margin: 14px 0;
}
.card h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .5px;
           color: var(--txt-mute); margin: 0 0 12px; font-weight: 600; }

/* Codigo patrimonial: es el dato que se coteja contra el sticker */
.codpat {
	font-size: 26px; font-weight: 700; letter-spacing: -0.5px;
	font-variant-numeric: tabular-nums; word-break: break-all;
}
.desc { font-size: 17px; margin: 6px 0 0; }

/* Filas de datos */
.dl { margin: 0; }
.dl .fila {
	display: flex; justify-content: space-between; gap: 14px;
	padding: 10px 0; border-bottom: 1px solid var(--borde);
}
.dl .fila:last-child { border-bottom: 0; }
.dl dt { color: var(--txt-mute); font-size: 14px; flex: 0 0 auto; }
.dl dd { margin: 0; text-align: right; font-size: 15px; word-break: break-word; }

/* ---------------------------------------------------------------- Badges */
.badge {
	display: inline-block; padding: 4px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}
.badge.ok   { background: rgba(39,174,96,.16);  color: #6ee7a0; }
.badge.warn { background: rgba(226,185,59,.16); color: #f0d264; }
.badge.bad  { background: rgba(235,87,87,.16);  color: #ff8f8f; }
.badge.info { background: rgba(47,128,237,.16); color: #7db3f5; }

/* Aviso de bien dado de baja: tiene que saltar a la vista */
.alerta-baja {
	background: rgba(235,87,87,.12); border: 1px solid rgba(235,87,87,.4);
	color: #ff9d9d; border-radius: var(--radio);
	padding: 12px 14px; margin: 14px 0; font-size: 14px;
}

/* ---------------------------------------------------------------- Botones */
.btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; padding: 15px 18px; margin: 10px 0;
	border: 0; border-radius: var(--radio);
	font-size: 16px; font-weight: 600; font-family: inherit;
	background: var(--bg-card-2); color: var(--txt);
	cursor: pointer; text-align: center;
}
.btn:active { transform: scale(.985); }
.btn.primario { background: var(--acento); color: #fff; }
.btn.exito    { background: var(--ok);     color: #fff; }
.btn.peligro  { background: var(--bad);    color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-fila { display: flex; gap: 10px; }
.btn-fila .btn { margin: 10px 0; }

/* ---------------------------------------------------------------- Formularios */
label { display: block; font-size: 13px; color: var(--txt-mute); margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=number], input[type=tel], select, textarea {
	width: 100%; padding: 14px;
	background: var(--bg-card-2); border: 1px solid var(--borde);
	border-radius: 10px; color: var(--txt);
	font-size: 16px; /* 16px evita el zoom automatico de iOS al enfocar */
	font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
textarea { resize: vertical; min-height: 88px; }

/* ---------------------------------------------------------------- Escaner */
.scanner-wrap {
	position: relative; width: 100%; aspect-ratio: 1 / 1;
	background: #000; border-radius: var(--radio); overflow: hidden;
	margin: 14px 0;
}
.scanner-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-mira {
	position: absolute; inset: 18%;
	border: 3px solid rgba(255,255,255,.85); border-radius: 14px;
	box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
}
.scanner-hint {
	position: absolute; left: 0; right: 0; bottom: 12px;
	text-align: center; font-size: 13px; color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

/* Lista de escaneos de la toma de inventario */
.lista { list-style: none; margin: 12px 0 0; padding: 0; }
.lista li {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 0; border-bottom: 1px solid var(--borde);
}
.lista li .cod { font-weight: 600; font-variant-numeric: tabular-nums; }
.lista li .txt { flex: 1; min-width: 0; }
.lista li .txt small { display: block; color: var(--txt-mute); font-size: 13px;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- Estados */
.vacio  { text-align: center; color: var(--txt-mute); padding: 40px 20px; font-size: 15px; }
.centro { text-align: center; }
.mute   { color: var(--txt-mute); font-size: 14px; }

#pat-loader {
	position: fixed; inset: 0; z-index: 50; display: none;
	align-items: center; justify-content: center;
	background: rgba(13,15,20,.75);
}
.spinner {
	width: 38px; height: 38px; border-radius: 50%;
	border: 3px solid var(--borde); border-top-color: var(--acento);
	animation: giro .8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

.toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 60;
	transform: translate(-50%, 140%);
	max-width: 90vw; padding: 13px 20px; border-radius: 10px;
	background: var(--bg-card-2); border: 1px solid var(--borde);
	font-size: 15px; transition: transform .22s ease;
}
.toast.visible { transform: translate(-50%, 0); }
.toast.exito { background: var(--ok);  border-color: var(--ok);  color: #fff; }
.toast.error { background: var(--bad); border-color: var(--bad); color: #fff; }

/* ---------------------------------------------------------------- Login */
.login-wrap {
	min-height: 100vh; display: flex; flex-direction: column;
	align-items: center; justify-content: center; padding: 24px;
	max-width: 420px; margin: 0 auto;
}
.login-wrap .logo { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin-bottom: 4px; }
.login-wrap .sub  { color: var(--txt-mute); font-size: 14px; margin-bottom: 28px; }
.login-wrap form  { width: 100%; }

/* ---------------------------------------------------------------- Ficha publica */
.publico-sello {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; color: var(--txt-mute);
	border-top: 1px solid var(--borde); margin-top: 20px; padding-top: 16px;
}

@media (max-width: 360px) {
	.codpat { font-size: 22px; }
	.btn { padding: 13px 14px; font-size: 15px; }
}