/* BoxFlow — hoja de estilos unica. Sin dependencias externas.
   El acento (--acento) lo sobrescribe cada organizacion desde /c/{slug}/marca.css */

/* Poppins en local (Google Fonts), no enlazada: la CSP no abre style-src ni
   font-src a dominios externos. Es la fuente real de apachecrosstraining.com
   (poppins-semibold en los titulares, ahi con 300/400/600/700 estaticos
   porque Poppins no tiene variable-font en Google Fonts) -- antes usaba
   Bebas Neue por el wordmark del logo, pero el wordmark es una imagen; la
   tipografia que la web de verdad usa en texto es esta. El cuerpo real usa
   Avenir/DIN Next, de pago y no autoalojable: Poppins tambien ahi, mas
   coherente que mezclar con una fuente sin relacion. */
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Oscuro por defecto: la identidad real de Apache es "negro de fondo,
   naranja de marca" en todas partes, no solo en la cabecera (ver
   docs/apache-datos.md). Quien prefiera claro en su sistema lo sigue
   teniendo, como variante. */
:root {
  --fuente-titular: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-cuerpo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --acento: #FF9008;
  --acento-texto: #0B0B0C;   /* texto sobre el acento: negro, como la marca */

  --fondo: #0B0B0C;
  --superficie: #141416;
  --superficie-2: #1D1D20;
  --borde: #2A2A2E;
  --texto: #F2F0EC;
  --texto-suave: #9A968E;
  --marca-fondo: #000000;    /* la cabecera va siempre en negro */
  --marca-texto: #FFFBF3;

  --ok-fondo: #0F2418;   --ok-borde: #2C5C3C;   --ok-texto: #9EE6B4;
  --aviso-fondo: #2A2109; --aviso-borde: #5E4A15; --aviso-texto: #F0CF8A;
  --error-fondo: #2A1214; --error-borde: #5F2325; --error-texto: #F4A9AB;

  --radio: 18px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #F7F6F3;
    --superficie: #FFFFFF;
    --superficie-2: #EFEDE8;
    --borde: #DEDBD4;
    --texto: #121212;
    --texto-suave: #635E55;
    --marca-fondo: #0B0B0C;
    --marca-texto: #FFFBF3;

    --ok-fondo: #E6F5EA;   --ok-borde: #A8D9B5;   --ok-texto: #14532D;
    --aviso-fondo: #FFF3DF; --aviso-borde: #F0CE8C; --aviso-texto: #6B4708;
    --error-fondo: #FDEAEA; --error-borde: #F0B3B3; --error-texto: #7F1D1D;
    --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .05);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 var(--fuente-cuerpo);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; transition: color .2s ease; }
a:hover { text-decoration: underline; }

/* Transiciones suaves por defecto en todo lo interactivo: sin esto, los
   estados hover/focus cambian de golpe y se nota mucho mas "sin pulir". */
