/* ============================================================
   Checador de Jornada — Colegio Nuevo Sol
   Maqueta de front-end · datos falsos
   Sistema visual: papelería institucional. Papel, tinta, sello.
   ============================================================ */

:root{
  /* Papel y tinta */
  --papel:        #f2eee1;
  --papel-alto:   #fbf9f2;
  --papel-hondo:  #e8e2d0;
  --tinta:        #16233f;
  --tinta-media:  #4a5570;
  --tinta-suave:  #7c8499;
  --linea:        #d9d2be;
  --linea-fina:   #e5dfcd;

  /* Semánticos: tintas de corrección */
  --sello:        #b0381f;   /* rojo sello — fuera de perímetro */
  --sello-fondo:  #f8e7e1;
  --verde:        #2b6045;   /* aprobado — dentro */
  --verde-fondo:  #e4eee6;
  --ambar:        #9d6a12;   /* dudoso */
  --ambar-fondo:  #f7ecd6;
  --violeta:      #5b3a8e;   /* mismo dispositivo */
  --violeta-fondo:#ece5f6;
  --grafito:      #5c6472;   /* sin ubicación */
  --grafito-fondo:#e8e7e3;

  --sombra-baja:  0 1px 2px rgba(22,35,63,.06), 0 2px 8px rgba(22,35,63,.05);
  --sombra-media: 0 2px 6px rgba(22,35,63,.08), 0 12px 28px rgba(22,35,63,.10);
  --sombra-alta:  0 4px 14px rgba(22,35,63,.12), 0 24px 60px rgba(22,35,63,.16);

  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans:  "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radio: 3px;   /* esquinas casi rectas: es papel, no una burbuja */
}

*{ box-sizing:border-box; }

html{ height:100%; overflow-x:hidden; }
body{ min-height:100%; }

body{
  margin:0;
  overflow-x:hidden;
  background-color:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Grano de papel: ruido sutil sobre todo el fondo */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ─────────────────────────  Tipografía  ───────────────────────── */

h1,h2,h3{ font-family:var(--serif); font-weight:700; letter-spacing:-.012em; margin:0; }
h1{ font-size:2.1rem; line-height:1.08; }
h2{ font-size:1.35rem; line-height:1.2; }
h3{ font-size:1.05rem; }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

.membrete{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}

/* ─────────────────────────  Sello de goma  ───────────────────────── */

.sello{
  position:relative;
  width:172px; height:172px;
  display:grid; place-items:center;
  border:3px solid var(--tinta);
  border-radius:50%;
  color:var(--tinta);
  text-align:center;
  transform:rotate(-7deg);
  opacity:.86;
  /* borde irregular de tinta */
  box-shadow:inset 0 0 0 5px var(--papel), inset 0 0 0 7px var(--tinta);
}
.sello::after{
  /* desgaste del sello: manchitas que interrumpen la tinta */
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23m)'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
  opacity:.55;
  pointer-events:none;
}
.sello .sello-linea{
  font-family:var(--sans);
  font-size:.6rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase;
}
.sello .sello-hora{
  font-family:var(--mono);
  font-size:2rem; font-weight:600;
  line-height:1; margin:.28em 0 .2em;
  font-variant-numeric:tabular-nums;
}

@keyframes estampar{
  0%   { transform:rotate(-22deg) scale(2.5); opacity:0; }
  55%  { transform:rotate(-4deg)  scale(.94); opacity:.95; }
  72%  { transform:rotate(-8deg)  scale(1.04); }
  100% { transform:rotate(-7deg)  scale(1);   opacity:.86; }
}
.sello.estampando{ animation:estampar .52s cubic-bezier(.2,.9,.3,1) both; }

/* ─────────────────────────  Botones  ───────────────────────── */

.boton{
  display:block; width:100%;
  font-family:var(--sans);
  font-size:1.18rem; font-weight:700;
  letter-spacing:.055em; text-transform:uppercase;
  padding:1.32rem 1rem;
  border:2px solid var(--tinta);
  border-radius:var(--radio);
  background:var(--tinta);
  color:var(--papel-alto);
  cursor:pointer;
  box-shadow:var(--sombra-media);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), box-shadow .13s, background .18s;
}
.boton:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--sombra-alta); }
.boton:active:not(:disabled){ transform:translateY(1px); box-shadow:var(--sombra-baja); }
.boton:disabled{ opacity:.5; cursor:progress; }

