/* ==========================================================================
   CLAQUETA - base
   La idea visual: una mesa de trabajo bien iluminada, no un dashboard frio.
   Papel calido, tinta oscura, y la cinta naranja como unico color que grita.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Instrument+Sans:ital,wght@0,400..700;1,400..600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ------------------------------- tokens --------------------------------- */

:root {
  /* superficies: papel calido, no blanco clinico */
  --papel: #faf7f1;
  --papel-hondo: #f2ede4;
  --lienzo: #ffffff;
  --lienzo-2: #fbf9f6;
  --elevado: #ffffff;

  /* tinta */
  --tinta: #191512;
  --tinta-2: #5d564e;
  --tinta-3: #78706a;
  --tinta-4: #9a9188;

  /* bordes */
  --borde: #e7dfd2;
  --borde-fuerte: #d6ccbb;
  --borde-sutil: #f0eae0;

  /* la paleta de modulos */
  --cinta: #ea5b23;          /* naranja claqueta: acento principal */
  --cinta-suave: #fdefe7;
  --violeta: #6f5cf0;        /* guiones */
  --violeta-suave: #eeebfe;
  --verde: #16897a;          /* clientes */
  --verde-suave: #e2f4f1;
  --azul: #2f74e8;           /* cronograma */
  --azul-suave: #e6eefd;
  --ambar: #9a6a04;          /* ideas */
  --ambar-suave: #fdf2da;
  --rosa: #c02f5c;           /* urgencias */
  --rosa-suave: #fdeaf0;
  --gris: #62687a;           /* archivos */
  --gris-suave: #eef0f4;

  /* Texto sobre la cinta naranja: tinta, no blanco. El blanco sobre naranja
     no llega al contraste minimo, y la tinta encima del naranja se lee como
     marcador sobre cinta de papel, que es justo la idea. */
  --sobre-cinta: #191512;

  /* Acento para superficies invertidas (el panel de la puerta): ahi el fondo
     es --tinta, asi que el naranja de siempre no sirve en los dos temas. */
  --acento-arte: #ff7a45;

  /* La pizarra de Clap. No es la tinta del texto: un negro puro le da peso de
     ladrillo. Es un grafito calido, que se lee como objeto y no como agujero.
     Las variantes "-inv" son para cuando vive sobre una superficie invertida. */
  --pizarra: #332a24;
  --pizarra-cara: #faf7f1;
  --pizarra-inv: #efe8de;
  --pizarra-cara-inv: #241d18;

  /* semanticos */
  --ok: #0f7264;
  --alerta: #9a6a04;
  --peligro: #c02f5c;

  /* sombras: calidas, nunca negro puro */
  --sombra-0: 0 1px 2px rgba(65, 48, 30, .05);
  --sombra-1: 0 1px 2px rgba(65, 48, 30, .06), 0 2px 6px rgba(65, 48, 30, .05);
  --sombra-2: 0 2px 4px rgba(65, 48, 30, .06), 0 8px 20px rgba(65, 48, 30, .08);
  --sombra-3: 0 6px 12px rgba(65, 48, 30, .08), 0 20px 48px rgba(65, 48, 30, .12);
  --sombra-cinta: 0 6px 18px rgba(234, 91, 35, .28);

  /* tipografia */
  --fuente: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* escala de espacio (base 4) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px;
  --e6: 24px; --e7: 32px; --e8: 40px; --e9: 56px; --e10: 72px;

  /* radios: generosos arriba, nunca circulos en tarjetas */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;

  /* curvas: todo lo que se mueve usa una de estas tres */
  --salto: cubic-bezier(.34, 1.56, .64, 1);      /* rebote corto, para aparecer */
  --suave: cubic-bezier(.32, .72, 0, 1);          /* el caballito de batalla */
  --seco: cubic-bezier(.4, 0, .2, 1);             /* salidas */
  --t-rapido: .16s;
  --t-medio: .28s;
  --t-lento: .5s;

  --rail: 76px;
  --rail-abierto: 232px;
  --barra: 60px;

  color-scheme: light;
}