button, .boton, .boton-secundario, .boton-peligro, .boton-mini,
.pastilla, .dia-chip, .socio-card, .centro-card, .tarifa, .avatar-link,
.nav a, .popover-cerrar, input, select, textarea {
  transition: background-color .2s ease, border-color .2s ease,
    color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

/* --- Cabecera --- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px;
  background: var(--marca-fondo); color: var(--marca-texto);
  border-bottom: 2px solid var(--acento);
}
.marca {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--fuente-titular); font-weight: 600; font-size: 22px; letter-spacing: .3px;
  text-transform: uppercase; color: var(--marca-texto); text-decoration: none;
}
.marca:hover { text-decoration: none; }
.marca img { width: 34px; height: 34px; border-radius: 50%; display: block; }
.marca-icono {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--acento); color: var(--acento-texto);
  font-size: 13px; font-weight: 800; letter-spacing: .5px;
}
.marca-claim {
  display: block; font-size: 10.5px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase; opacity: .62;
}
.badge-beta {
  margin-left: 7px; padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  font-size: 10px; font-weight: 600; letter-spacing: .5px; vertical-align: 2px;
}
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a {
  color: rgba(255, 251, 243, .72); font-size: 14px;
  padding: 6px 11px; border-radius: 8px;
}
.nav a:hover { background: rgba(255, 255, 255, .1); color: var(--marca-texto); text-decoration: none; }
.nav a.activo { background: var(--acento); color: var(--acento-texto); font-weight: 600; }
.nav-usuario { color: rgba(255, 251, 243, .55); font-size: 13px; padding: 0 6px; }

/* --- Barra de pestanas inferior (movil): la app se piensa para llevarse a
   una app movil de verdad, asi que en pantallas estrechas la navegacion
   principal vive abajo, al alcance del pulgar, como en cualquier app nativa.
   En escritorio se mantiene oculta y se usa la cabecera de siempre. --- */
.barra-tabs { display: none; }

/* --- Layout --- */
.contenido { flex: 1; width: 100%; max-width: 1060px; margin: 0 auto; padding: 26px 22px 48px; }
.estrecho { max-width: 460px; margin: 0 auto; }
.pie {
  padding: 18px 24px; border-top: 1px solid var(--borde);
  color: var(--texto-suave); font-size: 13px; text-align: center;
}
.chip-dev {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--aviso-fondo); border: 1px solid var(--aviso-borde);
  color: var(--aviso-texto); font-size: 11px; font-weight: 600;
}

/* --- Tarjetas --- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta h1 { margin: 0 0 4px; font-size: 21px; }
.tarjeta h2 { margin: 0 0 14px; font-size: 16px; }
.subtitulo { margin: 0 0 18px; color: var(--texto-suave); font-size: 14px; }
h1 { letter-spacing: -.4px; }

/* --- Formularios --- */
.campo { margin-bottom: 15px; }
.campo label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 13px;
  font: inherit; font-size: 14px;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 28%, transparent);
}
.pista { margin-top: 5px; color: var(--texto-suave); font-size: 12px; }
.fila { display: flex; gap: 12px; }
.fila > * { flex: 1; }

.boton {
  display: inline-flex; width: 100%; align-items: center; justify-content: center;
  height: 48px; padding: 0 20px;
  background: var(--acento); color: var(--acento-texto);
  border: 1px solid var(--acento); border-radius: 999px;
  font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer; text-align: center;
}
.boton:hover {
  background: transparent; color: var(--texto); border-color: var(--texto);
  text-decoration: none;
}
.boton-secundario {
  width: auto; height: 44px; background: var(--superficie-2); color: var(--texto);
  border-color: var(--borde); font-weight: 500; padding: 0 18px;
}
.boton-secundario:hover { background: var(--superficie); border-color: var(--acento); color: var(--texto); }
.boton-peligro {
  width: auto; height: 44px; background: transparent; color: var(--error-texto);
  border-color: var(--error-borde); font-weight: 600; padding: 0 18px;
}
.boton-peligro:hover { background: var(--error-fondo); color: var(--error-texto); border-color: var(--error-borde); }
.boton-mini { width: auto; height: 34px; padding: 0 14px; font-size: 13px; }
.boton:disabled, .boton[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.enlaces-form {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde);
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; flex-wrap: wrap;
}

/* --- Accesos directos de DEV_MODE: entrar sin contrasena en pruebas --- */
.dev-accesos {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--borde);
}
.dev-accesos .pista { margin: 0 0 10px; text-align: center; }
.dev-accesos .fila { gap: 10px; }
.dev-accesos .boton-secundario { width: 100%; height: 40px; font-size: 13px; }

/* --- Alertas --- */
.alerta {
  margin-bottom: 18px; padding: 12px 15px;
  border: 1px solid; border-radius: 10px; font-size: 14px;
}
.alerta ul { margin: 6px 0 0; padding-left: 20px; }
.alerta-ok    { background: var(--ok-fondo);    border-color: var(--ok-borde);    color: var(--ok-texto); }
.alerta-aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso-texto); }
.alerta-error { background: var(--error-fondo); border-color: var(--error-borde); color: var(--error-texto); }

