/* ==========================================================================
   PHN — Control de Acceso Vehicular
   Blanco, lineas de 1 px, verde de marca solo donde hace falta.
   Objetivo: que a las 3 de la mañana se entienda de un vistazo.
   ========================================================================== */

:root {
  /* Verde real de PHN: el de los sitios en vivo y el del logo */
  --verde:        #70B62F;
  --verde-fuerte: #5A9424;
  --verde-tinte:  #F1F8E9;

  /* Neutros */
  --blanco:  #FFFFFF;
  --fondo:   #FAFAF8;
  --tinta:   #1C1C1C;
  --tinta-2: #5E5E5E;
  --tinta-3: #9A9A9A;
  --linea:   #E6E6E1;
  --linea-2: #D2D2CB;
  --oscuro:  #2B2B2B;
  --rojo:    #B3261E;

  --radio:    12px;
  --radio-sm: 8px;

  --sp-1: 8px;
  --sp-2: 14px;
  --sp-3: 22px;
  --sp-4: 34px;
  --sp-5: 52px;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --txt-sm:   15px;
  --txt-base: 18px;
  --txt-lg:   22px;
  --txt-xl:   28px;
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--txt-base);
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

button, input { font-family: inherit; font-size: inherit; color: inherit; }

.icono {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view { display: none; }
.view.is-active { display: block; }

/* ==========================================================================
   LOGIN — blanco entero, logo y dos campos
   ========================================================================== */

#view-login.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
}
#view-login {
  min-height: 100vh;
  padding: var(--sp-3);
  background: var(--blanco);
}

.login {
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.login__logo { width: 100%; max-width: 260px; height: auto; }
.login__sub {
  margin: var(--sp-1) 0 var(--sp-5);
  color: var(--tinta-3);
  font-size: var(--txt-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ==========================================================================
   CAMPOS
   ========================================================================== */

.campo { display: block; text-align: left; margin-bottom: var(--sp-3); }

.campo__label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--tinta-2);
  font-size: var(--txt-sm);
  font-weight: 500;
}

.campo__input {
  width: 100%;
  min-height: 60px;
  padding: 0 var(--sp-2);
  background: var(--blanco);
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo__input:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-tinte);
}

.campo--linea { margin-bottom: var(--sp-3); }

.campo__error {
  margin: 0 0 var(--sp-2);
  color: var(--rojo);
  font-size: var(--txt-sm);
  text-align: center;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
  border: none;
  border-radius: var(--radio-sm);
  padding: 0 var(--sp-3);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease, transform .05s ease;
}
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn--primario { min-height: 60px; background: var(--verde); color: var(--blanco); }
.btn--primario:hover:not(:disabled) { background: var(--verde-fuerte); }
.btn--ancho { width: 100%; }

