/* ============================================================
   CRM 770 Automations
   Sistema visual heredado de 770automations.com
   ============================================================ */

:root {
  /* Marca */
  --ink:        #131210;
  --ink-soft:   #211e1a;
  --ink-2:      #2a271e;
  --paper:      #fffdf8;
  --cream:      #f6f4ec;
  --cream-deep: #eeebe0;
  --line:       #ddd7c6;
  --line-soft:  #e8e3d5;
  --muted:      #655f50;
  --muted-soft: #8a8579;
  --bordo:      #701f2b;
  --bordo-deep: #4c151d;
  --bordo-ink:  #fffdf8;
  --bordo-wash: #f7edee;

  /* Semáforo */
  --ok:      #3b6326;
  --ok-wash: #eef3e9;
  --warn:      #a8700f;
  --warn-wash: #fbf2e2;
  --bad:      #b3261e;
  --bad-wash: #fbeceb;

  /* Tipografía */
  --sans:  'Manrope', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --mono:  'DM Mono', ui-monospace, SFMono-Regular, monospace;

  /* Movimiento */
  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Profundidad */
  --shadow-xs: 0 1px 2px rgba(19,18,16,.04);
  --shadow-sm: 0 2px 4px -2px rgba(19,18,16,.08), 0 1px 2px rgba(19,18,16,.04);
  --shadow-md: 0 24px 48px -28px rgba(19,18,16,.30), 0 2px 6px -2px rgba(19,18,16,.06);
  --shadow-lg: 0 40px 80px -40px rgba(19,18,16,.42);
  --inset-top: inset 0 1px 0 rgba(255,255,255,.7);

  /* Superficie de la tarjeta destacada. Oscura en los dos temas: si se
     invirtiera, el texto secundario quedaria blanco sobre crema. */
  --accent-bg:      #131210;
  --accent-fg:      #fffdf8;
  --accent-fg-soft: rgba(255,253,248,.52);
  --accent-fg-dim:  rgba(255,253,248,.68);

  /* Geometría */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
}

:root[data-theme="dark"] {
  --ink:        #f4f1e8;
  --ink-soft:   #ddd8cb;
  --ink-2:      #c8c2b3;
  --paper:      #17150f;
  --cream:      #100e0a;
  --cream-deep: #1c1913;
  --line:       #2e2a21;
  --line-soft:  #262319;
  --muted:      #9a9384;
  --muted-soft: #756f61;
  --bordo:      #b7414f;
  --bordo-deep: #8d2c38;
  --bordo-ink:  #fffdf8;
  --bordo-wash: #2a1418;

  --ok:      #7aa860;
  --ok-wash: #182213;
  --warn:      #d09b3c;
  --warn-wash: #251c0c;
  --bad:      #dd6a62;
  --bad-wash: #2a1413;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-md: 0 24px 48px -28px rgba(0,0,0,.8);
  --shadow-lg: 0 40px 80px -40px rgba(0,0,0,.9);
  --inset-top: inset 0 1px 0 rgba(255,255,255,.05);

  /* En oscuro la tarjeta destacada pasa al bordo de la marca: se despega del
     resto de las tarjetas sin depender de una inversion. */
  --accent-bg:      #7d2735;
  --accent-fg:      #fffdf8;
  --accent-fg-soft: rgba(255,253,248,.62);
  --accent-fg-dim:  rgba(255,253,248,.78);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Respaldo: si algun componente puntual se escapa, que se recorte a que
     arrastre a toda la pagina a un scroll de costado. */
  overflow-x: hidden;
}

/* Grano de película: fijo, sin eventos, nunca dentro de un contenedor con scroll */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .028;
  /* Sin background-size el SVG se estira a todo el viewport y el ruido pasa de
     grano fino a manchones. Se repite a su tamano natural. */
  background-size: 180px 180px;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .grain { opacity: .035; }

::selection { background: var(--bordo); color: var(--bordo-ink); }

:focus-visible {
  outline: 2px solid var(--bordo);
  outline-offset: 2px;
  border-radius: 4px;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; }

/* Los iconos se dibujan solo con viewBox, sin ancho propio. Sin esta base el
   navegador los estira al tamano por defecto de un elemento reemplazado. */
svg { width: 16px; height: 16px; flex: none; }
/* Los graficos de ApexCharts traen su propio SVG grande (ancho/alto por
   atributo): sin este reset la regla de arriba se lo pisa y lo deja en 16x16.
   Ancho 100% en vez de "auto": el atributo width que pone ApexCharts a veces
   se mide antes de que el layout termine de acomodarse y queda mas grande
   que la tarjeta, lo que agrega una barra de desplazamiento horizontal. */
[data-chart] { max-width: 100%; overflow: hidden; }
[data-chart] svg { width: 100% !important; height: auto; }
.stat__label svg { width: 13px; height: 13px; }
.card__head > svg { width: 16px; height: 16px; color: var(--muted); }
.pill svg { width: 12px; height: 12px; }
.rowitem svg, .tl svg, .mod__top svg { width: 15px; height: 15px; }
.section__head svg { width: 17px; height: 17px; }

/* ============================================================
   Tipografía utilitaria
   ============================================================ */

.eyebrow {
  font: 500 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -.03em;
  line-height: 1.05;
}

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