/* --- Anillo de creditos (tarjeta destacada del socio) --- */
.tarjeta-anillo { margin-bottom: 16px; }
.anillo-cabecera { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.anillo-cabecera h2 { margin: 0; }
.anillo-cuerpo { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.anillo {
  flex: 0 0 auto; width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-items: center;
}
.anillo-hueco {
  width: 98px; height: 98px; border-radius: 50%; background: var(--superficie);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.anillo-valor { font-family: var(--fuente-titular); font-weight: 700; font-size: 32px; letter-spacing: 0; line-height: 1; }
.anillo-etiqueta { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.anillo-infinito {
  flex: 0 0 auto; width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-items: center; background: var(--superficie-2);
  font-family: var(--fuente-titular); font-weight: 700; font-size: 44px; color: var(--acento);
}
.anillo-extra { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 160px; }
.anillo-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.anillo-stat-valor { font-weight: 700; font-size: 16px; }
.anillo-stat-etiqueta { color: var(--texto-suave); font-size: 12.5px; }

.anillo-0  { background: conic-gradient(var(--superficie-2) 0deg 360deg); }
.anillo-1  { background: conic-gradient(var(--acento) 0deg 36deg, var(--superficie-2) 36deg 360deg); }
.anillo-2  { background: conic-gradient(var(--acento) 0deg 72deg, var(--superficie-2) 72deg 360deg); }
.anillo-3  { background: conic-gradient(var(--acento) 0deg 108deg, var(--superficie-2) 108deg 360deg); }
.anillo-4  { background: conic-gradient(var(--acento) 0deg 144deg, var(--superficie-2) 144deg 360deg); }
.anillo-5  { background: conic-gradient(var(--acento) 0deg 180deg, var(--superficie-2) 180deg 360deg); }
.anillo-6  { background: conic-gradient(var(--acento) 0deg 216deg, var(--superficie-2) 216deg 360deg); }
.anillo-7  { background: conic-gradient(var(--acento) 0deg 252deg, var(--superficie-2) 252deg 360deg); }
.anillo-8  { background: conic-gradient(var(--acento) 0deg 288deg, var(--superficie-2) 288deg 360deg); }
.anillo-9  { background: conic-gradient(var(--acento) 0deg 324deg, var(--superficie-2) 324deg 360deg); }
.anillo-10 { background: conic-gradient(var(--acento) 0deg 360deg); }

/* --- Metricas --- */
.rejilla-metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 13px; margin-bottom: 16px;
}
.metrica {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 17px; box-shadow: var(--sombra);
}
.metrica .valor { font-size: 27px; font-weight: 700; letter-spacing: -.7px; }
.metrica .etiqueta { color: var(--texto-suave); font-size: 12.5px; margin-top: 2px; }
.metrica.destacada { border-color: var(--acento); }
.metrica.destacada .valor { color: var(--acento); }
.metrica .valor.valor-texto { font-size: 15px; padding-top: 8px; }

/* --- Elige tu centro (tras el login, si hay mas de una sede) --- */
.rejilla-centros { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.centro-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  min-height: 200px; border-radius: var(--radio); padding: 18px;
  box-shadow: var(--sombra); text-decoration: none; color: #fff;
  background: var(--marca-fondo);
}
.centro-card .foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; transition: transform .3s;
}
.centro-card { transition: transform .3s ease, box-shadow .3s ease; }
.centro-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 20px 40px rgba(0,0,0,.3);
}
.centro-card:hover .foto { transform: scale(1.05); }
.centro-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.25) 65%);
}
.centro-card:hover { text-decoration: none; }
.centro-card .nombre {
  font-family: var(--fuente-titular); font-weight: 600; font-size: 22px; letter-spacing: 0;
  line-height: 1.15;
}
.centro-card .direccion { font-size: 12px; color: rgba(255,255,255,.75); min-height: 1.2em; }
.centro-card .entrar {
  align-self: flex-start; margin-top: 6px; padding: 7px 14px;
  border-radius: 9px; background: var(--acento); color: var(--acento-texto);
  font-size: 13px; font-weight: 700;
}

