/* ============================================================
   Inventario de Patrimonio — Hermandad del Resucitado (Zaragoza)
   Rediseño estilo iOS nativo. Mobile-first, con modo oscuro.
   Colores corporativos tomados de resucitado.net:
   azul marino #1d3557 · azul vivo #0188ca · oro · carmesí
   ============================================================ */
:root {
  color-scheme: light dark;

  /* Marca */
  --marca:        #1d3557;              /* azul marino de la hermandad */
  --marca-oscuro: #142642;
  --tinte:        #0188ca;              /* azul vivo (elementos interactivos) */
  --oro:          #c9a13b;
  --carmesi:      #a12b3f;
  --verde:        #34a853;

  /* Sistema (iOS light) */
  --fondo:        #f2f2f7;
  --tarjeta:      #ffffff;
  --texto:        #1c1c1e;
  --texto-2:      rgba(60, 60, 67, .6);
  --texto-3:      rgba(60, 60, 67, .3);
  --separador:    rgba(60, 60, 67, .16);
  --relleno:      rgba(120, 120, 128, .12);
  --relleno-2:    rgba(120, 120, 128, .16);
  --titulo:       #1d3557;

  --nav-fondo:    rgba(29, 53, 87, .88);
  --nav-texto:    #ffffff;
  --tab-fondo:    rgba(249, 249, 251, .82);

  --radio:        14px;
  --radio-boton:  12px;
  --sombra:       0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(29, 53, 87, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte:      #3aa9e8;
    --oro:        #d8b458;
    --carmesi:    #d05a6e;
    --verde:      #4cc266;

    --fondo:      #000000;
    --tarjeta:    #1c1c1e;
    --texto:      #ffffff;
    --texto-2:    rgba(235, 235, 245, .6);
    --texto-3:    rgba(235, 235, 245, .3);
    --separador:  rgba(84, 84, 88, .6);
    --relleno:    rgba(118, 118, 128, .24);
    --relleno-2:  rgba(118, 118, 128, .32);
    --titulo:     #ffffff;

    --nav-fondo:  rgba(16, 28, 48, .88);
    --tab-fondo:  rgba(22, 22, 24, .82);
    --sombra:     none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  color: var(--texto);
  background: var(--fondo);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--tinte); text-decoration: none; }
h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--titulo);
}
h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--titulo);
  margin: 1.6rem 0 .7rem;
}
img { max-width: 100%; }
/* Los componentes con display propio (.btn, .casilla…) deben poder ocultarse con [hidden] */
[hidden] { display: none !important; }

.icono { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }

/* ---------- Barra de navegación superior (translúcida) ---------- */
.barra-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .5rem 1rem;
  padding-top: calc(.5rem + env(safe-area-inset-top));
  background: var(--nav-fondo);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--nav-texto);
  border-bottom: .5px solid rgba(201, 161, 59, .55);
}
.barra-nav-marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--nav-texto);
  min-width: 0;
}
.escudo {
  height: 20px;
  width: 20px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}
.barra-nav-titulos { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; justify-content: center; }
.barra-nav-titulos strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.barra-nav-titulos small { font-size: .68rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-escritorio { display: none; }
@media (min-width: 800px) {
  body { padding-bottom: 2rem; }
  .nav-escritorio { display: flex; align-items: center; gap: .3rem; }
  .nav-escritorio a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    font-weight: 600;
    padding: .4rem .9rem .4rem .4rem;
    min-height: 44px;
    border-radius: 999px;
    transition: background .18s ease, color .18s ease, transform .12s ease;
  }
  .nav-icono-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    flex: none;
    transition: background .18s ease, transform .18s ease;
  }
  .nav-icono-circulo .icono { width: 10px; height: 10px; }
  .nav-escritorio a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
  .nav-escritorio a:hover .nav-icono-circulo { background: rgba(255, 255, 255, .16); transform: scale(1.06); }
  .nav-escritorio a.activo { color: #fff; background: rgba(255, 255, 255, .14); }
  .nav-escritorio a.activo .nav-icono-circulo { background: var(--oro); color: var(--marca-oscuro); }
  .nav-escritorio a:active { transform: scale(.96); }
  .nav-escritorio a.nav-salir {
    margin-left: .5rem;
    padding-left: .4rem;
    position: relative;
  }
  .nav-escritorio a.nav-salir::before {
    content: "";
    position: absolute;
    left: -.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .22);
  }
  .nav-escritorio a.nav-salir .nav-icono-circulo { background: rgba(161, 43, 63, .3); }
  .nav-escritorio a.nav-salir:hover .nav-icono-circulo { background: rgba(161, 43, 63, .5); }
}

