/* =========================================================
   Nico Cell – Panel de Boletas (Index)
   Estilo: fondo oscuro con brillos suaves + tarjetas “glass”
   Enfoque: legibilidad, accesibilidad y performance en mostrador
   ========================================================= */

/* -----------------------------
   1) Tokens de diseño (tema base)
   ----------------------------- */
:root{
  /* Superficies */
  --bg: #0b0f1a;             /* fondo principal (oscuro) */
  --panel: #0f1424;          /* no lo usamos directo, pero útil si sumás modales */
  --ink: #e7e9ee;            /* texto principal */
  --muted: #9aa4b2;          /* texto secundario */
  --border: rgba(255,255,255,.07);
  --radius: 16px;

  /* Sombras (contenidas para no “ensuciar” el fondo) */
  --shadow-1: 0 6px 24px rgba(0,0,0,.35);
  --shadow-2: 0 16px 44px rgba(0,0,0,.45);

  /* Focus ring accesible (violeta/azul translúcido) */
  --ring: 0 0 0 3px rgba(99, 102, 241, .45);

  /* Paletas por acción (gradientes accesibles) */
  --inicial-1:#34d399;  --inicial-2:#10b981;  /* Nuevo servicio (verde) */
  --senia-1:#a3e635;    --senia-2:#22c55e;    /* Actualización/Seña (lima→verde) */
  --pago-1:#60a5fa;     --pago-2:#3b82f6;     /* Pago final (azules) */
  --tec-1:#f59e0b;      --tec-2:#ef4444;      /* Técnico (naranja→rojo) */
}

/* -----------------------------
   2) Reset mínimo y base
   ----------------------------- */
*{ box-sizing:border-box }
html,body { min-height: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg); /* color sólido detrás por si falla el ::before */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative; /* contexto para el ::before del fondo */
}

/* Capa de fondo fija (radiales suaves). No bloquea eventos y no hace scroll. */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgb(2, 73, 160), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(52, 37, 255, 0.75), transparent 60%),
    var(--bg);
  background-repeat: no-repeat;
  /* rendimiento */
  will-change: transform;
  transform: translateZ(0);
}

/* Utilidad accesible: oculto visualmente pero disponible a lectores de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Links sin subrayado (el bloque .action se ve como tarjeta clicable) */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display:block; }

/* -----------------------------
   3) Header
   ----------------------------- */
.site-header{
  padding: 0 20px 16px;
  text-align:center;
}

.brand .logo{
  height:200px; width:auto;
  display:block; margin:0 auto 12px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)); /* mejora legibilidad sobre brillos */
}

.brand h1{
  margin:0 0 6px;
  font-size: clamp(32px, 3.2vw, 45px);
  letter-spacing:.2px;
}
.subtitle{
  margin:0;
  color: var(--muted);
  font-size: 20px;
}

/* -----------------------------
   4) Layout y contenedor
   ----------------------------- */
.container{ max-width: 1330px; margin: 0 auto; padding: 20px; }

/* “Card” general que contiene la grilla de acciones */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 35px);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px); /* sutil efecto vidrio */
}

/* -----------------------------
   5) Grilla de acciones (responsive)
   ----------------------------- */
.grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(16px, 3vw, 35px);
}
@media (max-width: 1384px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}

/* -----------------------------
   6) Tarjetas-acción (links grandes)
   ----------------------------- */
.action{

  display:block;
  position:relative;
  overflow:hidden;
  padding: 28px 28px 38px;
  border-radius: 14px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transform: translateZ(0);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .15s ease;
  min-height: 120px; /* área clic cómoda (≥ 44px de alto en contenido) */
}

/* Borde “neón” suave que reacciona en hover sin molestar */
.action::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,0));
  pointer-events:none;
}

/* Estados interactivos */
.action:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(255, 255, 255, .85);
}
.action:active{ transform: translateY(-1px); }
.action:focus-visible{ outline:none; box-shadow: var(--ring); }

/* Etiqueta-chips (categoría) */
.pill{
  display:inline-block;
  font-size: 12px;
  letter-spacing:.3px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #0e1320;
  background: #fff;
  mix-blend-mode: screen; /* se integra con el fondo “glass” */
  margin-bottom: 10px;
}

/* Título y descripción (jerarquía clara) */
.action-title{
  display:block;
  font-weight: 800;
  font-size: 25px;
  letter-spacing:.2px;
  margin-bottom: 6px;
}
.action-desc{
  display:block;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}

/* -----------------------------
   7) Variantes por acción (gradientes y pill)
   ----------------------------- */