.btn--texto {
  min-height: 40px;
  padding: 0 var(--sp-1);
  background: none;
  color: var(--tinta-2);
  font-size: var(--txt-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--texto:hover { color: var(--tinta); }

.btn--grande {
  min-height: 96px;
  font-size: var(--txt-lg);
  color: var(--blanco);
}
.btn--entrada { background: var(--verde); }
.btn--entrada:hover:not(:disabled) { background: var(--verde-fuerte); }
.btn--salida  { background: var(--oscuro); }
.btn--salida:hover:not(:disabled) { background: #1a1a1a; }

/* ==========================================================================
   BARRA SUPERIOR
   ========================================================================== */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.topbar__logo { height: 34px; width: auto; }
.topbar__sesion { display: flex; align-items: center; gap: var(--sp-2); }
.topbar__guardia { color: var(--tinta-2); font-size: var(--txt-sm); }

.main {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-5);
}

/* ==========================================================================
   BLOQUES
   ========================================================================== */

.bloque { margin-bottom: var(--sp-4); }

.bloque__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.bloque__titulo {
  margin: 0;
  font-size: var(--txt-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.bloque__meta { color: var(--tinta-3); font-size: var(--txt-sm); }
.bloque__meta.is-activo { color: var(--verde-fuerte); font-weight: 600; }

/* ==========================================================================
   PERSONAS — seleccion multiple
   ========================================================================== */

.personas {
  display: grid;
  gap: var(--sp-1);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.persona {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 82px;
  padding: 0 var(--sp-2);
  background: var(--blanco);
  border: 1px solid var(--linea-2);
  border-radius: var(--radio);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.persona:active { transform: scale(.99); }
.persona__inicial {
  width: 40px; height: 40px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--fondo);
  border: 1px solid var(--linea);
  color: var(--tinta-2);
  font-size: var(--txt-sm);
  font-weight: 600;
}
.persona__nombre { font-weight: 500; }

.persona.is-selected {
  border-color: var(--verde);
  background: var(--verde-tinte);
}
.persona.is-selected .persona__inicial {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
}
.persona__check {
  position: absolute;
  top: 8px; right: 8px;
  width: 18px; height: 18px;
  color: var(--verde-fuerte);
  opacity: 0;
  transition: opacity .15s ease;
}
.persona.is-selected .persona__check { opacity: 1; }

/* ==========================================================================
   VEHICULO
   ========================================================================== */

.switch {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 68px;
  padding: 0 var(--sp-2);
  background: var(--blanco);
  border: 1px solid var(--linea-2);
  border-radius: var(--radio);
  color: var(--tinta-2);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.switch__pista {
  position: relative;
  width: 50px; height: 28px;
  flex: none;
  border-radius: 14px;
  background: var(--linea-2);
  transition: background .15s ease;
}
.switch__pista::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.switch[aria-checked="true"] { border-color: var(--verde); color: var(--tinta); }
.switch[aria-checked="true"] .switch__pista { background: var(--verde); }
.switch[aria-checked="true"] .switch__pista::after { transform: translateX(22px); }

.detalle {
  margin-top: var(--sp-1);
  padding: var(--sp-3);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.detalle[hidden] { display: none; }

.conductor { margin-bottom: var(--sp-3); }
.conductor__opciones { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.chip {
  min-height: 48px;
  padding: 0 var(--sp-2);
  background: var(--blanco);
  border: 1px solid var(--linea-2);
  border-radius: 999px;
  color: var(--tinta-2);
  font-size: var(--txt-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip.is-selected {
  border-color: var(--verde);
  background: var(--verde);
  color: var(--blanco);
}
.chip--vacio {
  border: none;
  background: none;
  color: var(--tinta-3);
  cursor: default;
  padding: 0;
}

/* Foto de gasolina */
.foto__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 100%;
  min-height: 68px;
  background: var(--blanco);
  border: 1px dashed var(--linea-2);
  border-radius: var(--radio);
  color: var(--tinta-2);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.foto__boton:hover:not(:disabled) { border-color: var(--verde); color: var(--verde-fuerte); }
.foto__boton:disabled { opacity: .55; cursor: wait; }
.foto__boton.tiene-foto { border-style: solid; border-color: var(--verde); color: var(--verde-fuerte); }

.foto__preview {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.foto__img {
  width: 92px; height: 92px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  border: 1px solid var(--linea);
  background: var(--fondo);
}
.foto__datos { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.foto__peso { color: var(--tinta-3); font-size: var(--txt-sm); }

/* ==========================================================================
   ACCIONES
   ========================================================================== */

.acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

/* ==========================================================================
   REGISTROS DE HOY
   ========================================================================== */

.registros {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.registros:empty { display: none; }

.registro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--linea);
}
.registro:last-child { border-bottom: none; }
.registro.es-grupo-nuevo { border-top: 1px solid var(--linea); }

.registro__hora {
  min-width: 58px;
  color: var(--tinta-3);
  font-size: var(--txt-sm);
  font-variant-numeric: tabular-nums;
}
.registro__nombre { flex: 1; min-width: 110px; font-weight: 500; }
.registro__tipo {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.registro__tipo--entrada { background: var(--verde-tinte); color: var(--verde-fuerte); }
.registro__tipo--salida  { background: #F0F0EE; color: var(--tinta-2); }
.registro__detalle { color: var(--tinta-3); font-size: var(--txt-sm); }

.registro__foto {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 var(--sp-2);
  background: var(--blanco);
  border: 1px solid var(--linea-2);
  border-radius: 999px;
  color: var(--tinta-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.registro__foto:hover { border-color: var(--verde); color: var(--verde-fuerte); }
.registro__foto .icono { width: 15px; height: 15px; }

.nota { margin: var(--sp-2) 0 0; color: var(--tinta-3); font-size: var(--txt-sm); }

/* ==========================================================================
   VISOR DE FOTO
   ========================================================================== */

.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: rgba(28, 28, 28, .6);
}
.visor[hidden] { display: none; }

.visor__caja {
  width: 100%;
  max-width: 480px;
  padding: var(--sp-3);
  background: var(--blanco);
  border-radius: var(--radio);
  text-align: center;
}
.visor__titulo { margin: 0 0 var(--sp-2); font-size: var(--txt-sm); color: var(--tinta-2); }
.visor__marco {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.visor__img { max-width: 100%; max-height: 58vh; border-radius: var(--radio-sm); }
.visor__img[hidden] { display: none; }
.visor .btn { margin-top: var(--sp-3); }

/* ==========================================================================
   TOAST
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-4);
  transform: translate(-50%, 160%);
  min-width: 240px;
  max-width: 90vw;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--blanco);
  font-size: var(--txt-base);
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
  z-index: 70;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast.is-error { background: var(--rojo); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 560px) {
  :root { --txt-xl: 24px; --txt-lg: 20px; }
  .personas { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .acciones { grid-template-columns: 1fr; }
  .topbar__logo { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Nota "opcional" al lado de una etiqueta */
.campo__nota {
  margin-left: 6px;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: var(--tinta-3);
}

/* ==========================================================================
   ESTADO DE CONEXION Y COLA
   Solo se ve cuando hay algo que decir. En verde no aparece nada: la caseta
   no necesita un semaforo permanente, necesita un aviso cuando algo falta.
   ========================================================================== */

.estado-red {
  min-height: 40px;
  padding: 0 var(--sp-2);
  background: #FFF7E0;
  border: 1px solid #E8C55A;
  border-radius: 999px;
  color: #7A5A00;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.estado-red:disabled { cursor: default; }
.estado-red.is-atorado {
  background: #FDECEA;
  border-color: #E4A19C;
  color: var(--rojo);
}

/* ==========================================================================
   INVITADOS DEL DIA
   ========================================================================== */

.invitados {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.invitados:empty { display: none; }

.invitado {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--linea);
}
.invitado:last-child { border-bottom: none; }

.invitado__datos { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.invitado__nombre { font-weight: 600; }
.invitado__detalle { color: var(--tinta-3); font-size: var(--txt-sm); }
.invitado__estado { color: var(--tinta-2); font-size: 13px; }
.invitado__estado.is-dentro { color: var(--verde-fuerte); font-weight: 600; }

.btn--invitado {
  min-height: 56px;
  min-width: 118px;
  color: var(--blanco);
  font-size: var(--txt-sm);
}

@media (max-width: 560px) {
  .invitado { flex-wrap: wrap; }
  .btn--invitado { width: 100%; }
}