/* ---------- Tab bar inferior (móvil) ---------- */
.tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  background: var(--tab-fondo);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: .5px solid var(--separador);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: .45rem .2rem .4rem;
  min-height: 52px;
  color: var(--texto-2);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 0;
  transition: color .15s ease, transform .1s ease;
}
.tab-bar a .icono { width: 18px; height: 18px; transition: transform .18s cubic-bezier(.3, 1.4, .5, 1); }
.tab-bar a.activo { color: var(--tinte); }
.tab-bar a.activo .icono { transform: translateY(-2px) scale(1.08); }
.tab-bar a:active { transform: scale(.92); }
/* Tiene que ir detrás de .tab-bar para ganarle en la cascada */
@media (min-width: 800px) { .tab-bar { display: none; } }

/* ---------- Estructura ---------- */
.contenido { max-width: 1000px; margin: 0 auto; padding: 1.1rem 1rem; }
.barra-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin: .3rem 0 1.1rem;
}
.barra-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.contador-total {
  font-size: .82rem;
  font-weight: 600;
  background: var(--relleno);
  color: var(--texto-2);
  border-radius: 999px;
  padding: .12rem .6rem;
  vertical-align: .25em;
}
.tarjeta {
  background: var(--tarjeta);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: .9rem;
  box-shadow: var(--sombra);
}
.vacio { text-align: center; color: var(--texto-2); padding: 1.6rem 1rem; }
.texto-suave { color: var(--texto-2); font-size: .85rem; }
.descripcion { white-space: pre-line; }