.muted  { color: var(--muted); }
.dim    { color: var(--muted-soft); }
.tiny   { font-size: 11.5px; }
.small  { font-size: 12.5px; }
.strong { font-weight: 600; }
/* DM Mono solo viene en 400 y 500: pedirle 600 no lo pone en negrita, hace
   que el navegador sintetice una falsa (engrosa los trazos a mano), y en
   Safari eso se ve borroneado y oscuro en vez de nítido. */
.num.strong { font-weight: 500; }
.center { text-align: center; }
.right  { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Estructura — isla flotante arriba, igual que la web principal
   ============================================================ */

.topnav {
  position: sticky;
  top: 14px;
  z-index: 60;
  height: 60px;
  max-width: 1440px;
  margin: 14px auto 0;
  padding: 0 10px 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 999px;
}

/* El vidrio vive en un pseudo-elemento: si el backdrop-filter estuviera en
   la barra, esta pasaría a ser el bloque contenedor del menú desplegado. */
.topnav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--paper) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.topnav.is-scrolled::before {
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  border-color: color-mix(in srgb, var(--ink) 11%, transparent);
  box-shadow: var(--shadow-md);
}

/* Testigo invisible: al salir de pantalla, la barra se vuelve opaca.
   Evita escuchar el scroll, que obliga a recalcular en cada píxel. */
.scrollmark { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--ink);
}
.brand__mark {
  width: 19px;
  height: 19px;
  color: var(--bordo);
  transition: transform .55s var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(45deg); }
.brand__name {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.brand__name b {
  font: 800 19px/1 var(--sans);
  letter-spacing: -1.1px;
  margin-right: 3px;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mainnav::-webkit-scrollbar { display: none; }

.navlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .35s var(--ease), background-color .35s var(--ease);
}
.navlink svg { width: 15px; height: 15px; opacity: .68; transition: opacity .35s var(--ease); }
.navlink:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.navlink:hover svg { opacity: 1; }
.navlink.is-active {
  color: var(--bordo-ink);
  background: var(--bordo);
  box-shadow: 0 6px 16px -8px rgba(112, 31, 43, .8), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.navlink.is-active svg { opacity: 1; }

.navright {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.iconbtn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: transform .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.iconbtn:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); color: var(--ink); }
.iconbtn:active { transform: scale(.92); }
.iconbtn svg { width: 15px; height: 15px; }

.navuser {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  transition: background-color .4s var(--ease);
}
.navuser:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.navuser__name { font-size: 12px; font-weight: 600; white-space: nowrap; }
.navuser__role { font: 500 8.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft); }

/* Hamburguesa que se transforma en cruz */
.menubtn { display: none; width: 34px; height: 32px; border: 0; background: none; padding: 5px; cursor: pointer; }
.menubtn i {
  display: block; height: 1.5px; margin: 6px 0;
  background: var(--ink);
  transition: transform .45s var(--ease-spring), opacity .3s var(--ease);
}
body.nav-open .menubtn i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .menubtn i:nth-child(2) { transform: translateY(-7.5px) rotate(-45deg); }

/* --- Menú desplegado en pantallas chicas --- */

.navsheet {
  position: fixed;
  inset: 0;
  z-index: 55;
  padding: 96px 24px 40px;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* La visibilidad no se interpola: se aplica de golpe al abrir y recien al
     terminar el desvanecido al cerrar. Transicionarla directamente deja el
     menu invisible en algunos navegadores. */
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
body.nav-open .navsheet {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s var(--ease), visibility 0s linear 0s;
}

.navsheet__group { margin-bottom: 26px; }
.navsheet__label {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-soft);
  padding-bottom: 12px;
}
.navsheet a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
  opacity: 0;
  transform: translateY(14px);
}
body.nav-open .navsheet a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.navsheet a svg { width: 19px; height: 19px; color: var(--muted); }
.navsheet a.is-active { color: var(--bordo); }
.navsheet a.is-active svg { color: var(--bordo); }
.navsheet a small { display: block; font: 400 11.5px/1.3 var(--sans); color: var(--muted-soft); margin-top: 2px; }

/* --- Encabezado de página --- */

.pagehead {
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px 24px 0;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.pagehead__meta {
  font: 500 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 7px;
}
.pagehead__title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.pagehead__actions { display: flex; align-items: center; gap: 8px; margin-left: auto }

.page { max-width: 1440px; margin: 0 auto; padding: 20px 24px 64px; }


/* Marca compacta de las pantallas de ingreso */
.logomark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--bordo); color: var(--bordo-ink);
  font: 600 12px/1 var(--mono); letter-spacing: .04em;
  box-shadow: 0 6px 18px -8px rgba(112,31,43,.9), inset 0 1px 0 rgba(255,255,255,.18);
}
.logoname { font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; }
.logosub  { font: 500 9.5px/1.4 var(--mono); letter-spacing: .17em; text-transform: uppercase; color: rgba(255,253,248,.42); }

/* ============================================================
   Superficies: carcasa exterior + núcleo interior
   ============================================================ */

.panel {
  background: var(--cream-deep);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 5px;
  box-shadow: var(--shadow-xs);
}
.panel__in {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--r-lg) - 6px);
  box-shadow: var(--inset-top);
  overflow: hidden;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs), var(--inset-top);
}