/* --- Selector de sede --- */
.barra-sedes {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--borde);
}
.pastilla {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-suave);
}
.pastilla:hover { border-color: var(--acento); color: var(--texto); text-decoration: none; }
.pastilla.activa { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }

/* --- Tira de dias --- */
.tira-dias { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.dia-chip {
  flex: 0 0 auto; min-width: 60px; padding: 9px 10px; text-align: center;
  border-radius: 11px; background: var(--superficie); border: 1px solid var(--borde);
  color: var(--texto-suave); text-decoration: none;
}
.dia-chip:hover { border-color: var(--acento); text-decoration: none; }
.dia-chip .dow { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.dia-chip .num { font-size: 19px; font-weight: 700; color: var(--texto); }
.dia-chip.activa { background: var(--acento); border-color: var(--acento); }
.dia-chip.activa .num, .dia-chip.activa .dow { color: var(--acento-texto); }
.dia-chip.hoy { border-color: var(--acento); }

/* --- Clases --- */
.lista-clases { display: flex; flex-direction: column; gap: 14px 10px; }
.clase {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
}
/* "Apuntado a esta clase": fondo teñido + anillo + insignia, independientes
   del color de actividad (border-left) para que no compitan por el mismo
   borde y el estado de reserva se vea de un vistazo. */
.clase.mia {
  background: color-mix(in srgb, var(--acento) 12%, var(--superficie));
  box-shadow: inset 0 0 0 1.5px var(--acento), var(--sombra);
}
.clase.mia::after {
  content: "✓";
  position: absolute; top: -7px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--acento); color: var(--acento-texto);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.clase.pasada { opacity: .5; }
.clase { border-left-width: 4px; }
/* Paleta fija para colorear cada tipo de actividad (Actividad.color_indice). */
.clase.acento-0 { border-left-color: #FF9008; }
.clase.acento-1 { border-left-color: #3B82F6; }
.clase.acento-2 { border-left-color: #22C55E; }
.clase.acento-3 { border-left-color: #A855F7; }
.clase.acento-4 { border-left-color: #EF4444; }
.clase.acento-5 { border-left-color: #06B6D4; }
.clase.acento-6 { border-left-color: #EAB308; }
.clase.acento-7 { border-left-color: #EC4899; }
.clase-hora {
  flex: 0 0 62px; font-size: 19px; font-weight: 700;
  letter-spacing: -.5px; font-variant-numeric: tabular-nums;
}
.clase-info { flex: 1; min-width: 0; }
.clase-nombre { font-weight: 650; font-size: 15px; }
.clase-meta { color: var(--texto-suave); font-size: 12.5px; margin-top: 2px; }
.clase-accion { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.aforo { font-size: 12.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.aforo.lleno { color: var(--error-texto); font-weight: 600; }

.avatares { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.avatar {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--acento); color: var(--acento-texto);
  font-size: 11px; font-weight: 700;
  border: 2px solid var(--superficie);
}
.avatar-mas { background: var(--superficie-2); color: var(--texto-suave); margin-left: -8px; }
.avatares > .avatar-mas:first-child { margin-left: 0; }
.avatar-foto { object-fit: cover; }
.avatar-link {
  display: inline-block; line-height: 0; text-decoration: none;
  background: none; border: none; padding: 0; margin-left: -8px;
  font: inherit; cursor: pointer;
}
.avatar-link:first-child { margin-left: 0; }
.avatar-link:hover .avatar { filter: brightness(1.1); outline: 2px solid var(--acento); outline-offset: 1px; }

/* --- Ficha de "quien es" al pinchar un avatar: popover nativo, sin JS.
   Se cierra solo (pinchando fuera) o con el boton de cerrar. --- */
.popover-quien {
  position: fixed; inset: 0; margin: auto;
  width: min(90vw, 300px); max-height: 80vh;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto);
  padding: 30px 24px 24px; box-shadow: var(--sombra);
  text-align: center;
}
.popover-quien::backdrop { background: rgba(0, 0, 0, .68); }
.popover-cerrar {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.popover-cerrar:hover { border-color: var(--acento); color: var(--acento); }
.popover-quien .avatar-enorme { margin: 0 auto 14px; }
.popover-nombre { margin: 0; font-size: 18px; }

.ficha-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ficha-cabecera .ficha-titulo { margin: 0 0 4px; }
.ficha-cabecera .subtitulo { margin: 0; }

.quien-tarjeta { text-align: center; }
.avatar-enorme { width: 108px; height: 108px; font-size: 34px; border: none; margin: 0 auto 14px; }
.quien-tarjeta .ficha-titulo { margin: 0 0 4px; }
.quien-tarjeta .boton-secundario { width: auto; margin-top: 18px; }

.clase details.wod {
  border-top: none; margin-top: 8px; padding-top: 0;
}
.clase details.wod summary { font-size: 12px; }
.wod-texto { margin: 6px 0 0; font-size: 13px; white-space: pre-line; }

/* --- Tarjetas de socio --- */
.rejilla-socios { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 13px; }
.socio-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra);
  text-decoration: none; color: var(--texto);
}
.socio-card:hover {
  border-color: var(--acento); text-decoration: none;
  transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,.15), 0 16px 32px rgba(0,0,0,.18);
}
.socio-cabecera { display: flex; align-items: center; gap: 10px; }
.socio-nombre { font-weight: 650; font-size: 14.5px; }
.socio-etiquetas { display: flex; flex-wrap: wrap; gap: 5px; }
.avatar-grande {
  width: 42px; height: 42px; font-size: 15px;
  border: none; margin-left: 0; flex: 0 0 auto;
}
.socio-plan { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.socio-plan .plan-nombre { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.socio-plan .plan-precio { font-size: 15px; font-weight: 700; color: var(--acento); }

/* --- Tablas --- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borde); }
th { color: var(--texto-suave); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
tbody tr:last-child td { border-bottom: none; }

.etiqueta-rol, .etiqueta-estado {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie-2);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.estado-ok { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok-texto); }
.estado-pendiente { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso-texto); }
.estado-fallo { background: var(--error-fondo); border-color: var(--error-borde); color: var(--error-texto); }
.estado-acento { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }

/* --- Tarifas --- */
.rejilla-tarifas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.tarifa {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra);
}
.tarifa .nombre { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-suave); font-weight: 700; }
.tarifa .precio { font-size: 32px; font-weight: 700; letter-spacing: -1.2px; margin: 6px 0 2px; }
.tarifa .precio small { font-size: 13px; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
.tarifa ul { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--texto-suave); }
.tarifa.contratada { border-color: var(--acento); }
.tarifa.inactiva { opacity: .55; }

/* --- Paneles plegables (edicion inline, sin JS) --- */
details { border-top: 1px solid var(--borde); padding-top: 10px; }
details summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--acento);
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; }
details[open] summary::before { content: "− "; }

/* --- Utilidades de espaciado y formularios en linea ---
   Sustituyen a los style="" sueltos que la CSP (style-src 'self') bloquea
   en cualquier navegador real: sin esto, estos ajustes nunca se aplicaban. */
.titulo-pagina { margin: 0 0 4px; }

.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }

.campo-ancho-2  { flex: 2; }
.campo-ancho-14 { flex: 1.4; }
.campo-auto     { flex: 0 0 auto; align-self: flex-end; }
.campo-flex     { margin-bottom: 0; flex: 1; }

.form-linea-fin { display: flex; gap: 10px; align-items: flex-end; max-width: 220px; }

.lista-checks {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px;
}
.check-etiqueta {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-weight: 500; font-size: 14px; cursor: pointer;
}
.check-etiqueta input[type="checkbox"] { width: auto; }

/* --- Utilidades --- */
.codigo {
  display: block; padding: 12px; margin: 12px 0;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 9px; font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px; word-break: break-all;
}
.suave { color: var(--texto-suave); }
.mini { font-size: 13px; }
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li { padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.lista-limpia li:last-child { border-bottom: none; }
.linea-form { display: inline; }
.vacio { text-align: center; padding: 34px 20px; color: var(--texto-suave); }

/* --- Landing --- */
.hero { text-align: center; padding: 34px 0 28px; }
.hero h1 {
  margin: 0 0 12px; font-family: var(--fuente-titular); font-weight: 600;
  font-size: 44px; letter-spacing: -.5px;
}
.hero p { margin: 0 auto 24px; max-width: 560px; color: var(--texto-suave); font-size: 16px; }
.hero-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-acciones .boton { width: auto; padding: 12px 24px; }

/* Variante con foto de fondo (landing y cabecera del panel de una org) */
.hero-foto {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radio); min-height: 340px;
  display: flex; align-items: flex-end; margin-bottom: 28px;
  box-shadow: var(--sombra); text-align: left;
}
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.3) 60%, rgba(0,0,0,.05));
}
.hero-foto .hero-texto { padding: 34px 32px; color: #fff; }
.hero-foto h1 {
  color: #fff; font-family: var(--fuente-titular); font-weight: 600;
  font-size: 44px; letter-spacing: -.5px; margin: 0 0 10px;
}
.hero-foto p { color: rgba(255,255,255,.85); margin: 0 auto 18px 0; }
.hero-foto .hero-acciones { justify-content: flex-start; }

.panel-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radio); min-height: 140px;
  display: flex; align-items: flex-end; margin-bottom: 20px; box-shadow: var(--sombra);
}
.panel-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.panel-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.2) 70%);
}
.panel-hero .panel-hero-texto { padding: 18px 22px; color: #fff; }
.panel-hero h1 {
  font-family: var(--fuente-titular); font-weight: 600; font-size: 28px; letter-spacing: -.3px;
  margin: 0 0 2px; color: #fff;
}
.panel-hero p { margin: 0; color: rgba(255,255,255,.82); font-size: 13.5px; }

/* --- Login con foto de marca (cuando la organizacion tiene una) --- */
.auth-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-items: center; max-width: 880px; margin: 20px auto 0;
}
.auth-split .auth-foto {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radio); min-height: 420px; box-shadow: var(--sombra);
}
.auth-split .auth-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
@media (max-width: 760px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-split .auth-foto { display: none; }
}