/* ---------- Botones (táctiles, estilo iOS) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .5rem 1.05rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: inherit;
  border: 0;
  border-radius: var(--radio-boton);
  background: var(--relleno);
  color: var(--tinte);
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, background .15s ease;
}
.btn:active { transform: scale(.96); opacity: .8; }
.btn-primario { background: var(--marca); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primario { background: #2b4d7d; } }
.btn-secundario { background: rgba(1, 136, 202, .13); color: var(--tinte); }
.btn-peligro { background: rgba(161, 43, 63, .12); color: var(--carmesi); }
.btn-bloque { width: 100%; }
.btn-mini { min-height: 34px; padding: .25rem .65rem; font-size: .8rem; border-radius: 9px; }
.btn-camara { margin-bottom: .9rem; }
.btn-volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--relleno);
  color: var(--texto);
  flex: none;
}
.btn-volver .icono { width: 20px; height: 20px; }
.barra-pagina h1 { flex: 1 1 auto; min-width: 0; }

/* ---------- Flash y avisos ---------- */
.flash {
  padding: .75rem 1rem;
  border-radius: var(--radio-boton);
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: .92rem;
}
.flash-ok { background: rgba(52, 168, 83, .14); color: var(--verde); }
.flash-error { background: rgba(161, 43, 63, .12); color: var(--carmesi); }
.flash-aviso { background: rgba(201, 161, 59, .16); color: #8a6d1f; }
@media (prefers-color-scheme: dark) { .flash-aviso { color: var(--oro); } }
#aviso-offline {
  background: var(--carmesi);
  color: #fff;
  text-align: center;
  padding: .5rem 1rem;
  padding-top: calc(.5rem + env(safe-area-inset-top));
  font-size: .85rem;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ---------- Chips (cápsulas iOS) ---------- */
.chip {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .16rem .62rem;
  white-space: nowrap;
}
.chip-excelente { background: rgba(52, 168, 83, .15); color: var(--verde); }
.chip-bueno { background: rgba(1, 136, 202, .14); color: var(--tinte); }
.chip-regular { background: rgba(201, 161, 59, .18); color: #8a6d1f; }
.chip-necesita_restauracion { background: rgba(214, 106, 21, .15); color: #c05e10; }
.chip-fuera_de_uso { background: var(--relleno); color: var(--texto-2); }
.chip-grupo { background: rgba(201, 161, 59, .16); color: #8a6d1f; }
.chip-contador { background: var(--relleno); color: var(--texto-2); }
@media (prefers-color-scheme: dark) {
  .chip-regular, .chip-grupo { color: var(--oro); }
  .chip-necesita_restauracion { color: #e8853c; }
}
.chips-grupos { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* ---------- Formularios (campos con relleno, sin borde) ---------- */
.formulario label { display: block; font-weight: 600; font-size: .92rem; margin: 1rem 0 .35rem; }
.formulario label:first-of-type { margin-top: 0; }
input[type="text"], input[type="search"], input[type="password"],
input[type="date"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: .55rem .8rem;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: -0.01em;
  border: 0;
  border-radius: 10px;
  background: var(--relleno);
  color: var(--texto);
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 16px;
  padding-right: 2rem;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--tinte);
  outline-offset: 0;
}
.btn:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
fieldset { border: 0; border-top: .5px solid var(--separador); margin: 1.2rem 0 0; padding: .9rem 0 0; }
legend { font-weight: 700; color: var(--titulo); padding-right: .6rem; font-size: .95rem; }
.form-linea { display: flex; gap: .5rem; align-items: stretch; margin: .4rem 0; }
.form-linea > * { min-height: 44px; }
.form-linea input, .form-linea select { flex: 1; width: auto; min-width: 0; }
.acciones-formulario { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.3rem; }
.lista-casillas { display: flex; flex-wrap: wrap; gap: .45rem; }
.casilla {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .45rem .85rem;
  min-height: 44px;
  cursor: pointer;
  background: var(--relleno);
  transition: background .15s ease;
}
.casilla:has(input:checked) {
  background: rgba(1, 136, 202, .16);
  color: var(--tinte);
  font-weight: 600;
}
.casilla input { width: 20px; height: 20px; min-height: 0; accent-color: var(--tinte); }
.desplegable summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--tinte);
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: .4rem;
  list-style: none;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable[open] summary { margin-bottom: .9rem; }
.previsualizacion { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.previsualizacion img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; }

/* ---------- Buscador del inventario ---------- */
.filtros { margin-bottom: 1.1rem; }

/* ---------- Rejilla de artículos ---------- */
.rejilla-articulos { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 560px) { .rejilla-articulos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .rejilla-articulos { grid-template-columns: 1fr 1fr 1fr; } }
.tarjeta-articulo {
  display: flex;
  gap: .8rem;
  align-items: center;
  background: var(--tarjeta);
  border-radius: var(--radio);
  padding: .6rem;
  padding-right: 1.6rem;
  color: var(--texto);
  box-shadow: var(--sombra);
  min-height: 44px;
  position: relative;
  transition: transform .12s ease, opacity .12s ease;
}
.tarjeta-articulo::after {
  content: "›";
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-54%);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--texto-3);
}
.tarjeta-articulo:active { transform: scale(.98); opacity: .85; }
.miniatura {
  width: 72px; height: 72px;
  flex: none;
  object-fit: cover;
  border-radius: 10px;
  background: var(--relleno);
}
.sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-3);
}
.sin-foto .icono { width: 26px; height: 26px; }
.tarjeta-articulo-datos { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.tarjeta-articulo-datos strong { overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.015em; }

/* ---------- Listas simples (grupos, eventos) ---------- */
.lista-simple { display: flex; flex-direction: column; gap: .55rem; }
.fila-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  background: var(--tarjeta);
  border-radius: var(--radio);
  padding: .85rem 1.7rem .85rem 1rem;
  min-height: 58px;
  color: var(--texto);
  box-shadow: var(--sombra);
  position: relative;
  transition: transform .12s ease, opacity .12s ease;
}
.fila-lista::after {
  content: "›";
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-54%);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--texto-3);
}
.fila-lista:active { transform: scale(.985); opacity: .85; }
.fila-lista > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.fila-lista strong { letter-spacing: -0.015em; }
.resumen-evento { text-align: right; flex: none; font-size: .72rem; line-height: 1.5; }