.card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.card__head h3 { min-width: 0; }
.card__head h3 { font-size: 13.5px; font-weight: 600; }
.card__body { padding: 20px; }
.card__foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--cream);
  border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px);
}

.section { margin-bottom: 26px; }
.section__head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 14px;
}
.section__head h2 { font-size: 17px; }
.section__head .eyebrow { margin-bottom: 5px; }

/* ============================================================
   Bento
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.b3  { grid-column: span 3; }
.b4  { grid-column: span 4; }
.b5  { grid-column: span 5; }
.b6  { grid-column: span 6; }
.b7  { grid-column: span 7; }
.b8  { grid-column: span 8; }
.b12 { grid-column: span 12; }

/* Fila que reparte el ancho entre las tarjetas que efectivamente aparecen.
   Varias tarjetas dependen de que haya datos o de los permisos de cada
   usuario: con anchos fijos, la que faltaba dejaba un hueco. Adentro de una
   fila, b3/b4/b5... dejan de ser columnas y pasan a ser pesos. */
.fila { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; }
.fila:not(:has(> *)) { display: none; }
.fila > * { flex: 1 1 0; min-width: 0; }
.fila > .b3 { flex-grow: 3; }
.fila > .b4 { flex-grow: 4; }
.fila > .b5 { flex-grow: 5; }
.fila > .b6 { flex-grow: 6; }
.fila > .b8 { flex-grow: 8; }

/* ============================================================
   Métricas
   ============================================================ */

.stat { padding: 18px 20px 20px; }
.stat__label {
  font: 500 10px/1 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted-soft);
  display: flex;
  align-items: center;
  gap: 7px;
}
.stat__value {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-top: 11px;
  font-variant-numeric: tabular-nums;
}
.stat__value.is-sm { font-size: 23px; }
.stat__foot { margin-top: 7px; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.stat--accent {
  background: var(--accent-bg);
  color: var(--accent-fg);
  border-color: var(--accent-bg);
}
.stat--accent .stat__label { color: var(--accent-fg-soft); }
.stat--accent .stat__foot  { color: var(--accent-fg-dim); }

.delta { font: 500 11px/1 var(--mono); display: inline-flex; align-items: center; gap: 3px; }
.delta--up   { color: var(--ok); }
.delta--down { color: var(--bad); }

/* ============================================================
   Píldoras y estados
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: .05em;
  background: var(--cream-deep);
  color: var(--muted);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.pill--ok   { background: var(--ok-wash);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.pill--warn { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 24%, transparent); }
.pill--bad  { background: var(--bad-wash);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
.pill--bordo{ background: var(--bordo-wash);color: var(--bordo);border-color: color-mix(in srgb, var(--bordo) 20%, transparent); }
.pill--ink  { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot--ok   { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--bad  { background: var(--bad); }
.dot--na   { background: var(--muted-soft); }

/* Semáforo de implementación */
.traffic { display: inline-flex; align-items: center; gap: 7px; }
.traffic__bulb {
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
  background: currentColor;
  flex: none;
}
.traffic--ok      { color: var(--ok); }
.traffic--partial { color: var(--warn); }
.traffic--due     { color: var(--bad); }
.traffic--na      { color: var(--muted-soft); }

/* ============================================================
   Botones
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 600 12.5px/1 var(--sans);
  cursor: pointer;
  box-shadow: var(--shadow-xs), var(--inset-top);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.btn:hover  { box-shadow: var(--shadow-sm), var(--inset-top); border-color: var(--line); transform: translateY(-1px); }
.btn:active { transform: scale(.982) translateY(0); }
.btn svg { width: 15px; height: 15px; }

.btn--primary {
  background: var(--bordo);
  border-color: var(--bordo);
  color: var(--bordo-ink);
  box-shadow: 0 10px 26px -14px rgba(112,31,43,.85), inset 0 1px 0 rgba(255,255,255,.16);
  padding-right: 6px;
}
.btn--primary:hover { background: var(--bordo-deep); border-color: var(--bordo-deep); }


.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn--ghost:hover { background: var(--cream-deep); box-shadow: none; color: var(--ink); }

.btn--danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.btn--danger:hover { background: var(--bad-wash); }

.btn--sm { padding: 6px 12px; font-size: 11.5px; }
.btn--sm.btn--primary { padding-right: 5px; }
.btn--block { width: 100%; justify-content: center; }

/* Botón dentro del botón */
.btn__orb {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  transition: transform .55s var(--ease-spring), background-color .4s var(--ease);
}
.btn--primary:hover .btn__orb { transform: translate(2px, -1px) scale(1.06); background: rgba(255,255,255,.24); }
.btn__orb svg { width: 13px; height: 13px; }
.btn--sm .btn__orb { width: 22px; height: 22px; }

/* ============================================================
   Formularios
   ============================================================ */

.field { margin-bottom: 15px; }
.field__label {
  display: block;
  font: 500 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 7px;
}
.field__hint { font-size: 11.5px; color: var(--muted-soft); margin-top: 6px; line-height: 1.5; }

/* Selector de varios responsables: chips que se togglean como checkbox. */
.ownerpick { display: flex; flex-wrap: wrap; gap: 7px; }
.ownerpick input { position: absolute; opacity: 0; pointer-events: none; }
.ownerpick__opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  font: 500 11px/1.5 var(--mono);
  background: var(--cream-deep);
  color: var(--muted);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ownerpick input:checked + .ownerpick__opt {
  background: var(--bordo-wash);
  color: var(--bordo);
  border-color: color-mix(in srgb, var(--bordo) 30%, transparent);
}
.ownerpick__opt .av { width: 18px; height: 18px; border-radius: 6px; font-size: 7.5px; }

.input, .select, .textarea {
  width: 100%;
  padding: 10px 13px;
  font: 400 13.5px/1.45 var(--sans);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(19,18,16,.035);
  transition: border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--bordo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bordo) 12%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-soft); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.input.num, .input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23655f50' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9384' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }

.inline-group { display: flex; gap: 8px; align-items: flex-end; }
.inline-group > * { margin-bottom: 0; }

/* Interruptor */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background-color .45s var(--ease);
  flex: none;
  box-shadow: inset 0 1px 2px rgba(19,18,16,.1);
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease-spring);
}
.switch input:checked + .switch__track { background: var(--bordo); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--bordo); outline-offset: 2px; }
.switch__text { font-size: 12.5px; }

/* Selector segmentado */
.segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--cream-deep);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  /* Con muchas pestañas no entra en un telefono. En vez de forzar todo el
     ancho de la pagina, se vuelve una tira que se desliza, como una barra
     de pestañas nativa. */
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.segment::-webkit-scrollbar { display: none; }
.segment a, .segment button {
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 600 11.5px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.segment a:hover, .segment button:hover { color: var(--ink); }
.segment .is-on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-xs), var(--inset-top);
}
.segment .is-on.is-bordo { background: var(--bordo); color: var(--bordo-ink); }

/* Casilleros de red social */
.checkgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.checkchip { position: relative; }
.checkchip input { position: absolute; opacity: 0; pointer-events: none; }
.checkchip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .4s var(--ease);
}
.checkchip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.checkchip input:focus-visible + span { outline: 2px solid var(--bordo); outline-offset: 2px; }

/* ============================================================
   Tablas
   ============================================================ */

.tablewrap { overflow-x: auto; }
.tablewrap::-webkit-scrollbar { height: 7px; }
.tablewrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left;
  padding: 10px 14px;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-soft);
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
table.data td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.data tbody tr { transition: background-color .3s var(--ease); }
table.data tbody tr:hover { background: var(--cream); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .cell-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.data .cell-act { width: 1%; white-space: nowrap; text-align: right; }

.rowlink { font-weight: 600; }
.rowlink:hover { color: var(--bordo); }

.empty { padding: 52px 24px; text-align: center; }
.empty__icon {
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--cream-deep);
  color: var(--muted-soft);
  border: 1px solid var(--line-soft);
}
.empty__icon svg { width: 21px; height: 21px; }
.empty h4 { font-size: 14px; margin-bottom: 5px; }
.empty p { color: var(--muted); font-size: 12.5px; max-width: 380px; margin: 0 auto 16px; line-height: 1.6; }

/* ============================================================
   Barra de progreso
   ============================================================ */

.bar {
  height: 6px;
  border-radius: 999px;
  background: var(--cream-deep);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(19,18,16,.06);
}
.bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--bordo);
  transition: width .9s var(--ease);
}
.bar__fill--ok   { background: var(--ok); }
.bar__fill--warn { background: var(--warn); }
.bar__fill--bad  { background: var(--bad); }

/* ============================================================
   Gráfico de barras
   ============================================================ */

.chart { display: flex; align-items: stretch; gap: 6px; height: 150px; padding-top: 8px; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; height: 100%; }
.chart__stack { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.chart__bar {
  flex: 1;
  max-width: 15px;
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
  animation: grow .85s var(--ease) backwards;
  position: relative;
}
.chart__bar--in  { background: var(--bordo); }
.chart__bar--out { background: var(--line); }
:root[data-theme="dark"] .chart__bar--out { background: var(--ink-2); opacity: .45; }
.chart__label { font: 500 9.5px/1 var(--mono); color: var(--muted-soft); text-transform: uppercase; letter-spacing: .06em; }

@keyframes grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

.legend { display: flex; gap: 16px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }

/* ============================================================
   Calendario
   ============================================================ */

.cal { border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; background: var(--line-soft); }
.cal__dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}
.cal__dow div {
  background: var(--cream);
  padding: 9px 10px;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); }