:root[data-tema='oscuro'] {
  --papel: #131110;
  --papel-hondo: #0d0c0b;
  --lienzo: #1c1a18;
  --lienzo-2: #211e1c;
  --elevado: #262220;

  --tinta: #f4efe8;
  --tinta-2: #b4aaa0;
  --tinta-3: #8a8079;
  --tinta-4: #635b56;

  --borde: #302b28;
  --borde-fuerte: #453e3a;
  --borde-sutil: #262220;

  --cinta: #ff7440;
  --cinta-suave: #3a2016;
  --violeta: #9b8cff;
  --violeta-suave: #241f42;
  --verde: #3dbfab;
  --verde-suave: #12302c;
  --azul: #6ba3ff;
  --azul-suave: #16233c;
  --ambar: #e9b949;
  --ambar-suave: #362a11;
  --rosa: #f57094;
  --rosa-suave: #3a1a25;
  --gris: #9aa0b2;
  --gris-suave: #23262e;

  --sobre-cinta: #1a0f08;
  --acento-arte: #c2410c;

  --pizarra: #efe8de;
  --pizarra-cara: #241d18;
  --pizarra-inv: #332a24;
  --pizarra-cara-inv: #faf7f1;

  --ok: #3dbfab;
  --alerta: #e9b949;
  --peligro: #f57094;

  --sombra-0: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .3);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .4);
  --sombra-3: 0 6px 12px rgba(0, 0, 0, .4), 0 20px 48px rgba(0, 0, 0, .55);
  --sombra-cinta: 0 6px 18px rgba(255, 116, 64, .25);

  color-scheme: dark;
}

/* -------------------------------- reset --------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* El [hidden] del navegador es solo "display: none" sin fuerza: cualquier
   clase nuestra que declare display (un .btn, un .rep-aviso) se lo come, y
   el elemento sigue ahí ocupando lugar y tapando cosas. Con esto, poner
   .hidden = true oculta de verdad, que es lo que todos esperamos. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
  overflow: hidden;
}

img, svg, video { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; padding: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.14;
  font-optical-sizing: auto;
}

h1 { font-size: clamp(26px, 3.6vw, 38px); }
h2 { font-size: 22px; }
h3 { font-size: 17px; letter-spacing: -.014em; }
h4 { font-size: 14px; letter-spacing: -.008em; }

::selection { background: var(--cinta); color: var(--sobre-cinta); }

/* barras de scroll que no rompen el clima */
* { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--tinta-4); background-clip: content-box; }