@media (max-width: 760px) {
  /* La navegacion principal baja a una barra de pestanas fija, al alcance
     del pulgar; arriba solo queda lo que no cabe abajo (Equipo, Plataforma,
     usuario, Salir). */
  .nav a.nav-en-tabs { display: none; }
  .pie { padding-bottom: calc(18px + 66px + env(safe-area-inset-bottom)); }

  .barra-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    background: var(--marca-fondo); border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 6px 4px max(6px, env(safe-area-inset-bottom));
  }
  .barra-tabs a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 4px 6px; border-radius: 12px;
    color: rgba(255, 251, 243, .5); font-size: 10.5px; font-weight: 600;
    letter-spacing: .1px; text-decoration: none;
  }
  .barra-tabs a svg { width: 21px; height: 21px; }
  .barra-tabs a:hover { color: rgba(255, 251, 243, .8); text-decoration: none; }
  .barra-tabs a.activo { color: var(--acento); }
}

@media (max-width: 620px) {
  .fila { flex-direction: column; gap: 0; }
  .hero h1 { font-size: 32px; }
  .hero-foto h1 { font-size: 32px; }
  .hero-foto { min-height: 240px; }
  .hero-foto .hero-texto { padding: 22px 18px; }
  .contenido { padding: 18px 14px 40px; }
  .cabecera { padding: 10px 14px; }
  .clase { gap: 12px; padding: 12px; }
  .clase-hora { flex-basis: 52px; font-size: 17px; }
}