.cal__day {
  background: var(--paper);
  min-height: 116px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background-color .35s var(--ease);
}
.cal__day:hover { background: var(--cream); }
.cal__day--out { background: var(--cream); opacity: .5; }
.cal__day--today { background: var(--bordo-wash); }
.cal__num {
  font: 500 11px/1 var(--mono);
  color: var(--muted-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal__day--today .cal__num { color: var(--bordo); font-weight: 600; }

.chip {
  display: block;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--cream-deep);
  border-left: 2px solid var(--muted-soft);
  font-size: 10.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform .4s var(--ease), background-color .35s var(--ease);
}
.chip:hover { transform: translateX(2px); background: var(--paper); }
.chip__time { font: 500 9px/1 var(--mono); color: var(--muted-soft); display: block; margin-bottom: 2px; }
.chip--bordo { border-left-color: var(--bordo); background: var(--bordo-wash); }
.chip--ok    { border-left-color: var(--ok);   background: var(--ok-wash); }
.chip--warn  { border-left-color: var(--warn); background: var(--warn-wash); }
.chip--ink   { border-left-color: var(--ink);  }

/* ============================================================
   Tablero kanban
   ============================================================ */

.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.board::-webkit-scrollbar { height: 7px; }
.board::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.board__col { flex: 0 0 262px; background: var(--cream-deep); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 5px; }
.board__head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 10px; }
.board__title { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.board__count { font: 500 10px/1 var(--mono); color: var(--muted-soft); }
.board__items { display: flex; flex-direction: column; gap: 5px; min-height: 40px; }

.tile {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  box-shadow: var(--shadow-xs);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tile__title { font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
.tile__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   Línea de tiempo
   ============================================================ */

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
}
.tl { position: relative; padding-bottom: 20px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: '';
  position: absolute;
  left: -22px; top: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
}
.tl--bordo::before { border-color: var(--bordo); background: var(--bordo); }
.tl--ok::before    { border-color: var(--ok); background: var(--ok); }
.tl__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.tl__when { font: 500 10px/1 var(--mono); color: var(--muted-soft); }
.tl__body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; white-space: pre-wrap; }

/* ============================================================
   Avatares
   ============================================================ */

.av {
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border-radius: 9px;
  /* Peso 500: es el mas alto que trae DM Mono. Pedir 600 fuerza una negrita
     sintetica que Safari renderiza borroneada y oscura. */
  font: 500 9.5px/1 var(--mono);
  font-synthesis: none;
  color: #fffdf8;
  flex: none;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av--sm { width: 21px; height: 21px; border-radius: 7px; font-size: 8.5px; }
.av--lg { width: 44px; height: 44px; border-radius: 14px; font-size: 14px; }

.who { display: inline-flex; align-items: center; gap: 7px; }

/* ============================================================
   Avisos
   ============================================================ */

.flashwrap { position: fixed; top: 16px; right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  animation: slidein .6s var(--ease) backwards;
}
.flash--error { background: var(--bad); }
.flash--ok::before, .flash--error::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-top: 6px; flex: none; opacity: .8; }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: var(--cream-deep);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--muted); }
.notice--warn { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.notice--warn svg { color: var(--warn); }
.notice--bad  { background: var(--bad-wash); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.notice--bad svg { color: var(--bad); }
.notice--bordo { background: var(--bordo-wash); border-color: color-mix(in srgb, var(--bordo) 20%, transparent); }
.notice--bordo svg { color: var(--bordo); }

/* ============================================================
   Detalles desplegables
   ============================================================ */

details.fold { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
details.fold + details.fold { margin-top: 8px; }
details.fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .35s var(--ease);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: var(--cream); }
details.fold > summary::after {
  content: '';
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted-soft);
  border-bottom: 1.5px solid var(--muted-soft);
  transform: rotate(45deg);
  transition: transform .45s var(--ease);
}
details.fold[open] > summary::after { transform: rotate(-135deg); }
details.fold > .fold__body { padding: 0 17px 17px; border-top: 1px solid var(--line-soft); padding-top: 16px; }

/* ============================================================
   Ingreso
   ============================================================ */

.gate {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--cream);
}
.gate__art {
  position: relative;
  background: #131210;
  color: #fffdf8;
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.gate__art::after {
  content: '';
  position: absolute;
  width: 620px; height: 620px;
  right: -230px; bottom: -290px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(112,31,43,.62), transparent 66%);
  pointer-events: none;
}
.gate__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,253,248,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,253,248,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.gate__art > * { position: relative; z-index: 1; }
.gate__quote { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.14; letter-spacing: -.035em; max-width: 15ch; }
.gate__quote em { font-style: italic; color: #d98a95; }
.gate__foot { font: 500 10px/1.7 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,253,248,.38); }

.gate__form { display: grid; place-items: center; padding: 40px 32px; }
.gate__box { width: 100%; max-width: 366px; }
.gate__title { font-family: var(--serif); font-size: 29px; letter-spacing: -.03em; margin: 14px 0 6px; }

.reveal { animation: reveal .8s var(--ease) backwards; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Código de verificación */
.otp {
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: .42em;
  text-align: center;
  padding: 13px;
  text-indent: .42em;
}

.secretbox {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .14em;
  padding: 13px 15px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-sm);
  word-break: break-all;
  user-select: all;
  line-height: 1.7;
}

/* ============================================================
   Página de error
   ============================================================ */

.errpage { min-height: 100dvh; display: grid; place-items: center; padding: 40px 24px; text-align: center; }
.errpage__code { font-family: var(--serif); font-size: 76px; line-height: 1; letter-spacing: -.05em; color: var(--bordo); }
.errpage h1 { font-size: 21px; margin: 14px 0 8px; }
.errpage p { color: var(--muted); max-width: 400px; margin: 0 auto 24px; line-height: 1.65; }