:focus-visible {
  outline: 2px solid var(--cinta);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --------------------------- utilidades base ---------------------------- */

.fila { display: flex; align-items: center; gap: var(--e3); }
.fila-arriba { display: flex; align-items: flex-start; gap: var(--e3); }
.columna { display: flex; flex-direction: column; gap: var(--e3); }
.entre { justify-content: space-between; }
.crece { flex: 1; min-width: 0; }
.envuelve { flex-wrap: wrap; }
.centro { display: flex; align-items: center; justify-content: center; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.display { font-family: var(--display); }
.tenue { color: var(--tinta-2); }
.tenue-2 { color: var(--tinta-3); }
.chico { font-size: 13px; }
.mini { font-size: 12px; }
.gordo { font-weight: 600; }
.recorte {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recorte-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.recorte-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------ animaciones ----------------------------- */

@keyframes entra-abajo {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes entra-suave {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes entra-lado {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes pop {
  0% { transform: scale(.9); opacity: 0; }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes late {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.16); }
}
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes brilla {
  0% { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes sube-baja {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes barrido {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.aparece { animation: entra-abajo var(--t-medio) var(--salto) both; }
.aparece-suave { animation: entra-suave var(--t-medio) var(--seco) both; }

/* Escalonado: las tarjetas de una grilla no entran todas juntas.
   Se apoya en --i que pone el JS al crear cada tarjeta. */
.escalona > * {
  animation: entra-abajo .42s var(--salto) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}

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

/* ------------------------------- esqueleto ------------------------------ */

.esqueleto {
  background: linear-gradient(100deg, var(--borde-sutil) 30%, var(--papel-hondo) 50%, var(--borde-sutil) 70%);
  background-size: 220% 100%;
  animation: brilla 1.4s linear infinite;
  border-radius: var(--r-sm);
  min-height: 12px;
}

/* --------------------------- textura de fondo --------------------------- */
/* Un grano finito de papel. Es lo que separa "calido" de "plano". */

.textura::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, rgba(120, 96, 66, .13) 1px, transparent 0);
  background-size: 22px 22px;
}
:root[data-tema='oscuro'] .textura::before {
  opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 240, 220, .045) 1px, transparent 0);
}

/* Una fila de permiso con selector de tres estados en vez de palanca: el
   control es mas ancho que una palanca, asi que la fila va a lo largo y no
   en la rejilla de dos columnas. */
.permiso.ancho { display:flex; align-items:center; gap:var(--e4); }
.permiso.ancho .txt { flex:1; min-width:0; }
.permiso.ancho .segmentado { flex:none; }
@media (max-width: 620px) {
  .permiso.ancho { flex-direction:column; align-items:stretch; }
}

/* La guia paso a paso de las conexiones: numerada, con el que y el como en
   dos renglones, para que se pueda seguir con el telefono en la mano. */
.pasos-guia { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.pasos-guia li { line-height:1.45; }
.pasos-guia li b { display:block; font-weight:600; font-size:13.5px; }
.pasos-guia li span { display:block; }

/* --------------------------- guia de conexion --------------------------- */
/* Elegir el camino equivocado es el error que hace perder la tarde, asi que
   la eleccion va arriba, grande y con la diferencia explicada. */
.guia-caminos { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.guia-caminos button {
  text-align:left; padding:11px 13px; border-radius:var(--r-sm);
  border:1.5px solid var(--borde); background:var(--papel-hondo);
  display:flex; flex-direction:column; gap:3px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.guia-caminos button b { font-size:13.5px; }
.guia-caminos button span { color:var(--tinta-3); line-height:1.35; }
.guia-caminos button:hover { border-color:var(--borde-fuerte); }
.guia-caminos button[aria-pressed=true] {
  border-color:var(--cinta); background:color-mix(in srgb, var(--cinta) 9%, transparent);
}
.guia-caminos button[aria-pressed=true] b { color:var(--cinta); }
@media (max-width: 560px) { .guia-caminos { grid-template-columns:1fr; } }

/* Los pasos numerados: el numero afuera, en su circulito, para poder seguir
   la lista con el telefono en la mano sin perder en cual ibas. */
.pasos-guia.numerada { list-style:none; padding:0; gap:11px; }
.paso-guia { display:flex; gap:10px; align-items:flex-start; }
.paso-n {
  flex:none; width:21px; height:21px; border-radius:50%; margin-top:1px;
  background:var(--papel-hondo); border:1px solid var(--borde);
  display:grid; place-items:center; font-size:11px; font-weight:700;
  color:var(--tinta-2); font-family:var(--mono);
}
.paso-cuerpo { display:flex; flex-direction:column; gap:2px; min-width:0; }
.paso-link {
  display:inline-flex; align-items:center; gap:4px; margin-top:3px;
  font-size:12px; font-weight:600; color:var(--cinta); width:fit-content;
}
.paso-link:hover { text-decoration:underline; }

.guia-permisos { background:var(--papel-hondo); padding:11px; border-radius:var(--r-sm); }
.guia-duda { font-size:12.5px; }
.guia-duda summary { cursor:pointer; font-weight:600; color:var(--tinta-2); }
.guia-duda p { margin-top:7px; line-height:1.6; }
.guia-duda code {
  background:var(--papel-hondo); padding:1px 5px; border-radius:4px; font-size:11.5px;
}