/* 1) Nuevo servicio */
.action--inicial{
  background:
    linear-gradient(120deg, color-mix(in oklab, var(--inicial-1) 22%, transparent), color-mix(in oklab, var(--inicial-2) 12%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
  border-color: color-mix(in oklab, var(--inicial-2) 35%, var(--border));
}
.action--inicial .pill{
  background: linear-gradient(90deg, var(--inicial-1), var(--inicial-2));
  color: #052018; /* contraste sobre el gradiente verde */
}

/* 2) Actualización / Seña */
.action--senia{
  background:
    linear-gradient(120deg, color-mix(in oklab, var(--senia-1) 28%, transparent), color-mix(in oklab, var(--senia-2) 16%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
  border-color: color-mix(in oklab, var(--senia-2) 38%, var(--border));
}
.action--senia .pill{
  background: linear-gradient(90deg, var(--senia-1), var(--senia-2));
  color: #08210a; /* legible sobre lima/verde */
}

/* 3) Pago final */
.action--pago{
  background:
    linear-gradient(120deg, color-mix(in oklab, var(--pago-1) 22%, transparent), color-mix(in oklab, var(--pago-2) 12%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
  border-color: color-mix(in oklab, var(--pago-2) 35%, var(--border));
}
.action--pago .pill{
  background: linear-gradient(90deg, var(--pago-1), var(--pago-2));
  color: #061226; /* contraste sobre azul */
}

/* 4) Avisos del técnico */
.action--tecnico{
  background:
    linear-gradient(120deg, color-mix(in oklab, var(--tec-1) 24%, transparent), color-mix(in oklab, var(--tec-2) 12%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
  border-color: color-mix(in oklab, var(--tec-2) 35%, var(--border));
}
.action--tecnico .pill{
  background: linear-gradient(90deg, var(--tec-1), var(--tec-2));
  color: #261008; /* contraste sobre naranja/rojo */
}

/* -----------------------------
   8) Sección “Últimas etiquetas”
   ----------------------------- */
.etiquetas { margin-top: 28px; }

.etiquetas .section-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.etiquetas .section-header h2{
  font-size:1.1rem; font-weight:600; margin:0;
}
.etiquetas .section-actions{ display:flex; align-items:center; gap:8px; }
.etiquetas .section-actions .auto-refresh{
  display:flex; align-items:center; gap:6px; font-size:.9rem; color:var(--muted);
}
.etiquetas .section-actions input[type="checkbox"]{
  width: 18px; height: 18px; accent-color: #3b82f6;
}

/* Grilla de tarjetas con auto-fit para distintos anchos */
#etiquetas-list.etiquetas-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* Tarjeta de etiqueta (si tu JS las renderiza así) */
.etiqueta-card{
  background:#02021d5d;
  text-align: center;
  border:1px solid #acacac7e;
  border-radius:12px;
  padding:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.etiqueta-card:first-child {
  /* Destacar la más reciente */
  background: linear-gradient(to right, #1e3a8a, #017243);
  border-left: 4px solid #f8f8f8;
  font-weight:600;
  color:#fff;
}

.etiqueta-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.8rem; color:#6b7280; margin-bottom:6px;
}
.etiqueta-id{ font-weight:600; color:#ffffff; }
.etiqueta-fecha{ color:#6b7280; }
.etiqueta-body .line{ margin:4px 0; font-size:.95rem; color:#ffffff; }
.etiqueta-body .line strong{ font-weight:600; }

/* Acciones dentro de la etiqueta */
.etiqueta-actions{
  display:flex; gap:8px; margin-top:10px; justify-content:center;
}
.btn-icon{
  font-size:.85rem;
  border:1px solid #000102; background:#020024; color:#d8d8d8;
  padding:6px 10px; border-radius:8px; cursor:pointer;
  transition: background .15s ease, transform .06s ease;
}
.btn-icon:hover{ background:#f3f4f6; color : #000214ce}
.btn-icon:active{ transform: translateY(1px); }
.btn-icon:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

/* Botón secundario (Actualizar) */
.btn-secondary{
  border:1px solid #d1d5db; background:#fff; color:#111827;
  padding:8px 12px; border-radius:10px; cursor:pointer;
  transition: background .15s ease, transform .06s ease;
}
.btn-secondary:hover{ background:#f9fafb; }
.btn-secondary:active{ transform: translateY(1px); }
.btn-secondary:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

/* Estados de texto */
.muted{ color:#6b7280; font-size:.95rem; }
.error{ color:#b91c1c; font-weight:500; }

/* Skeletons para carga (opcional, si tu JS los usa) */

.skeleton{
  height:116px;               /* misma altura que tus cards */
  border-radius:12px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    #0f1424;                  /* tono oscuro acorde al tema */
  border:1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.skeleton::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  transform: translateX(-100%);
  animation: shimmer 1.2s ease-in-out infinite;
}

.skeleton::before{
  content:"";
  position:absolute; inset:10px 14px;
  border-radius:8px;
  background:
    linear-gradient(#1a2236 0 0) 0 0/100% 12px no-repeat,         /* título */
    linear-gradient(#1a2236 0 0) 0 22px/80% 10px no-repeat,       /* línea 1 */
    linear-gradient(#1a2236 0 0) 0 40px/60% 10px no-repeat;       /* línea 2 */
  opacity:.65;
}

@keyframes shimmer { to { transform: translateX(100%); } }

/* Respeta reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .skeleton::after { animation: none; }
}
/* -----------------------------
   9) Footer
   ----------------------------- */
.site-footer{
  text-align:center;
  padding: 28px 16px 40px;
  color: var(--muted);
  font-size: 13px;
}

/* -----------------------------
   10) Responsivo y performance móvil
   ----------------------------- */
@media (max-width: 980px){
  /* Fondo más liviano en mobile (menos gradientes) */


  body::before{
    background:
      radial-gradient(1200px 600px at 10% -10%, rgb(0, 10, 99), transparent 60%),
      var(--bg);
  }

  /* Tarjetas: menos “rebote” en hover (táctil) */
  .action{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16));
    border-color: var(--border);
    transform: none;
    box-shadow: var(--shadow-1);
  }
  .action:hover{
    transform: none;
    box-shadow: var(--shadow-1);
    border-color: var(--border);
  }

  /* Ajustes por variante para no “lavar” los colores */
  .action--inicial{
    background:
      linear-gradient(120deg, rgba(52,211,153,.38), rgba(16,185,129,.26)),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
    border-color: rgba(16,185,129,.55);
  }
  .action--senia{
    background:
      linear-gradient(120deg, rgba(163,230,53,.42), rgba(34,197,94,.28)),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
    border-color: rgba(34,197,94,.55);
  }
  .action--pago{
    background:
      linear-gradient(120deg, rgba(96,165,250,.38), rgba(59,130,246,.26)),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
    border-color: rgba(59,130,246,.55);
  }
  .action--tecnico{
    background:
      linear-gradient(120deg, rgba(245,158,11,.40), rgba(239,68,68,.28)),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
    border-color: rgba(239,68,68,.55);
  }

  /* Los chips en mobile sin mix-blend para mayor contraste */
  .pill{ mix-blend-mode: normal; }
}

/* Respeto a reducción de movimiento del usuario */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impresión: fondos blancos, sin sombras (ahorro de tinta) */
@media print{
  body { background: #fff !important; color: #000; }
  .card, .etiquetas{ background:#fff; box-shadow:none; border:1px solid #e5e7eb; }
  .action{ background:#fff; border-color:#e5e7eb; box-shadow:none; }
}

/* -----------------------------
   11) Animaciones utilitarias
   ----------------------------- */
@keyframes shimmer{
  100% { transform:translateX(100%); }
}

/* -----------------------------
   12) Toast (opcional: avisos de “PDF listo”, etc.)
   ----------------------------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
  background:#111827; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.2); opacity:0; transition:.25s ease;
  pointer-events:none; font-size:.9rem; z-index: 50;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }


/* Spinner liviano para el botón Actualizar (solo transform: rotate) */
.btn-secondary { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.btn-spinner{
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: currentColor;
  border-radius: 50%;
  transform: translateZ(0);
}
.btn-secondary[aria-disabled="true"] .btn-spinner{ display: inline-block; animation: spin .6s linear infinite; }
.btn-secondary[aria-disabled="true"] .btn-label{ opacity: .8; }

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


/* -----------------------------
   13) Buscar boleta (formulario simple)
   ----------------------------- */
#boletaSearchForm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* Input principal */
#boletaId {
  flex: 1;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#boletaId:focus-visible {
  outline: none;
  border-color: #3b82f6;
  box-shadow: var(--ring);
}

/* Botón de búsqueda TODAS LAS BOLETAS */

/* Enlace/botón específico para "Todas las boletas" */
.link-baserow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  /* caja y espaciado */
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;

  /* integración con tu sistema de foco/animación */
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease;
}

/* Que respire bien dentro de la sección de búsqueda */
.card-search .link-baserow {
  display: inline-block;
  margin: 10px 0 6px;
}

.link-baserow:hover {
  background: rgba(255,255,255,0.10);
}

.link-baserow:active {
  transform: translateY(1px);
}

.link-baserow:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: rgba(255,255,255,.35);
}

/* Respeta preferencia del usuario */
@media (prefers-reduced-motion: reduce){
  .link-baserow { transition: none; }
}





/*--------------BUSQUEDA POR ID------------------*/

.card-search{
  padding-top: 50px;
  padding-bottom: 50px;
}

#boletaSearchBtn {
  border: 1px solid #3b82f6;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: background .15s ease, transform .08s ease;
}
#boletaSearchBtn:hover {
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
}
#boletaSearchBtn:active {
  transform: translateY(1px);
}
#boletaSearchBtn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Mensajes informativos debajo del form */
#boletaHelp {
  flex-basis: 100%;
  font-size: .9rem;
  color: var(--muted);
  margin: 4px 0 0;
}

#boletaMsg {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: .95rem;
  min-height: 1.2em;
}

/* Ajustes responsivos */
@media (max-width: 520px) {
  #boletaSearchForm {
    flex-direction: column;
    align-items: stretch;
  }
  #boletaSearchBtn {
    width: 100%;
  }
}