/* ============================================================
   Entradas al hacer scroll
   ============================================================ */

.rise { opacity: 0; transform: translateY(18px); }
.rise.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Adaptación a pantallas chicas
   ============================================================ */

@media (max-width: 1180px) {
  .b3 { grid-column: span 6; }
  .b4 { grid-column: span 6; }
  .b5 { grid-column: span 12; }
  .b7 { grid-column: span 12; }
  .b8 { grid-column: span 12; }
  .fila > * { flex-basis: calc(50% - 7px); }
  .gate { grid-template-columns: 1fr; }
  .gate__art { display: none; }
}

@media (max-width: 1080px) {
  .mainnav { display: none; }
  .menubtn { display: block; }
  .navuser__txt { display: none; }
  .navuser { padding: 4px; }
}

@media (max-width: 900px) {
  .topnav { top: 10px; margin: 10px 12px 0; padding: 0 8px 0 16px; height: 56px; }
  .page { padding: 16px 16px 52px; }
  .pagehead { padding: 22px 16px 0; }
  .pagehead__actions { margin-left: 0; width: 100%; }
  .bento { gap: 10px; }
  .b3, .b4, .b6 { grid-column: span 12; }
  .fila { gap: 10px; }
  .fila > * { flex-basis: 100%; }
  .grid2, .grid3, .grid4 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cal__day { min-height: 74px; padding: 5px; }
  .chip { font-size: 9.5px; padding: 3px 5px; }
  .stat__value { font-size: 25px; }
  .flashwrap { left: 12px; right: 12px; max-width: none; }
  .brand__name b { font-size: 17px; }

  /* Con el dedo hace falta mas superficie que con el mouse. */
  .iconbtn { width: 38px; height: 38px; }
  .iconbtn svg { width: 16px; height: 16px; }
  .menubtn { width: 42px; height: 38px; }
  .btn { padding: 10px 16px; }
  .btn--sm { padding: 8px 13px; }
  table.data td, table.data th { padding: 11px 12px; }

  /* Que ninguna tabla obligue a la pagina entera a scrollear de costado:
     el desplazamiento queda adentro de la tabla, no en el body. */
  .tablewrap { -webkit-overflow-scrolling: touch; }
  table.data { min-width: 560px; }
}

@media print {
  .topnav, .navsheet, .pagehead__actions, .btn, .menubtn { display: none !important; }
  body { background: #fff; }
}

/* Fila enlazada dentro de una tarjeta */
.rowitem {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .3s var(--ease);
}
.rowitem:last-child { border-bottom: 0; }
.rowitem:hover { background: var(--cream); }

/* Selector de nivel de permiso: el estado lo maneja el propio radio */
.permopt {
  padding: 5px 10px;
  border-radius: 999px;
  font: 600 10.5px/1 var(--sans);
  color: var(--muted-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.permopt:hover { color: var(--ink); }
input:checked + .permopt {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-xs), var(--inset-top);
}
input:checked + .permopt--manage { background: var(--bordo); color: var(--bordo-ink); }
input:checked + .permopt--edit   { background: var(--ok);    color: #fff; }
input:checked + .permopt--none   { background: var(--cream); color: var(--muted); }
input:focus-visible + .permopt   { outline: 2px solid var(--bordo); outline-offset: 2px; }

/* ============================================================
   Diálogos propios
   Reemplazan al confirm() del navegador, que corta la página y
   no se puede vestir.
   ============================================================ */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  color: var(--ink);
}
.modal::backdrop {
  background: color-mix(in srgb, #0b0a08 62%, transparent);
  backdrop-filter: blur(6px) saturate(.8);
  -webkit-backdrop-filter: blur(6px) saturate(.8);
  animation: fadein .3s var(--ease);
}
.modal__box {
  width: min(420px, calc(100vw - 32px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px 22px;
  box-shadow: var(--shadow-lg), var(--inset-top);
  text-align: center;
  animation: modalin .55s var(--ease-spring);
}
.modal__icon {
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--bad-wash);
  color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 22%, transparent);
}
.modal__icon svg { width: 22px; height: 22px; }
.modal__title { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -.025em; }
.modal__text {
  margin: 9px 0 24px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}
.modal__actions { display: flex; gap: 9px; }
.modal__actions .btn { flex: 1; justify-content: center; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalin {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Botones con más vida
   ============================================================ */

.btn, .iconbtn, .navlink, .tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Brillo que sigue al cursor. Sólo opacidad y transform: nada que
   obligue al navegador a recalcular la maquetación. */
.btn::before, .navlink::before, .tile::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, currentColor 16%, transparent), transparent 62%);
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.btn:hover::before, .navlink:hover::before, .tile:hover::before { opacity: 1; }
.btn--primary::before, .navlink.is-active::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .22), transparent 62%);
}

.btn {
  transition:
    transform .42s var(--ease-spring),
    box-shadow .45s var(--ease),
    background-color .35s var(--ease),
    border-color .35s var(--ease),
    color .35s var(--ease),
    letter-spacing .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); letter-spacing: .002em; }
.btn:active { transform: translateY(0) scale(.965); transition-duration: .1s; }

