/*
 * La app de marcación en el celular. Aparte de app.css a propósito:
 * aquí no hay tablas ni menú, hay botones grandes para dedos con guantes
 * y una cámara. Colores de Rimo: negro #0a090b y sol #f9af1a.
 */
:root {
  --fondo: #f5f4f2;
  --superficie: #ffffff;
  --tinta: #14131a;
  --tinta-suave: #5d5c66;
  --borde: #dcdad6;
  --marca: #0a090b;
  --sol: #f9af1a;
  --sol-tenue: #fde3ab;
  --ok: #14663d;
  --ok-piel: #e3f4ea;
  --mal: #9c2419;
  --mal-piel: #fbe7e5;
  --ojo: #8a5b06;
  --ojo-piel: #fdf0d6;
  --radio: 14px;
}
* { box-sizing: border-box; }
/* Las pantallas se esconden con el atributo hidden; ninguna regla de
   display (flex, grid) puede ganarle. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 17px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.cabecera {
  background: var(--marca);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  position: sticky; top: 0; z-index: 5;
}
.cabecera img { height: 30px; }
.cabecera__hora { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; color: var(--sol); }

main { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
h1 { font-size: 24px; margin: 6px 0 14px; letter-spacing: -0.01em; }
.texto { color: var(--tinta-suave); margin: 0 0 16px; }

.volver {
  background: none; border: 0; color: var(--tinta-suave); font-size: 16px; padding: 6px 0; margin-bottom: 4px; cursor: pointer;
}
.volver--claro { color: #fff; position: absolute; top: 10px; left: 12px; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

.buscar {
  width: 100%; font-size: 18px; padding: 14px 16px; border: 1.5px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); margin-bottom: 12px; outline: none;
}
.buscar:focus { border-color: var(--sol); }

.nombres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nombres button {
  width: 100%; text-align: left; font-size: 18px; padding: 15px 16px; border: 1.5px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--tinta); cursor: pointer;
}
.nombres button:active { background: var(--sol-tenue); border-color: var(--sol); }
.nombres .grupo { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); margin: 12px 4px 2px; }
.nombres button.recomendado { border-color: var(--sol); background: #fff9ec; font-weight: 700; }
.nombres button.recomendado small { display: block; font-weight: 400; color: var(--ojo); font-size: 13px; }
.ultimo { margin-bottom: 10px; }
.ultimo button {
  width: 100%; text-align: left; font-size: 18px; padding: 15px 16px; border: 1.5px solid var(--sol); border-radius: var(--radio);
  background: #fff9ec; color: var(--tinta); font-weight: 700; cursor: pointer;
}
.ultimo small { display: block; font-weight: 400; color: var(--ojo); font-size: 13px; }

.aviso { padding: 12px 14px; border-radius: var(--radio); background: var(--sol-tenue); color: var(--ojo); font-weight: 600; margin-bottom: 14px; }
.aviso--atencion { background: var(--ojo-piel); }
.error { padding: 12px 14px; border-radius: var(--radio); background: var(--mal-piel); color: var(--mal); font-weight: 600; margin-bottom: 12px; }

.plan { padding: 12px 14px; border-radius: var(--radio); background: var(--marca); color: #fff; margin-bottom: 12px; }
.plan strong { color: var(--sol); }
.hoy { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.hoy span { background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 12px; font-size: 14.5px; }
.hoy span.ok { background: var(--ok-piel); color: var(--ok); border-color: #b6e0c7; font-weight: 600; }
.hoy span.pend { background: var(--ojo-piel); color: var(--ojo); border-color: #f0d79a; }

.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.grande {
  border: 0; border-radius: 18px; padding: 26px 12px; cursor: pointer; color: #fff; text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center; min-height: 120px; justify-content: center;
}
.grande--entrada { background: var(--ok); }
.grande--salida { background: var(--marca); }
.grande:disabled { background: #cfcdc9; color: #6f6d6a; cursor: not-allowed; }
.grande__titulo { font-size: 24px; font-weight: 800; }
.grande__nota { font-size: 13px; opacity: .9; }

.tarjeta-aviso { background: var(--ojo-piel); border: 1px solid #f0d79a; border-radius: var(--radio); padding: 14px; margin-bottom: 12px; }
.tarjeta-aviso p { margin: 0 0 10px; }
.tarjeta-aviso button, .enlace-boton {
  background: none; border: 1.5px solid var(--ojo); color: var(--ojo); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 15px; cursor: pointer;
}
.pendientes { font-size: 14px; color: var(--tinta-suave); }
.pendientes span { display: inline-block; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 10px; margin: 2px 4px 2px 0; }

/* ---- cámara ---- */
.pantalla--camara { position: fixed; inset: 0; background: #000; z-index: 10; display: flex; flex-direction: column; padding: 0; margin: 0; max-width: none; }
.camara { flex: 1; position: relative; overflow: hidden; background: #000; }
.camara video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camara__error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; padding: 24px; text-align: center; background: #222; }
.camara__pie { background: #0a090b; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gps { color: #ddd; font-size: 14px; text-align: center; }
.gps.ok { color: #8fe0b0; }
.gps.mal { color: #ffb3a8; }
.disparador {
  width: 74px; height: 74px; border-radius: 50%; border: 5px solid #fff; background: var(--sol); cursor: pointer;
}
.disparador:active { transform: scale(.94); }
.camara__alterna { color: #bbb; font-size: 14px; text-decoration: underline; cursor: pointer; }

/* ---- confirmar ---- */
.resumen { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.resumen__foto { width: 112px; height: 140px; object-fit: cover; border-radius: 12px; background: #ddd; transform: scaleX(-1); }
.resumen__nombre { font-weight: 800; font-size: 19px; }
.resumen__gps { color: var(--tinta-suave); font-size: 14px; margin-top: 6px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 14px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 6px; }
.campo input, .campo textarea, .campo select {
  width: 100%; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie); font-family: inherit;
}
.campo textarea { resize: vertical; }
.principal {
  width: 100%; font-size: 19px; font-weight: 800; padding: 17px; border: 0; border-radius: var(--radio); background: var(--sol); color: var(--marca); cursor: pointer;
}
.principal:disabled { opacity: .6; }

/* ---- listo ---- */
.pantalla--centrada { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.listo { text-align: center; width: 100%; }
.listo__icono { width: 96px; height: 96px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 54px; line-height: 96px; margin: 0 auto 16px; font-weight: 800; }
.listo h1 { font-size: 26px; }
.listo p { color: var(--tinta-suave); margin: 0 0 22px; }

.cargando { position: fixed; inset: 0; background: rgba(10,9,11,.55); z-index: 20; display: flex; align-items: center; justify-content: center; }
.cargando__caja { background: #fff; border-radius: var(--radio); padding: 20px 28px; font-weight: 700; }

@media (min-width: 700px) {
  .pantalla--camara { position: relative; inset: auto; border-radius: var(--radio); overflow: hidden; }
  .camara { min-height: 420px; }
}