.boton.cerrar{
  background:transparent;
  color:var(--tinta);
  border-color:var(--tinta);
  box-shadow:none;
}
.boton.cerrar:hover:not(:disabled){ background:var(--tinta); color:var(--papel-alto); }

.boton-texto{
  background:none; border:0; padding:0;
  font-family:var(--sans); font-size:.94rem;
  color:var(--tinta-suave);
  cursor:pointer;
  border-bottom:1px solid var(--linea);
  transition:color .16s, border-color .16s;
}
.boton-texto:hover{ color:var(--tinta); border-color:var(--tinta); }

/* ─────────────────────────  Etiquetas de bandera  ───────────────────────── */

.bandera{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--sans);
  font-size:.74rem; font-weight:700;
  letter-spacing:.055em; text-transform:uppercase;
  padding:.24em .62em .28em;
  border-radius:2px;
  border:1px solid currentColor;
  white-space:nowrap;
}
.bandera .punto{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

.b-fuera    { color:var(--sello);   background:var(--sello-fondo); }
.b-sinubic  { color:var(--grafito); background:var(--grafito-fondo); }
.b-abierta  { color:var(--ambar);   background:var(--ambar-fondo); }
.b-mismodisp{ color:var(--violeta); background:var(--violeta-fondo); }
.b-precision{ color:var(--ambar);   background:var(--ambar-fondo); }
.b-dudoso   { color:var(--ambar);   background:var(--ambar-fondo); }
.b-dentro   { color:var(--verde);   background:var(--verde-fondo); }

/* ─────────────────────────  Barra de maqueta  ───────────────────────── */

.barra-maqueta{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:flex; align-items:center; gap:.55rem;
  flex-wrap:wrap;
  padding:.55rem .8rem;
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--mono); font-size:.7rem;
  box-shadow:0 -6px 22px rgba(22,35,63,.22);
}
.barra-maqueta .rotulo{
  font-family:var(--sans); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  font-size:.62rem; opacity:.62; margin-right:.2rem;
}
.barra-maqueta button{
  font-family:var(--mono); font-size:.7rem;
  background:transparent; color:var(--papel);
  border:1px solid rgba(242,238,225,.32);
  border-radius:2px; padding:.24rem .58rem;
  cursor:pointer; transition:background .14s, border-color .14s;
}
.barra-maqueta button:hover{ background:rgba(242,238,225,.14); border-color:rgba(242,238,225,.6); }
.barra-maqueta button.activo{ background:var(--papel); color:var(--tinta); border-color:var(--papel); font-weight:600; }
.barra-maqueta .separador{ flex:1 1 auto; }
.barra-maqueta a{ color:var(--papel); opacity:.72; text-decoration:none; border-bottom:1px solid rgba(242,238,225,.35); }
.barra-maqueta a:hover{ opacity:1; }

@media(max-width:700px){
  /* Una tira deslizable: si envuelve, empuja el ancho del documento
     y descentra la hoja. */
  .barra-maqueta{
    font-size:.64rem; padding:.5rem .6rem;
    flex-wrap:nowrap; overflow-x:auto; max-width:100vw;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .barra-maqueta::-webkit-scrollbar{ display:none; }
  .barra-maqueta > *{ flex:0 0 auto; }
  .barra-maqueta button{ font-size:.64rem; padding:.22rem .5rem; }
  .barra-maqueta .separador{ display:none; }
}

/* Tirador del centro del perímetro. Leaflet le pone fondo blanco
   y borde a los divIcon: hay que sacárselos. */
.tirador-centro{ background:none !important; border:0 !important; }
.tirador-centro .bolita{
  width:15px; height:15px; border-radius:50%;
  background:var(--tinta); border:3px solid var(--papel-alto);
  box-shadow:0 2px 7px rgba(22,35,63,.45);
  cursor:grab;
}
.tirador-centro:active .bolita{ cursor:grabbing; }

/* ─────────────────────────  Utilidades  ───────────────────────── */

.oculto{ display:none !important; }
.centro{ text-align:center; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}