.btn--primary:hover {
  box-shadow: 0 16px 34px -14px rgba(112, 31, 43, .9), inset 0 1px 0 rgba(255, 255, 255, .2);
}
:root[data-theme="dark"] .btn--primary:hover {
  box-shadow: 0 16px 34px -14px rgba(183, 65, 79, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* La bolita del botón principal empuja hacia afuera al pasar por encima */
.btn__orb {
  transition: transform .55s var(--ease-spring), background-color .35s var(--ease);
}
.btn:hover .btn__orb { transform: translate(3px, -1px) rotate(4deg) scale(1.1); }
.btn:active .btn__orb { transform: translate(1px, 0) scale(.96); }

/* Los iconos sueltos del botón acompañan con un empujón lateral */
.btn > svg { transition: transform .5s var(--ease-spring); }
.btn:hover > svg { transform: translateX(-1px) scale(1.08); }
.btn--danger:hover > svg { transform: rotate(-8deg) scale(1.1); }

.iconbtn { transition: transform .45s var(--ease-spring), background-color .35s var(--ease), color .35s var(--ease); }
.iconbtn:hover { transform: translateY(-1px) scale(1.06); }
.iconbtn:active { transform: scale(.88); transition-duration: .1s; }
.iconbtn svg { transition: transform .5s var(--ease-spring); }
#themebtn:hover svg { transform: rotate(-18deg) scale(1.1); }

/* Estado ocupado: el texto se apaga y aparece un anillo girando */
.btn.is-loading { pointer-events: none; color: transparent; }
.btn.is-loading > *, .btn.is-loading .btn__orb { opacity: 0; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  top: 50%; left: 50%;
  margin: -7.5px 0 0 -7.5px;
  border: 1.8px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--ink);
  animation: spin .7s linear infinite;
}
.btn--primary.is-loading::after { color: var(--paper); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn.is-done { background: var(--ok-wash); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }

/* Enlaces de la barra: subrayado que crece desde la izquierda */
.navlink::after {
  content: '';
  position: absolute;
  left: 13px; right: 100%; bottom: 5px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: .5;
  transition: right .45s var(--ease);
}
.navlink:hover::after { right: 13px; }
.navlink.is-active::after { display: none; }
.navlink { transition: color .35s var(--ease), background-color .35s var(--ease), transform .4s var(--ease-spring); }
.navlink:active { transform: scale(.96); }

/* ============================================================
   Tarjetas y filas
   ============================================================ */

.card {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.card:hover { border-color: var(--line); }
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), var(--inset-top); }
.stat__value { transition: transform .5s var(--ease-spring); transform-origin: left bottom; }
.stat:hover .stat__value { transform: scale(1.03); }

.tile { transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease); }
.tile:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--shadow-md); }
.tile:active { transform: translateY(-1px) scale(.995); }

.rowitem { transition: background-color .3s var(--ease), padding-left .4s var(--ease); }
.rowitem:hover { padding-left: 6px; }

table.data tbody tr { transition: background-color .28s var(--ease); }

.pill { transition: transform .4s var(--ease-spring), background-color .3s var(--ease); }
a.pill:hover { transform: translateY(-1px) scale(1.04); }

.chip { transition: transform .4s var(--ease-spring), background-color .3s var(--ease), box-shadow .35s var(--ease); }
.chip:hover { transform: translateX(3px) scale(1.02); box-shadow: var(--shadow-sm); }

.segment a, .segment button { transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease-spring); }
.segment a:active { transform: scale(.95); }

.av { transition: transform .45s var(--ease-spring); }
.who:hover .av { transform: scale(1.08) rotate(-3deg); }

/* Barras de progreso: el relleno entra animado la primera vez */
.bar__fill { animation: barin .9s var(--ease) backwards; }
@keyframes barin { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar__fill { transform-origin: left; }

/* Formularios que se despliegan */
.is-unfolding { animation: unfold .5s var(--ease); }
@keyframes unfold {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Campos que reaccionan al foco */
.input, .select, .textarea {
  transition: border-color .35s var(--ease), background-color .35s var(--ease),
              box-shadow .35s var(--ease), transform .35s var(--ease);
}
.input:focus, .select:focus, .textarea:focus { transform: translateY(-1px); }

/* Aviso que se retira */
.flash { transition: opacity .5s var(--ease), transform .5s var(--ease); cursor: pointer; }
.flash.is-out { opacity: 0; transform: translateX(24px); }
.flash:hover { transform: translateX(-2px); }

/* Semáforo con latido suave cuando está en rojo */
.traffic--due .traffic__bulb { animation: latido 2.4s var(--ease) infinite; }
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 6%, transparent); }
}

.permrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 560px) {
  /* En un telefono la tabla de clientes entraba a la fuerza en 560px de ancho
     con ocho columnas: el telefono del cliente quedaba fuera de pantalla y
     habia que descubrir el scroll horizontal para llegar. En pantalla chica
     quedan solo nombre, contacto y acciones, y la tabla entra sin scroll.
     Lo escondido sigue estando en la ficha del cliente. */
  table.data .mob-hide { display: none; }
  table.data--slim { min-width: 0; }

  /* Etiqueta + selector de nivel arriba y abajo en vez de apretados en una
     sola fila: en un telefono angosto no entraban lado a lado. */
  .permrow { flex-wrap: wrap; row-gap: 9px; }
  .permrow .segment { flex: 1 1 100%; margin-left: 30px; width: calc(100% - 30px); }
}