/* ---------- Ficha de artículo ---------- */
.ficha-datos p { margin: .55rem 0; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (min-width: 700px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.foto {
  margin: 0;
  background: var(--tarjeta);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.foto-principal { outline: 2px solid var(--oro); outline-offset: -2px; }
.foto img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.foto figcaption { padding: .45rem .55rem; display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; }
.etiqueta-foto { font-weight: 700; font-size: .7rem; }
.etiqueta-oro { color: var(--oro); }
.etiqueta-azul { color: var(--tinte); }
.foto-acciones { display: flex; gap: .3rem; flex-wrap: wrap; }
.mini-estados { display: flex; gap: .3rem; flex: none; }
.punto {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 700;
  background: var(--relleno);
  color: var(--texto-2);
}
.punto-azul { background: var(--tinte); color: #fff; }
.punto-oro { background: var(--oro); color: #fff; }
.punto-verde { background: var(--verde); color: #fff; }

/* ---------- Checklist de evento ---------- */
.panel-progreso { display: flex; flex-direction: column; gap: .75rem; }
.progreso-etiqueta { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; }
.progreso-num { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.progreso-barra { height: 8px; background: var(--relleno); border-radius: 999px; overflow: hidden; }
.progreso-relleno { height: 100%; border-radius: 999px; transition: width .3s cubic-bezier(.3, .8, .4, 1); }
.relleno-preparado { background: var(--tinte); }
.relleno-llevado { background: var(--oro); }
.relleno-devuelto { background: var(--verde); }

.lista-checklist { display: flex; flex-direction: column; gap: .6rem; }
.fila-check {
  background: var(--tarjeta);
  border-radius: var(--radio);
  padding: .75rem;
  box-shadow: var(--sombra);
}
.fila-check-cabecera { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
.miniatura-mini {
  width: 48px; height: 48px;
  flex: none;
  object-fit: cover;
  border-radius: 9px;
  background: var(--relleno);
}
.fila-check-nombre {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  min-width: 0;
  flex: 1;
  color: var(--texto);
  align-items: flex-start;
}
.fila-check-nombre strong { letter-spacing: -0.015em; }
.fila-check-acciones { display: flex; gap: .3rem; flex: none; align-items: center; }
.botones-check { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.celda-check { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.chk-btn {
  min-height: 48px;
  border: 0;
  border-radius: var(--radio-boton);
  background: var(--relleno);
  color: var(--texto-2);
  font-size: .82rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .3rem;
  transition: transform .14s cubic-bezier(.3, 1.4, .5, 1), background .18s ease, color .18s ease;
}
.chk-btn:active { transform: scale(.94); }
.chk-btn:disabled { cursor: default; opacity: .75; transform: none; }
.chk-marca { font-size: 1rem; min-width: 1rem; text-align: center; }
.chk-btn.marcado { color: #fff; }
.chk-btn.marcado.chk-preparado { background: var(--tinte); }
.chk-btn.marcado.chk-llevado { background: var(--oro); }
.chk-btn.marcado.chk-devuelto { background: var(--verde); }
.chk-btn.cargando { opacity: .45; }
.chk-meta {
  color: var(--texto-2);
  font-size: .66rem;
  min-height: 1em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Resultados del buscador en lote */
#buscador-lote { margin-bottom: .6rem; }
#resultados-lote { flex-direction: column; align-items: stretch; }
#resultados-lote .casilla { border-radius: var(--radio-boton); width: 100%; }
#resultados-lote img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
#form-lote .btn { margin-top: .6rem; }

/* ---------- Usuarios ---------- */
.tarjeta-usuario { display: flex; flex-direction: column; gap: .7rem; }
.usuario-datos { display: flex; flex-direction: column; }
.usuario-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.usuario-acciones form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.usuario-acciones select { min-width: 150px; }
.usuario-inactivo { opacity: .6; }
@media (min-width: 800px) {
  .tarjeta-usuario { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Paginación ---------- */
.paginacion { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 1.3rem 0; }
.paginacion a {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radio-boton);
  background: var(--tarjeta);
  color: var(--tinte);
  font-weight: 600;
  box-shadow: var(--sombra);
  transition: transform .12s ease;
}
.paginacion a:active { transform: scale(.94); }
.paginacion a.activo { background: var(--marca); color: #fff; }
@media (prefers-color-scheme: dark) { .paginacion a.activo { background: #2b4d7d; } }

/* ---------- Login ---------- */
.pagina-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #26466f 0%, #1d3557 45%, #101c30 100%);
  padding: 1.2rem;
  padding-top: calc(1.2rem + env(safe-area-inset-top));
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}
.caja-login {
  background: var(--tarjeta);
  border-radius: 22px;
  padding: 2rem 1.5rem 1.7rem;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.logo-login { height: 108px; width: auto; }
.caja-login h1 { font-size: 1.3rem; margin: .9rem 0 .2rem; }
.caja-login .subtitulo { color: var(--texto-2); font-size: .78rem; margin: 0 0 1.3rem; line-height: 1.5; }
.caja-login form { text-align: left; }
.caja-login label { display: block; font-weight: 600; font-size: .92rem; margin: 1rem 0 .35rem; }
.caja-login .btn { margin-top: 1.4rem; }
.caja-login .filo-oro {
  width: 56px; height: 3px;
  border-radius: 2px;
  background: var(--oro);
  margin: .7rem auto 0;
}

/* ============================================================
   v6 — Inicio con resumen y accesos (portado de Instrumentos HCR)
   ============================================================ */

/* ---------- Cifras grandes del resumen ---------- */
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: flex-end;
}
.cifra { display: flex; flex-direction: column; gap: .1rem; }
.cifra-valor {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--titulo);
  font-variant-numeric: tabular-nums;
}
.cifra-valor.acento { color: var(--tinte); }
.cifra-valor.oro { color: var(--oro); }
.cifra-valor.verde { color: var(--verde); }
.cifra-etiqueta { font-size: .74rem; font-weight: 600; color: var(--texto-2); }
/* Las cuatro cifras de Inicio: 2×2 en el móvil, en fila en pantallas anchas */
.cifras-resumen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1rem;
  align-items: start;
}
@media (min-width: 700px) { .cifras-resumen { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Rejilla de accesos directos ---------- */
.rejilla-accesos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
@media (min-width: 700px) { .rejilla-accesos { grid-template-columns: repeat(3, 1fr); } }
.acceso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  background: var(--tarjeta);
  border-radius: var(--radio);
  padding: .9rem;
  min-height: 92px;
  color: var(--texto);
  box-shadow: var(--sombra);
  transition: transform .12s ease, opacity .12s ease;
}
.acceso:active { transform: scale(.97); opacity: .85; }
.acceso .icono { width: 22px; height: 22px; color: var(--tinte); }
.acceso strong { letter-spacing: -0.015em; }
.acceso small { color: var(--texto-2); font-size: .78rem; }

/* ---------- Tarjetas de artículo con enlaces a eventos (Preparados / Llevados) ---------- */
.tarjeta-con-enlaces { align-items: flex-start; padding-right: .6rem; }
.tarjeta-con-enlaces::after { display: none; }
.tarjeta-con-enlaces:active { transform: none; opacity: 1; }
.miniatura-enlace { flex: none; display: block; }
.nombre-enlace { color: var(--texto); }
.eventos-articulo { display: flex; flex-direction: column; gap: .35rem; margin-top: .1rem; }
.evento-linea { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.evento-linea small { font-size: .72rem; }
.chip-evento {
  background: rgba(1, 136, 202, .13);
  color: var(--tinte);
  white-space: normal;
  line-height: 1.35;
  padding: .22rem .65rem;
  border-radius: 10px;
}
.chip-evento .icono { width: 12px; height: 12px; vertical-align: -0.1em; }

/* ---------- Notas en la ficha del artículo ---------- */
.ficha-notas {
  background: rgba(201, 161, 59, .12);
  border-radius: var(--radio-boton);
  padding: .65rem .8rem;
  margin: .7rem 0;
}
.ficha-notas strong { font-size: .8rem; color: #8a6d1f; text-transform: uppercase; letter-spacing: .04em; }
.ficha-notas p { margin: .2rem 0 0; }
@media (prefers-color-scheme: dark) { .ficha-notas strong { color: var(--oro); } }

/* ---------- Crear grupo desde el formulario ---------- */
.crear-grupo { margin-top: 1rem; }
.formulario .crear-grupo label { margin-top: 0; }
.crear-grupo small:empty { display: none; }

/* ---------- Formulario de nuevo evento ---------- */
.barra-seleccion { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.barra-seleccion input { flex: 1; min-width: 0; }
.barra-seleccion small { flex: none; }
.lista-seleccion {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .1rem;
}
/* Las casillas son <label>: anulan el estilo de etiqueta de campo de .formulario */
.formulario .casilla,
#resultados-lote .casilla { display: inline-flex; margin: 0; font-size: .95rem; font-weight: 500; }
.lista-seleccion .casilla {
  display: flex;
  border-radius: var(--radio-boton);
  font-weight: 500;
}
.lista-seleccion .casilla span { min-width: 0; }
.fila-nuevo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem;
  padding: .55rem 0;
  border-bottom: .5px solid var(--separador);
}
.fila-nuevo input[name="nuevos_nombre[]"] { grid-column: 1; }
.fila-nuevo input[name="nuevos_descripcion[]"] { grid-column: 1; }
.fila-nuevo .btn-quitar-fila { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
#btn-otra-fila { margin-top: .7rem; }

/* ---------- Separador "o" en Añadir artículos al evento ---------- */
.separador-o {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .9rem 0;
  color: var(--texto-3);
  font-size: .8rem;
}
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: .5px; background: var(--separador); }