/* ============================================================
   Bandeja de mensajes
   ============================================================ */

.inbox {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  height: calc(100dvh - 200px);
  min-height: 460px;
}

.inbox__list {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow-y: auto;
  box-shadow: var(--shadow-xs);
}
.inbox__list::-webkit-scrollbar { width: 6px; }
.inbox__list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.conv {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .3s var(--ease), padding-left .4s var(--ease);
}
.conv:hover { background: var(--cream); padding-left: 19px; }
.conv.is-open { background: var(--bordo-wash); }
.conv.is-open .conv__name { color: var(--bordo); }
.conv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conv__top { display: flex; align-items: center; gap: 7px; }
.conv__name { font-size: 13px; font-weight: 600; flex: 1; }
.conv__badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--bordo); color: var(--bordo-ink);
  font: 600 10px/1 var(--mono);
}
.conv__last { font-size: 12px; color: var(--muted); }
.conv__meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }

.inbox__thread {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.thread__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--cream);
}
.thread__link {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.thread__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--bordo) 4%, transparent), transparent 45%),
    var(--paper);
}
.thread__body::-webkit-scrollbar { width: 6px; }
.thread__body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.msg { display: flex; }
.msg--in  { justify-content: flex-start; }
.msg--out { justify-content: flex-end; }

.msg__bubble {
  max-width: min(74%, 520px);
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  animation: msgin .45s var(--ease) backwards;
}
.msg--in .msg__bubble {
  background: var(--cream-deep);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 5px;
}
.msg--out .msg__bubble {
  background: var(--bordo);
  color: var(--bordo-ink);
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 18px -10px rgba(112, 31, 43, .7);
}
.msg--priv .msg__bubble {
  background: var(--warn-wash);
  color: var(--ink);
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  box-shadow: none;
}
.msg__text { white-space: pre-wrap; word-break: break-word; }
.msg__meta { font: 500 9.5px/1 var(--mono); opacity: .62; margin-top: 6px; }
.msg__file {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .18);
  font-size: 11.5px;
}
.msg--in .msg__file { background: var(--paper); border: 1px solid var(--line-soft); }
.msg__filename { flex: 1; min-width: 0; font-weight: 600; }
.msg__filesize { font: 500 9.5px/1 var(--mono); opacity: .6; flex: none; }

/* Imagen, video y audio se ven dentro de la burbuja: si hay que abrir cada
   adjunto en una pestaña para saber qué mandaron, la bandeja no sirve. */
.msg__media {
  display: block;
  margin-top: 6px;
  max-width: 100%;
  width: 280px;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(0, 0, 0, .12);
}
.msg__media img,
.msg__media video { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; }
video.msg__media { object-fit: contain; }
.msg__media img { transition: transform .4s var(--ease); }
.msg__media:hover img { transform: scale(1.03); }

.msg__audio { display: block; margin-top: 6px; width: 250px; max-width: 100%; height: 38px; }
/* El reproductor nativo viene claro de fábrica y sobre el bordo no se lee. */
.msg--out .msg__audio { filter: invert(1) hue-rotate(180deg); }

.msg__bubble:has(.msg__media) { padding: 6px; }
.msg__bubble:has(.msg__media) .msg__text { padding: 5px 8px 0; }
.msg__bubble:has(.msg__media) .msg__meta { padding: 0 8px 3px; }

@keyframes msgin { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Mientras llega el hilo nuevo se atenúa el anterior: da señal de que algo
   está pasando sin hacer saltar el layout con un spinner. */
.inbox__thread.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s var(--ease); }

.thread__compose { border-top: 1px solid var(--line-soft); padding: 12px 16px; background: var(--cream); }
.thread__compose .textarea { background: var(--paper); }
.thread__composebar { display: flex; align-items: center; gap: 10px; margin-top: 9px; }

@media (max-width: 900px) {
  .inbox { grid-template-columns: 1fr; height: auto; }
  .inbox__list { max-height: 320px; }
  .inbox__thread { min-height: 420px; }
}

/* ---------- Portafolio (Proyectos · Web) ------------------- */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.pf-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs), var(--inset-top);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), var(--inset-top); border-color: var(--line); }
.pf-card__media {
  aspect-ratio: 16 / 10;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pf-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-card__media .dim { font-size: 11px; }
.pf-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pf-card__tagline { font-size: 12px; color: var(--muted); line-height: 1.5; }
.pf-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pf-card__foot { display: flex; align-items: center; gap: 8px; padding: 0 16px 16px; margin-top: auto; }
.pf-card__foot .btn { flex: 1; }
.pf-card--off { opacity: .55; }

/* ============================================================
   Grupos plegables del estado de los sistemas (inicio)
   ============================================================ */

.grupoestado { border-top: 1px solid var(--line-soft); }
.grupoestado > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
}
.grupoestado > summary::-webkit-details-marker { display: none; }
.grupoestado > summary::after {
  content: '';
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted-soft);
  border-bottom: 1.5px solid var(--muted-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease);
}
.grupoestado[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.grupoestado > summary:hover { color: var(--ink); }