/* Tablero de Stratio · pantallas (T3). Sale de las maquetas (tablero/maquetas/estilo.css, n.º 36, 42 y 45)
   Modo Operate con la marca del manual (docs/MARCA.md): navy para la estructura y los botones
   grandes, naranja donde se actúa, Poppins y Source Sans 3. Sin tarjetas flotantes ni sombras
   de relleno: las superficies se separan con color y con filetes. Azules derivados: hsl(213 50% L). */

@font-face { font-family: "Poppins"; src: url("fuentes/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fuentes/source-sans-3-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fuentes/source-sans-3-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fuentes/source-sans-3-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Marca */
  --navy: #203d61;            /* Regal Navy */
  --blue-gray: #6699cc;
  --pale-sky: #d1e0f0;
  --gris: #757575;
  --silver: #cecece;
  --naranja: #ff5f00;         /* Blaze Orange: acción, sección actual, lo que pide atención */
  --naranja-hover: hsl(22 100% 56%);

  /* Neutros (ronda 3: Valentino, «hay mucho azul»). Los nombres --azul-* quedan por las pantallas que ya los usan,
     pero ahora son grises casi puros: el azul queda para el menú, los títulos y los botones. */
  --navy-hover: hsl(213 50% 32%);
  --azul-10: #1f2227;  /* tinta */
  --azul-40: #595d64;  /* texto secundario (6,5:1 sobre el fondo) */
  --azul-55: #8b8f96;  /* borde de controles (3:1) */
  --azul-70: #b9bcc1;  /* bordes suaves */
  --azul-85: #e1e1dd;  /* filetes */
  --azul-95: #efefec;  /* filas bajo el mouse y campos */
  --fondo: #f8f8f6;    /* el fondo de las pantallas: casi blanco, sin blanco puro */
  --superficie: #fdfdfb; /* las hojas y los cuadros, un escalón más claro que el fondo */

  --tinta: var(--azul-10);
  --tinta-suave: var(--azul-40);

  --radio-control: 6px;
  --radio-boton: 8px;

  --t-xs: 0.75rem;
  --t-s: 0.84375rem;
  --t-m: 0.9375rem;
  --t-l: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.625rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lateral: 260px;

  --poppins: "Poppins", system-ui, sans-serif;
  --source: "Source Sans 3", system-ui, sans-serif;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgb(32 61 97 / 0.12);
  scroll-padding-top: 12px;
}
a, button, summary, label, select { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--source);
  font-size: var(--t-m);
  font-weight: 400;
  line-height: 1.45;
  caret-color: var(--naranja);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pale-sky); color: var(--azul-10); }
* { scrollbar-width: thin; scrollbar-color: var(--azul-70) transparent; }

h1, h2, h3, h4 {
  font-family: var(--poppins);
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); line-height: 1.15; letter-spacing: -0.03em; }
h2 { font-size: var(--t-l); line-height: 1.25; letter-spacing: -0.025em; }
h3, h4 { font-size: var(--t-m); line-height: 1.3; letter-spacing: -0.015em; }

p { margin: 0; }
a { color: var(--navy); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--naranja); }

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

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }

/* Saltar al contenido: visible sólo con foco */
.saltar {
  position: absolute; left: 12px; top: -100px; z-index: 60;
  padding: 10px 14px; border-radius: var(--radio-control);
  background: var(--navy); color: var(--fondo);
  font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); text-decoration: none;
}
.saltar:focus-visible { top: 12px; outline-color: var(--naranja); }

.numeros { font-variant-numeric: tabular-nums; }

/* Las ayudas y las descripciones se pueden apagar desde Configuración */
html.sin-descripciones .descripcion { display: none !important; }
html.sin-ayudas .ayuda { display: none !important; }

/* ---------- Íconos y la barra "/" del logo ---------- */
.icono { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.barra {
  display: inline-block; width: 0.563em; height: 0.9em; flex: none; background: currentColor;
  clip-path: polygon(34.3% 100%, 0% 100%, 68.2% 0%, 100% 0%);
}

/* ---------- Estructura: menú navy + contenido ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

.lateral {
  position: sticky;
  top: 0px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 26px 18px 20px;
  overflow-y: auto;
  background: var(--navy);
  color: var(--pale-sky);
}
.lateral :focus-visible { outline-color: var(--naranja); }
.lateral a { color: inherit; }
.logo-enlace { display: block; width: max-content; margin: 0 0 28px 8px; border-radius: 4px; }
.logo { display: block; height: 70px; width: auto; }

.navegacion ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.navegacion a, .navegacion .nav-pendiente {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px;
  border-radius: 10px; font-family: var(--poppins); font-weight: 500; font-size: 0.875rem;
  letter-spacing: -0.01em; color: var(--pale-sky); text-decoration: none; white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.navegacion a:hover { background: rgb(255 255 255 / 0.09); color: #fff; }
.navegacion a[aria-current="page"], .navegacion a[aria-current="true"] { background: var(--navy-hover); color: #fff; }
.navegacion .nav-pendiente { color: var(--azul-70); cursor: default; }
.navegacion .barra { color: transparent; font-size: 0.9rem; }
.navegacion a[aria-current] .barra { color: var(--naranja); }
.etiqueta-etapa {
  margin-left: auto; font-family: var(--source); font-weight: 600; font-size: var(--t-xs); letter-spacing: 0;
  color: var(--azul-70); border: 1px dashed var(--azul-70); border-radius: 6px; padding: 0 6px;
}

.cuenta { margin-top: auto; padding: 18px 10px 0; display: grid; gap: 2px; border-top: 1px solid rgb(209 224 240 / 0.22); }
.cuenta-nombre { font-weight: 600; color: #fff; }
.cuenta-dato { font-size: var(--t-s); color: var(--pale-sky); overflow-wrap: anywhere; }
.boton-texto {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 2px; border: 0; background: none;
  font: inherit; font-size: var(--t-s); color: var(--navy); text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-thickness: 1px; cursor: pointer;
}
.boton-texto:hover { text-decoration-color: var(--naranja); }
.cuenta .boton-texto { justify-self: start; margin-top: 8px; color: var(--pale-sky); }

.contenido { padding: 36px clamp(20px, 4vw, 56px) 64px; max-width: 1240px; width: 100%; }
/* Al pasar de una pantalla a otra el foco va al contenido (T10): no se le dibuja un marco a toda la hoja */
.contenido:focus-visible { outline: 0; }

/* Barra superior del celular */
.barra-movil { display: none; }

/* ---------- Encabezado de cada pantalla ---------- */
.migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none;
  font-size: var(--t-s); color: var(--tinta-suave);
}
.migas li { display: inline-flex; align-items: center; gap: 8px; }
.migas li + li::before {
  content: ""; width: 0.563em; height: 0.9em; background: var(--naranja);
  clip-path: polygon(34.3% 100%, 0% 100%, 68.2% 0%, 100% 0%);
}
.migas a { color: var(--tinta-suave); }
.migas [aria-current="page"] { color: var(--azul-10); font-weight: 600; }

.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 26px; }
.encabezado-texto { display: grid; gap: 8px; min-width: 0; }
.bajada { color: var(--tinta-suave); max-width: 62ch; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.seccion { margin-top: 40px; }
.seccion.primera { margin-top: 0; }
.seccion > h2 { margin-bottom: 6px; }
.seccion > .bajada { margin-bottom: 16px; }
.seccion > h2 + .hoja, .seccion > h2 + .mosaico { margin-top: 14px; }

/* ---------- Superficies: un marco con filete, sin sombra ---------- */
.hoja-titulo { padding: 18px 20px 6px; }
.hoja { background: var(--superficie); border: 1px solid var(--azul-85); border-radius: 10px; }

/* ---------- Botones ---------- */
.boton, .boton-principal, .boton-linea {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px;
  border: 0; border-radius: var(--radio-boton); font-family: var(--poppins); font-weight: 500; font-size: var(--t-s);
  letter-spacing: -0.01em; line-height: 1.3; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 120ms var(--ease);
}
.boton-principal { background: var(--naranja); color: var(--azul-10); }
.boton-principal:hover { background: var(--naranja-hover); }
.boton { background: var(--navy); color: var(--fondo); }
.boton:hover { background: var(--navy-hover); }
.boton-linea { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.boton-linea:hover { background: var(--navy); color: var(--fondo); }
.boton-principal:active, .boton:active, .boton-linea:active { transform: translateY(1px); }
.boton-chico { min-height: 38px; padding: 6px 14px; font-size: var(--t-xs); }
.boton-principal.boton-grande { min-height: 52px; padding: 12px 26px; font-size: var(--t-m); }

.boton-linea[aria-disabled="true"], .boton[aria-disabled="true"], button:disabled {
  cursor: not-allowed; color: var(--tinta-suave); box-shadow: none; outline: 1px dashed var(--azul-70);
  outline-offset: -1px; background: transparent;
}
.boton-linea[aria-disabled="true"]:hover { background: transparent; color: var(--tinta-suave); }

/* ---------- Estado: una pastilla con color, nunca sólo el color ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px;
  font-family: var(--source); font-weight: 600; font-size: var(--t-xs); line-height: 1.3; white-space: nowrap;
  color: var(--azul-10); background: var(--silver);
}
.pill-activo { background: var(--blue-gray); }
.pill-prueba { background: var(--naranja); }
.pill-alerta { background: var(--naranja); }
.pill-lectura { background: var(--silver); }
.pill-baja { background: transparent; color: var(--gris); box-shadow: inset 0 0 0 1.5px var(--gris); }
.tile .pill-baja { background: rgb(255 255 255 / 0.14); color: #fff; box-shadow: none; }

/* Estado en texto (punto + palabra), para listas y tablas */
.estado { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-s); white-space: nowrap; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); flex: none; }
.estado-prueba::before { background: var(--blue-gray); }
.estado-alerta::before { background: var(--naranja); }
.estado-apagado { color: var(--tinta-suave); }
.estado-apagado::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gris); }

/* ---------- Controles: búsqueda, filtros, segmentos ---------- */
.herramientas-lista { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1.5px solid var(--azul-85); }
.barra-filtros { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.buscar { position: relative; flex: 1 1 260px; max-width: 380px; }
.buscar .icono { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--tinta-suave); pointer-events: none; }
.campo {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-radius: var(--radio-control);
  background: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--azul-55); font: inherit; color: var(--tinta);
}
.buscar .campo { padding-left: 40px; }
.campo::placeholder { color: var(--tinta-suave); opacity: 1; }
.campo:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.campo:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: inset 0 0 0 1.5px var(--navy); }

.filtros { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.filtros button {
  min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--azul-70);
  font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.005em; color: var(--navy); cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.filtros button:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.filtros button[aria-pressed="true"] { background: var(--navy); color: var(--fondo); box-shadow: none; }
.filtros .cuenta-filtro { font-family: var(--source); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 6px; }

.segmentado { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--navy); }
.segmentado button {
  min-height: 40px; padding: 6px 20px; border: 0; border-radius: 999px; background: transparent;
  font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); color: var(--navy); cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.segmentado button[aria-pressed="true"] { background: var(--navy); color: var(--fondo); }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left; font-family: var(--poppins); font-weight: 500; font-size: var(--t-xs); letter-spacing: -0.005em;
  color: var(--tinta-suave); padding: 14px 18px 10px; border-bottom: 1.5px solid var(--azul-85); white-space: nowrap;
}
.tabla td { padding: 14px 18px; border-bottom: 1px solid var(--azul-85); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla td.primera { white-space: nowrap; }
.tabla .derecha { text-align: right; }
.tabla td.derecha { font-variant-numeric: tabular-nums; }
.secundario { display: block; font-size: var(--t-s); color: var(--tinta-suave); overflow-wrap: anywhere; }
.vacio { padding: 36px 20px; text-align: center; color: var(--tinta-suave); }
.pie-tabla { padding: 12px 18px 16px; font-size: var(--t-s); color: var(--tinta-suave); border-top: 1.5px solid var(--azul-85); }
.etiqueta-stratio {
  display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 6px; background: var(--navy); color: var(--fondo);
  font-family: var(--poppins); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0;
}
.confirmar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.confirmar[hidden] { display: none; }
.confirmar span { font-size: var(--t-s); color: var(--azul-10); }
.resumen { color: var(--tinta-suave); margin: 0 0 14px; }
.resumen strong { color: var(--azul-10); font-weight: 600; }

/* ---------- Botones grandes: el mosaico de empresas y de herramientas ---------- */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 16px; }

.tile {
  position: relative; display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: var(--radio-boton);
  background: var(--navy); color: var(--pale-sky); text-decoration: none;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
button.tile { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
a.tile:hover, button.tile:hover { background: var(--navy-hover); transform: translateY(-3px); box-shadow: inset 0 -5px 0 var(--naranja); }
a.tile:active { transform: translateY(-1px); }
a.tile:focus-visible, button.tile:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: var(--radio-boton); }
.tile-icono { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--naranja); color: var(--azul-10); }
.tile-icono .icono { width: 28px; height: 28px; }
.tile-nombre { font-family: var(--poppins); font-weight: 700; font-size: var(--t-l); line-height: 1.2; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.tile-desc { font-size: var(--t-s); }
.tile-datos { display: grid; gap: 2px; font-size: var(--t-s); }
.tile-datos strong { font-weight: 600; color: #fff; }
.tile-pie {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgb(209 224 240 / 0.25);
  font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); color: #fff;
}
.tile-pie .icono { margin-left: auto; transition: translate 200ms var(--ease); }
a.tile:hover .tile-pie .icono, button.tile:hover .tile-pie .icono { translate: 4px 0; }
.tile .pill { position: absolute; top: 14px; right: 14px; }
.tile-herr { min-height: 210px; }
.tile-herr .tile-pie { margin-top: auto; }

/* Logo de la empresa: una placa clara donde va el logo, y el nombre abajo */
.logo-plate {
  position: relative; display: grid; place-items: center; height: 128px; border-radius: 10px;
  background: var(--fondo); --plato: var(--fondo);
}
.logo-plate .logo-empresa { width: 84px; height: 84px; color: var(--c, var(--navy)); }
.logo-plate .pill { top: 10px; right: 10px; }
.tile-empresa { gap: 12px; padding: 14px 14px 16px; }
.tile-empresa .tile-nombre { padding: 2px 4px 0; }
.tile-empresa .tile-datos { padding: 0 4px; }
.logo-chico { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--azul-85); --plato: var(--fondo); }
.logo-chico .logo-empresa { width: 50px; height: 50px; color: var(--c, var(--navy)); }

/* Los colores de las empresas inventadas (cada cliente tiene el suyo: MODELO §10) */
.c-pan { --c: #b4532a; }
.c-dis { --c: #1f7a8c; }
.c-cor { --c: #a4243b; }
.c-fer { --c: #667a2b; }
.c-bod { --c: #7a3e7a; }
.c-tra { --c: #3b4ba0; }
.c-hot { --c: #2f6b4f; }
.c-cli { --c: #0e7490; }
.c-est { --c: #475569; }
.c-lib { --c: #b7791f; }
.c-tal { --c: #be5a83; }

/* ---------- Una empresa: encabezado y secciones como botones grandes ---------- */
.empresa-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 22px; }
.empresa-titulo { display: flex; align-items: center; gap: 18px; min-width: 0; }
.empresa-titulo h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.alta { font-size: var(--t-s); color: var(--tinta-suave); margin-top: 4px; overflow-wrap: anywhere; }

.secciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.seccion-boton {
  display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 20px; border-radius: var(--radio-boton);
  box-shadow: inset 0 0 0 2px var(--navy); color: var(--navy); text-decoration: none;
  font-family: var(--poppins); font-weight: 500; font-size: var(--t-m); letter-spacing: -0.015em;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.seccion-boton .icono { width: 26px; height: 26px; }
.seccion-boton:hover { background: var(--navy); color: #fff; }
.seccion-boton[aria-current="page"] { background: var(--naranja); box-shadow: none; color: var(--azul-10); }
.seccion-titulo { margin-bottom: 14px; }

/* ---------- Usuarios: una lista, no una grilla con una columna por herramienta ---------- */
.lista-usuarios { list-style: none; margin: 0; padding: 0; }
.usuario { border-bottom: 1px solid var(--azul-85); }
.lista-usuarios > li:last-child .usuario { border-bottom: 0; }
.usuario > summary, .usuario-fila {
  display: grid; grid-template-columns: auto minmax(220px, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; gap: 8px 16px;
  padding: 14px 18px; cursor: pointer; list-style: none;
}
.usuario > summary::-webkit-details-marker { display: none; }
.usuario > summary:hover { background: var(--azul-95); }
.usuario > summary .icono { transition: rotate 180ms var(--ease); color: var(--tinta-suave); }
.usuario[open] > summary .icono { rotate: 90deg; }
.usuario-fila.fija { cursor: default; border-bottom: 0; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--pale-sky); color: var(--navy);
  font-family: var(--poppins); font-weight: 700; font-size: var(--t-s); letter-spacing: -0.02em;
}
.avatar-admin { background: var(--navy); color: #fff; }
.usuario-quien { display: grid; min-width: 0; }
.usuario-quien strong { font-weight: 600; }
.usuario-acceso { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--azul-95); font-size: var(--t-s); white-space: nowrap; }
.chip-mas { background: transparent; box-shadow: inset 0 0 0 1.5px var(--azul-70); color: var(--tinta-suave); }
.usuario-detalle { margin: 0; padding: 4px 18px 18px 78px; list-style: none; display: grid; gap: 8px; }
.usuario-detalle li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; border-radius: 10px; background: var(--azul-95); }
.usuario-detalle .icono { color: var(--navy); }
.usuario-detalle .herr-nombre { font-weight: 600; min-width: 140px; }
.usuario-detalle .rol-desc { font-size: var(--t-s); color: var(--tinta-suave); }
.candado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--tinta-suave); }
.subtitulo-lista { padding: 16px 18px 6px; font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.005em; color: var(--tinta-suave); }
.lista-usuarios + .subtitulo-lista { border-top: 1.5px solid var(--azul-85); margin-top: 6px; }

/* Roles: la marca dice qué clase de permiso es (lleno navy = todo, gris azulado = carga, vacío = mira) */
.rol { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rol::before { content: ""; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rol-admin::before { background: var(--navy); }
.rol-carga::before { background: var(--blue-gray); }
.rol-mira::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--navy); }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 18px; border-top: 1.5px solid var(--azul-85); font-size: var(--t-s); color: var(--tinta-suave); }
.leyenda .rol { color: var(--azul-10); white-space: normal; }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 14px; }
.campo-grupo { display: grid; gap: 6px; min-width: 0; }
.etiqueta-campo { font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.01em; color: var(--azul-10); }
.ayuda-campo { font-size: var(--t-s); color: var(--tinta-suave); max-width: 62ch; }
.campo[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--azul-10); }
.error-campo { font-size: var(--t-s); font-weight: 600; color: var(--azul-10); }
.cuenta-clave { font-size: var(--t-s); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
select.campo {
  appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23203d61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; cursor: pointer;
}
.campo-clave { position: relative; }
.campo-clave .campo { padding-right: 96px; }
.campo-clave .mostrar { position: absolute; right: 6px; top: 50%; translate: 0 -50%; min-height: 36px; padding: 4px 10px; }
.fila-enlaces { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.rejilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
fieldset.grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
fieldset.grupo legend { padding: 0; margin-bottom: 4px; font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.01em; color: var(--azul-10); }
.divisor { display: flex; align-items: center; gap: 14px; font-size: var(--t-s); color: var(--tinta-suave); }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--azul-85); }

/* Mensaje de una pantalla: el punto va en naranja, lo que importa va en el texto */
.mensaje {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 12px 14px; border-radius: var(--radio-control);
  background: var(--azul-95); color: var(--azul-10);
}
.mensaje::before { content: ""; grid-row: span 3; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--naranja); }
.mensaje-ok::before { background: var(--navy); }
.mensaje strong { font-weight: 600; }
.mensaje p { color: var(--tinta-suave); }
.mensaje p:first-child { color: var(--azul-10); }

/* Aviso de la pantalla (prueba por vencer, pico de consumo) */
.aviso { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 20px; margin-bottom: 20px; }
.aviso .marca { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--naranja); grid-row: span 2; }
.aviso strong { font-weight: 600; color: var(--azul-10); }
.aviso p { color: var(--tinta-suave); }

/* Guía y ayudas plegables */
.guia { border-radius: var(--radio-control); background: var(--azul-95); }
.guia summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: var(--radio-control);
  cursor: pointer; list-style: none; font-weight: 600; color: var(--navy);
}
.guia summary::-webkit-details-marker { display: none; }
.guia summary .icono { margin-left: auto; transition: rotate 180ms var(--ease); }
.guia[open] summary .icono { rotate: 90deg; }
.guia-cuerpo { display: grid; gap: 12px; padding: 4px 16px 16px; }
.pasos { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--azul-10); }
.pasos li::marker { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.guia .pasos { gap: 10px; }
.guia .pasos strong { font-weight: 600; }

.opcion-radio { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radio-control); background: var(--azul-95); cursor: pointer; }
.opcion-radio input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); }
.opcion-radio:has(input:checked) { box-shadow: inset 0 0 0 2px var(--navy); }
.opcion-radio:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.opcion-radio span { display: grid; gap: 2px; }
.opcion-radio strong { font-weight: 600; }
.opcion-radio .detalle { font-size: var(--t-s); color: var(--tinta-suave); }

.cuenta-elegida { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radio-control); background: var(--azul-95); }
.cuenta-elegida strong { font-weight: 600; overflow-wrap: anywhere; }
.cuenta-elegida span { font-size: var(--t-s); color: var(--tinta-suave); }
.ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; margin: 0; padding: 12px 14px; border-radius: var(--radio-control); background: var(--azul-95); }
.ficha dt { font-size: var(--t-s); color: var(--tinta-suave); }
.ficha dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.verificacion { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px dashed var(--azul-70); border-radius: var(--radio-control); font-size: var(--t-s); color: var(--tinta-suave); }
.verificacion.verificacion-puesta { display: block; padding: 0; border: 0; min-height: 65px; }
.panel-sumar { padding: 20px; display: grid; gap: 16px; margin-bottom: 22px; }
.panel-sumar h2 { margin: 0; }

.boton-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 10px 20px; border: 0;
  border-radius: 24px; background: #f2f2f2; color: #1f1f1f; font-family: var(--source); font-weight: 600; font-size: var(--t-m);
  text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px #747775; width: 100%; max-width: 100%;
  transition: background-color 180ms var(--ease);
}
.boton-google:hover { background: #e8e8e8; }
.boton-google svg { width: 20px; height: 20px; flex: none; }

/* ---------- Pantallas de entrada: el arco a la izquierda, el panel a la derecha (un tercio) ---------- */
.entrada {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(440px, 34vw, 720px);
  height: 100vh; height: 100dvh; background: var(--navy);
}
.entrada-lado { position: relative; grid-column: 1; grid-row: 1; overflow: hidden; background: var(--navy); }
.entrada-lado .logo-lado { position: absolute; top: 36px; left: clamp(28px, 4.5vw, 72px); height: 70px; width: auto; }
.entrada-lado .ribete-lado { position: absolute; bottom: -4vh; right: clamp(24px, 9%, 140px); height: 52vh; width: auto; }
.entrada-lado .banda { position: absolute; top: 0; bottom: 0; right: 0; width: clamp(14px, 1.6vw, 26px); background: var(--naranja); clip-path: polygon(100% 0, 100% 100%, 0 100%, 55% 0); }
.notas-lado { position: absolute; left: clamp(28px, 4.5vw, 72px); top: 124px; width: min(520px, 56%); max-height: calc(100% - 340px); overflow-y: auto; display: grid; gap: 8px; z-index: 2; }.entrada-panel {
  grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: var(--fondo);
  padding: clamp(24px, 8vh, 72px) clamp(28px, 3.4vw, 56px) 24px; position: relative; z-index: 1;
}
.entrada-panel h1 { font-size: var(--t-xl); }
.entrada-panel .logo-movil { display: none; }
.entrada-panel .bloque { display: grid; gap: 10px; }
.entrada-panel .pasos { font-size: var(--t-s); gap: 4px; }
.entrada-panel h2 { font-size: var(--t-m); }
.entrada-panel .opcion-radio { padding: 9px 12px; }
.reservado { min-height: 64px; display: grid; align-content: start; }
.entrada-panel .mensaje { padding: 8px 12px; }
.entrada-panel .campo { min-height: 42px; }
.entrada-panel .formulario { gap: 10px; }
.entrada-letra-chica { font-size: var(--t-xs); color: var(--tinta-suave); max-width: 52ch; margin-top: auto; padding-top: 8px; }

/* La promesa de la entrada, sobre el navy: dos líneas y dos viñetas con punto naranja */
.promesa { position: absolute; left: clamp(28px, 4.5vw, 72px); bottom: clamp(24px, 7vh, 64px); width: min(400px, 50%); display: grid; gap: 10px; z-index: 1; background: var(--navy); }
.promesa h2 { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.03em; color: #fff; }
.promesa h2 span { display: block; color: var(--pale-sky); }
.promesa ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-s); color: var(--pale-sky); }
.promesa li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: start; }
.promesa li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--naranja); }

/* Contraseña temporal: se ve una sola vez, para pasarla en mano */
.entrega { display: grid; gap: 14px; padding: 18px 20px; border-radius: 12px; background: var(--azul-95); box-shadow: inset 0 0 0 2px var(--navy); }
.entrega-titulo { font-family: var(--poppins); font-weight: 700; font-size: var(--t-m); letter-spacing: -0.015em; color: var(--navy); }
.entrega .ficha { padding: 0; background: transparent; }
.clave-temporal {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: var(--t-l); font-weight: 600;
  letter-spacing: 0.01em; color: var(--azul-10); user-select: all; overflow-wrap: anywhere;
}
.entrega .acciones { gap: 8px 12px; }
.entrega-copiado { font-size: var(--t-s); font-weight: 600; color: var(--navy); min-height: 1.4em; }
.pill-temporal { background: var(--pale-sky); }
.usuario-quien .pill { justify-self: start; margin-top: 4px; }
.acceso { display: grid; gap: 10px; margin: 0; padding: 4px 18px 18px 78px; }
.acceso-linea { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--azul-95); }
.acceso-linea .icono { color: var(--navy); margin-top: 1px; }
.acceso .acciones .confirmar { gap: 8px 12px; }
.acceso .entrega { margin-top: 2px; }

/* Mi cuenta */
.cuenta-pantalla { display: grid; gap: 30px; max-width: 760px; }
.cuenta-pantalla .hoja { padding: 20px; display: grid; gap: 16px; }
.cuenta-pantalla .ficha { padding: 0; background: transparent; }
.cuenta-pantalla .formulario { max-width: 460px; }
.cuenta-pantalla h2 { margin-bottom: 4px; }

.reserva-error { min-height: 1.5em; }
.rejilla-boton { display: grid; gap: 10px; }
.selector-herr { width: auto; min-width: 230px; }
.pie-pagina { margin-top: 22px; }
.guia.pie-pagina, .hoja.pie-pagina, .bajada.pie-pagina { margin-top: 0; margin-bottom: 18px; }
.tile-stats { display: grid; gap: 2px; font-size: var(--t-s); }
.tile-stats strong { color: #fff; font-weight: 600; }

/* ---------- Configuración: ayudas y roles ---------- */
.config-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start; padding: 18px; border-bottom: 1px solid var(--azul-85); }
.config-fila:last-child { border-bottom: 0; }
.config-fila .interruptor { grid-row: span 2; margin-top: 2px; }
.config-titulo { font-family: var(--poppins); font-weight: 500; font-size: var(--t-m); letter-spacing: -0.015em; color: var(--azul-10); }
.config-fila p { color: var(--tinta-suave); max-width: 68ch; }
.interruptor { position: relative; width: 52px; height: 30px; border: 0; border-radius: 15px; background: var(--azul-55); cursor: pointer; transition: background-color 200ms var(--ease); }
.interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--fondo);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); transition: translate 200ms var(--ease);
}
.interruptor[aria-checked="true"] { background: var(--navy); }
.interruptor[aria-checked="true"]::after { translate: 22px 0; }

.acordeon { border-bottom: 1px solid var(--azul-85); }
.acordeon:last-child { border-bottom: 0; }
.acordeon > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 18px; cursor: pointer; list-style: none; font-family: var(--poppins); font-weight: 500; color: var(--navy); }
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary:hover { background: var(--azul-95); }
.acordeon > summary > .icono:last-child { margin-left: auto; transition: rotate 180ms var(--ease); }
.acordeon[open] > summary > .icono:last-child { rotate: 90deg; }
.acordeon-icono { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--naranja); color: var(--azul-10); flex: none; }
.roles-lista { margin: 0; padding: 4px 18px 16px 66px; list-style: none; display: grid; gap: 8px; }
.roles-lista li { display: grid; gap: 1px; }
.roles-lista .rol { font-weight: 600; }
.roles-lista .detalle { font-size: var(--t-s); color: var(--tinta-suave); padding-left: 16px; }

/* ---------- Llave, medidores y gráfico (admin de Stratio) ---------- */
.llave { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: start; padding: 18px 20px; margin-bottom: 22px; }
.llave .interruptor { grid-row: span 2; margin-top: 2px; }
.llave-titulo { font-family: var(--poppins); font-weight: 500; font-size: var(--t-m); letter-spacing: -0.015em; color: var(--azul-10); }
.llave p { color: var(--tinta-suave); max-width: 68ch; }
.medidores { list-style: none; margin: 0; padding: 0; }
.medidores li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 16px 20px; border-bottom: 1px solid var(--azul-85); }
.medidores li:last-child { border-bottom: 0; }
.medidor-nombre { font-weight: 600; color: var(--azul-10); }
.medidor-valor { font-size: var(--t-s); color: var(--tinta-suave); text-align: right; font-variant-numeric: tabular-nums; }
.medidor-valor strong { color: var(--azul-10); font-weight: 600; }
.medidor { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--azul-85); overflow: hidden; }
.medidor span { display: block; height: 100%; border-radius: 5px; background: var(--navy); }
.medidor-cerca .medidor span { background: var(--naranja); }
.medidor-nota { grid-column: 1 / -1; font-size: var(--t-s); color: var(--tinta-suave); }
.medidor-cerca .medidor-nota { color: var(--azul-10); }
.grafico { padding: 18px 20px 14px; }
.grafico-titulo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.grafico-titulo p { font-size: var(--t-s); color: var(--tinta-suave); }
.columnas { position: relative; display: grid; grid-template-columns: repeat(var(--dias, 14), minmax(0, 1fr)); align-items: end; gap: 6px; height: 160px; padding-top: 8px; border-bottom: 1.5px solid var(--azul-70); }
.columnas .tope { position: absolute; top: 8px; left: 0; right: 0; border-top: 1px dashed var(--azul-55); pointer-events: none; }
.columnas .tope span { position: absolute; right: 0; bottom: 4px; font-size: var(--t-xs); color: var(--tinta-suave); background: var(--fondo); padding-left: 6px; }
.columna { position: relative; height: 100%; display: flex; align-items: flex-end; border: 0; padding: 0; background: transparent; cursor: default; }
.columna span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--azul-55); transition: background-color 150ms var(--ease); }
.columna:hover span, .columna:focus-visible span { background: var(--navy); }
.columna-hoy span { background: var(--azul-85); box-shadow: inset 0 0 0 1.5px var(--azul-55); }
.ejes { display: grid; grid-template-columns: repeat(var(--dias, 14), minmax(0, 1fr)); gap: 6px; margin-top: 6px; font-size: var(--t-xs); color: var(--tinta-suave); text-align: center; font-variant-numeric: tabular-nums; }
.globo {
  position: fixed; z-index: 30; pointer-events: none; padding: 8px 10px; border-radius: var(--radio-control); background: var(--azul-10); color: var(--fondo);
  font-size: var(--t-s); line-height: 1.3; box-shadow: 0 2px 4px rgb(0 0 0 / 0.06), 0 18px 40px -14px rgb(0 0 0 / 0.22); white-space: nowrap;
}
.globo[hidden] { display: none; }
.globo strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.grilla-2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.stats span { white-space: nowrap; }

/* ---------- Herramienta (marco de ejemplo) ---------- */
.franja-herramienta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  padding: 10px clamp(16px, 4vw, 40px); background: var(--navy); color: var(--pale-sky); font-size: var(--t-s);
}
.franja-herramienta strong { color: #fff; font-weight: 600; }
.franja-herramienta a { color: #fff; }
.franja-herramienta a:hover { text-decoration-color: var(--naranja); }
.franja-herramienta :focus-visible { outline-color: var(--naranja); }
.herramienta-cuerpo {
  margin: 40px clamp(16px, 4vw, 40px); min-height: 60vh; display: grid; place-content: center; gap: 10px; text-align: center;
  padding: 40px 24px; border-radius: 12px; border: 2px dashed var(--azul-70); color: var(--tinta-suave);
}
.herramienta-cuerpo h1 { font-size: var(--t-xl); }
.nota-herramienta { margin-inline: clamp(16px, 4vw, 40px); }

/* ---------- Ronda 3 (02-10): todo más chico y más neutral ---------- */
h1 { font-size: var(--t-2xl); letter-spacing: -0.025em; }
.lateral { padding: 18px 12px 16px; }
.logo-enlace { margin: 0 0 22px 6px; }
.lateral .logo { height: 70px; width: auto; }
.navegacion ul { gap: 2px; }
.navegacion a, .navegacion .nav-pendiente { min-height: 36px; padding: 6px 10px; gap: 10px; border-radius: 7px; font-size: var(--t-s); }
.cuenta { padding: 14px 8px 0; }
.cuenta-nombre { font-size: var(--t-s); }
.cuenta-dato { font-size: var(--t-xs); }
.contenido { padding: 28px clamp(18px, 3vw, 40px) 56px; }
.encabezado { margin-bottom: 18px; }
.seccion { margin-top: 30px; }

/* Botones, campos y filtros: del tamaño de una herramienta de trabajo, no de un cartel */
.boton, .boton-principal, .boton-linea { min-height: 36px; padding: 6px 14px; font-size: var(--t-s); gap: 7px; }
.boton-chico { min-height: 30px; padding: 4px 11px; font-size: var(--t-xs); }
.boton-principal.boton-grande { min-height: 40px; padding: 8px 20px; font-size: var(--t-m); }
.boton-texto { min-height: 30px; font-size: var(--t-s); }
.campo { min-height: 36px; padding: 6px 10px; }
.entrada-panel .campo { min-height: 40px; }
.buscar { flex: 0 1 300px; }
.buscar .campo { padding-left: 36px; }
.buscar .icono { left: 11px; }
.filtros { gap: 6px; }
.filtros button { min-height: 30px; padding: 3px 12px; font-size: var(--t-s); }
.segmentado button { min-height: 30px; padding: 3px 14px; font-size: var(--t-s); }
.barra-filtros { margin-bottom: 16px; }
.herramientas-lista { padding: 10px 14px; }
.interruptor { width: 44px; height: 26px; }
.interruptor::after { width: 20px; height: 20px; }
.interruptor[aria-checked="true"]::after { translate: 18px 0; }
.etiqueta-campo { font-size: var(--t-s); }

/* «Seleccionado» ya no es naranja: va en navy, como los filtros. El naranja queda para la acción principal */
.secciones { gap: 8px; margin-bottom: 22px; }
.seccion-boton {
  flex: 0 0 auto; min-height: 36px; padding: 5px 14px; gap: 8px; border-radius: var(--radio-boton);
  box-shadow: inset 0 0 0 1px var(--azul-55); color: var(--navy); font-size: var(--t-s); letter-spacing: -0.005em;
}
.seccion-boton .icono { width: 18px; height: 18px; }
.seccion-boton:hover { background: var(--azul-95); color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.seccion-boton[aria-current="page"] { background: var(--navy); box-shadow: none; color: #fff; }

/* Estados: pastillas neutras; sólo «En prueba» lleva un toque de naranja (un tinte, no el naranja pleno) */
.pill { padding: 2px 9px; font-size: var(--t-xs); background: var(--azul-85); color: var(--azul-10); }
.pill-activo, .pill-lectura, .pill-temporal { background: var(--azul-85); }
.pill-prueba, .pill-alerta { background: #ffe0cc; }
.pill-baja { background: transparent; }

/* Botones grandes (empresas y herramientas), más chicos */
.mosaico { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.tile { padding: 14px; gap: 8px; }
.tile-icono { width: 38px; height: 38px; border-radius: 8px; background: rgb(255 255 255 / 0.12); color: #fff; }
.acordeon-icono { background: var(--azul-85); color: var(--navy); }
.tile-icono .icono { width: 22px; height: 22px; }
.tile-nombre { font-size: var(--t-m); }
.tile-desc, .tile-datos { font-size: var(--t-s); }
.tile-herr { min-height: 150px; }
.tile-pie { font-size: var(--t-s); padding-top: 10px; }
.tile .pill { top: 12px; right: 12px; }
.logo-plate { height: 88px; border-radius: 8px; }
.logo-plate .logo-empresa { width: 60px; height: 60px; }
.tile-empresa { padding: 10px 10px 12px; gap: 10px; }
.logo-chico { width: 56px; height: 56px; border-radius: 10px; }
.logo-chico .logo-empresa { width: 38px; height: 38px; }
.empresa-titulo { gap: 14px; }

/* Usuarios */
.avatar { width: 34px; height: 34px; background: var(--azul-85); color: var(--azul-10); font-size: var(--t-xs); }
.avatar-admin { background: var(--navy); color: #fff; }
.usuario > summary, .usuario-fila { padding: 9px 16px; gap: 6px 14px; }
.usuario-detalle { padding: 4px 16px 14px 64px; }
.chip { background: var(--azul-95); font-size: var(--t-xs); padding: 2px 9px; }
.tabla th { padding: 10px 14px 8px; }
.tabla td { padding: 10px 14px; }
.panel-sumar { padding: 18px; }
.config-fila { padding: 14px 16px; }

/* ---------- Celular y tablet ---------- */
@media (max-width: 960px) {
  html { scroll-padding-top: 64px; }
  .app { grid-template-columns: minmax(0, 1fr); }

  .barra-movil {
    position: sticky; top: 0px; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 58px;
    padding: 6px 12px; background: var(--navy); color: #fff;
  }
  .barra-movil :focus-visible { outline-color: var(--naranja); }
  .barra-movil-titulo { min-width: 0; font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .boton-menu {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--radio-control);
    background: rgb(255 255 255 / 0.12); font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); color: #fff; cursor: pointer;
  }
  .lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(320px, 88vw); height: 100%; padding: 24px 16px 20px; overscroll-behavior: contain;
    box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.5); translate: -105% 0; visibility: hidden;
    transition: translate 240ms var(--ease), visibility 0s linear 240ms;
  }
  html.menu-abierto .lateral { translate: 0 0; visibility: visible; transition: translate 240ms var(--ease); }
  .velo { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.35); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); }
  html.menu-abierto .velo { opacity: 1; pointer-events: auto; }
  .cerrar-menu { align-self: flex-end; margin: -10px -4px 4px 0; color: var(--pale-sky); }

  .contenido { padding: 22px 16px 48px; }
  h1 { font-size: var(--t-xl); }
  .encabezado { margin-bottom: 20px; align-items: flex-start; }
  .seccion { margin-top: 34px; }
  .secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seccion-boton { padding: 10px 12px; font-size: var(--t-s); min-height: 58px; gap: 8px; }
  .empresa-titulo { gap: 14px; }
  .logo-chico { width: 64px; height: 64px; }

  .grilla-2 { grid-template-columns: minmax(0, 1fr); }
  .medidores li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .medidor-valor { text-align: left; }
  .medidor { margin-top: 4px; }

  .tabla-apilable thead { display: none; }
  .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td { display: block; width: 100%; }
  .tabla-apilable tr { padding: 14px 16px; border-bottom: 1px solid var(--azul-85); }
  .tabla-apilable tbody tr:last-child { border-bottom: 0; }
  .tabla-apilable td { padding: 2px 0; border: 0; }
  .tabla-apilable td[data-titulo]::before { content: attr(data-titulo) ": "; color: var(--tinta-suave); font-size: var(--t-s); }
  .tabla-apilable .derecha { text-align: left; }
  .tabla-apilable td.primera { white-space: normal; overflow-wrap: anywhere; }

  .usuario > summary, .usuario-fila { grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px 14px; }
  .usuario-acceso { grid-column: 2 / -1; }
  .usuario-detalle, .acceso { padding: 4px 14px 16px; }
  .entrega .ficha, .cuenta-pantalla .ficha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .entrega .ficha dd, .cuenta-pantalla .ficha dd { margin-bottom: 10px; }
  .usuario-detalle .herr-nombre { min-width: 0; flex: 1 1 100%; }

  .herramientas-lista { padding: 14px 16px; }.buscar { max-width: none; }
  .rejilla-campos { grid-template-columns: minmax(0, 1fr); }
  .panel-sumar { padding: 16px; }
  .roles-lista { padding-left: 18px; }

  /* Entrada: sólo el panel; los avisos de la maqueta quedan abajo */
  .entrada { grid-template-columns: minmax(0, 1fr); height: auto; background: var(--fondo); }
  .entrada-panel { grid-column: 1; grid-row: 1; overflow: visible; padding: 28px 20px 24px; }
  .entrada-panel .logo-movil { display: block; margin-bottom: 8px; }
  .entrada-lado { grid-column: 1; grid-row: 2; overflow: visible; background: transparent; padding: 0 20px 28px; }
  .entrada-lado .logo-lado, .entrada-lado .ribete-lado, .entrada-lado .banda, .promesa { display: none; }
  .notas-lado { position: static; width: auto; max-height: none; }
  .reservado { min-height: 0; }
}

@media (min-width: 961px) {
  .cerrar-menu, .velo { display: none; }
}

@media (max-width: 960px) {
  .campo, select.campo { font-size: 1rem; }
  .seccion-boton { flex: 1 1 auto; min-height: 44px; padding: 6px 12px; }
}

@media (max-height: 760px) and (min-width: 961px) {
  .entrada-panel { padding: clamp(14px, 3.5vh, 32px) clamp(28px, 3.4vw, 56px) 14px; gap: 10px; }
  .entrada-lado .logo-lado { top: 24px; }
  .entrada-panel h1 { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Clientes de Stratio: tres propuestas (A lista, B marcas, C lista y ficha) ---------- */
.logo-mini { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--azul-85); --plato: var(--fondo); }
.logo-mini .logo-empresa { width: 26px; height: 26px; color: var(--c, var(--navy)); }

/* A · Lista */
.lista-clientes { list-style: none; margin: 0; padding: 0; }
.cliente-fila {
  display: grid; grid-template-columns: 38px minmax(170px, 1.2fr) 120px minmax(170px, 1.5fr) 70px 120px 16px;
  align-items: center; gap: 4px 14px; padding: 8px 16px; color: var(--tinta); text-decoration: none;
}
a.cliente-fila { border-bottom: 1px solid var(--azul-85); transition: background-color 160ms var(--ease); }
.lista-clientes > li:last-child a.cliente-fila { border-bottom: 0; }
a.cliente-fila:hover { background: var(--azul-95); }
a.cliente-fila:focus-visible { outline-offset: -3px; }
a.cliente-fila .icono { color: var(--tinta-suave); transition: translate 160ms var(--ease); }
a.cliente-fila:hover .icono { translate: 3px 0; color: var(--navy); }
.cliente-cab { padding-block: 12px 10px; border-bottom: 1.5px solid var(--azul-85); font-family: var(--poppins); font-weight: 500; font-size: var(--t-xs); color: var(--tinta-suave); }
.cliente-nombre { display: grid; min-width: 0; }
.cliente-nombre strong { font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.02em; color: var(--navy); }
.cliente-herr { font-size: var(--t-s); color: var(--tinta-suave); overflow-wrap: anywhere; }
.cliente-num, .num { text-align: right; font-variant-numeric: tabular-nums; }
.cliente-num { font-weight: 600; }
.cliente-ingreso { font-size: var(--t-s); color: var(--tinta-suave); white-space: nowrap; }

/* B · Marcas */
.mosaico-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.marca {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 16px 10px 14px; text-align: center;
  border-radius: 10px; border: 1px solid var(--borde-tarjeta, var(--azul-85)); background: var(--fondo-tarjeta, var(--superficie)); color: var(--tinta); text-decoration: none;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.marca::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1.5px; height: 4px; border-radius: 4px 4px 0 0; background: var(--naranja); scale: 0 1; transition: scale 200ms var(--ease); }
.marca:hover { border-color: var(--navy); }
.marca:hover::after, .marca:focus-visible::after { scale: 1 1; }
.marca:focus-visible { outline-offset: 3px; border-radius: 12px; }
.marca-logo { display: grid; place-items: center; width: 64px; height: 64px; --plato: var(--fondo-tarjeta, var(--superficie)); }
.marca-logo .logo-empresa { width: 52px; height: 52px; color: var(--c, var(--navy)); }
.marca-nombre { display: grid; align-items: center; min-height: 2.4em; font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); line-height: 1.2; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; }
.marca .pill { max-width: 100%; white-space: normal; text-align: center; }
.marca-datos { display: grid; font-size: var(--t-xs); line-height: 1.35; color: var(--tinta-suave); }

/* C · Lista y ficha */
.maestro { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.maestro-lista { list-style: none; margin: 0; padding: 6px; }
.maestro-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; border-radius: 10px;
  color: var(--tinta); text-decoration: none; transition: background-color 160ms var(--ease);
}
.maestro-item:hover { background: var(--azul-95); }
.maestro-item .barra { color: transparent; font-size: 0.9rem; }
.maestro-item[aria-current="true"] { background: var(--azul-85); }
.maestro-item[aria-current="true"] .barra { color: var(--naranja); }
.maestro-item .logo-mini { width: 34px; height: 34px; }
.maestro-item .logo-mini .logo-empresa { width: 22px; height: 22px; }
.maestro-nombre { font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.01em; color: var(--navy); min-width: 0; flex: 1; }
.maestro-item .estado { margin-left: auto; font-size: var(--t-xs); }
.ficha-cliente { padding: 20px; display: grid; gap: 16px; position: sticky; top: 16px; }
.ficha-cab { display: flex; align-items: center; gap: 18px; }
.ficha-cab h2 { font-size: var(--t-xl); }
.ficha-cab .pill { margin-top: 8px; }
.ficha-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ficha-datos > div { padding: 12px 14px; border-radius: 10px; background: var(--azul-95); }
.ficha-datos dt { font-size: var(--t-xs); color: var(--tinta-suave); }
.ficha-datos dd { margin: 2px 0 0; font-family: var(--poppins); font-weight: 500; font-size: var(--t-m); letter-spacing: -0.02em; color: var(--navy); }
.ficha-cliente .subtitulo-lista { padding: 0; }
.ficha-herr { list-style: none; margin: -6px 0 0; padding: 0; display: grid; }
.ficha-herr li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--azul-85); }
.ficha-herr li:last-child { border-bottom: 0; }
.ficha-herr .icono { color: var(--navy); }
.ficha-herr-nombre { font-weight: 600; flex: 1; min-width: 0; }

@media (min-width: 961px) and (max-width: 1240px) {
  .cliente-fila { grid-template-columns: 38px minmax(170px, 1.2fr) 120px minmax(170px, 1.5fr) 70px 16px; }
  .cliente-fila > :nth-child(6) { display: none; }
}
@media (max-width: 960px) {
  .mosaico-marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .marca { padding: 16px 8px 14px; gap: 6px; }
  .marca-logo { width: 68px; height: 68px; }
  .marca-logo .logo-empresa { width: 56px; height: 56px; }
  .marca-nombre { font-size: var(--t-s); }
  .marca-datos { font-size: var(--t-xs); }
  .cliente-cab { display: none; }
  .cliente-fila { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 12px 14px; gap: 2px 14px; }
  .cliente-fila .logo-mini { grid-row: span 3; }
  .cliente-nombre { grid-column: 2; }
  .cliente-estado { grid-column: 3; grid-row: 1; justify-self: end; }
  .cliente-nombre .secundario { display: none; }
  .cliente-herr { grid-column: 2 / -1; }
  .cliente-num { grid-column: 2; grid-row: 3; text-align: left; font-weight: 400; color: var(--tinta-suave); font-size: var(--t-s); }
  .cliente-ingreso { grid-column: 3; grid-row: 3; justify-self: end; }
  .cliente-num::before { content: ""; }
  .cliente-num::after { content: " personas"; }
  .cliente-fila > .icono { display: none; }
  .maestro { grid-template-columns: minmax(0, 1fr); }
  .ficha-cliente { display: none; }
  .ficha-datos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ronda 4 (02-10): el estado se ve en el color ---------- */
/* Activo = azul grisáceo de la marca; En prueba = naranja; De baja = gris. Colores suaves, para que no parezcan deshabilitados. */
:root {
  --activo-fondo: #e9f0f8; --activo-borde: #c6d8ec; --activo-pill: #cadcf0;
  --prueba-fondo: #fff0e4; --prueba-borde: #ffd1b0; --prueba-pill: #ffd6b8;
  --baja-fondo: #efefed; --baja-borde: #d9d9d5;
}
.pill-activo { background: var(--activo-pill); }
.pill-prueba, .pill-alerta { background: var(--prueba-pill); }
.pill-baja { background: transparent; color: var(--azul-40); box-shadow: inset 0 0 0 1px var(--azul-55); }

/* Stratio · marcas, lista y ficha */
.marca[data-estado="activo"] { --fondo-tarjeta: var(--activo-fondo); --borde-tarjeta: var(--activo-borde); }
.marca[data-estado="prueba"] { --fondo-tarjeta: var(--prueba-fondo); --borde-tarjeta: var(--prueba-borde); }
.marca[data-estado="baja"] { --fondo-tarjeta: var(--baja-fondo); --borde-tarjeta: var(--baja-borde); }
.marca[data-estado="baja"] .marca-nombre { color: var(--azul-40); }
[data-estado="activo"] > .logo-mini, [data-estado="activo"] .logo-mini { background: var(--activo-fondo); box-shadow: inset 0 0 0 1px var(--activo-borde); --plato: var(--activo-fondo); }
[data-estado="prueba"] > .logo-mini, [data-estado="prueba"] .logo-mini { background: var(--prueba-fondo); box-shadow: inset 0 0 0 1px var(--prueba-borde); --plato: var(--prueba-fondo); }
[data-estado="baja"] > .logo-mini, [data-estado="baja"] .logo-mini { background: var(--baja-fondo); box-shadow: inset 0 0 0 1px var(--baja-borde); --plato: var(--baja-fondo); }
.marca[data-estado="baja"] .logo-empresa, [data-estado="baja"] .logo-mini .logo-empresa { color: #9a9da3; }

/* Las herramientas de una empresa: tarjetas blancas con el ícono naranja, no bloques azules. En prueba = naranja suave, sólo lectura = gris */
.tile-herr { background: var(--superficie); color: var(--azul-40); box-shadow: inset 0 0 0 1px var(--azul-85); }
.tile-herr[data-estado="prueba"] { background: var(--prueba-fondo); box-shadow: inset 0 0 0 1px var(--prueba-borde); }
.tile-herr[data-estado="solo_lectura"] { background: var(--baja-fondo); box-shadow: inset 0 0 0 1px var(--baja-borde); }
a.tile-herr:hover, button.tile-herr:hover { background: var(--fondo-hover, var(--superficie)); box-shadow: inset 0 0 0 1px var(--navy), inset 0 -4px 0 var(--naranja); }
a.tile-herr[data-estado="prueba"]:hover { --fondo-hover: var(--prueba-fondo); }
a.tile-herr[data-estado="solo_lectura"]:hover { --fondo-hover: var(--baja-fondo); }
.tile-herr .tile-nombre { color: var(--navy); }
.tile-herr .tile-datos strong, .tile-herr .tile-stats strong { color: var(--azul-10); }
.tile-herr .tile-icono { background: var(--naranja); color: var(--azul-10); }
.tile-herr[data-estado="solo_lectura"] .tile-icono { background: var(--azul-70); }
.tile-herr .tile-pie { border-top-color: rgb(31 34 39 / 0.12); color: var(--navy); }
.tile-herr .pill-prueba { background: #ffc9a0; }

/* Configuración: todo más chico */
.config-fila { padding: 11px 14px; gap: 2px 14px; }
.config-titulo { font-size: var(--t-s); font-weight: 500; }
.config-fila p { font-size: var(--t-s); }
.config-fila .interruptor { margin-top: 0; }
.interruptor { width: 36px; height: 20px; border-radius: 10px; }
.interruptor::after { top: 3px; left: 3px; width: 14px; height: 14px; }
.interruptor[aria-checked="true"]::after { translate: 16px 0; }
.acordeon > summary { min-height: 42px; padding: 6px 14px; gap: 10px; font-size: var(--t-s); }
.acordeon-icono { width: 26px; height: 26px; border-radius: 7px; }
.acordeon-icono .icono { width: 16px; height: 16px; }
.roles-lista { padding: 2px 14px 12px 50px; gap: 6px; }
.roles-lista .detalle { font-size: var(--t-xs); }

/* ---------- Ronda 5 (02-10): la entrada, en dos organizaciones ---------- */
.acciones-entrada { display: grid; gap: 8px; justify-items: center; }
.acciones-entrada .boton-principal { width: 100%; min-height: 42px; font-size: var(--t-m); }
.notas-lado > summary { cursor: pointer; font-size: var(--t-xs); color: var(--pale-sky); list-style: none; padding: 4px 8px; border-radius: 6px; width: max-content; margin-left: auto; box-shadow: inset 0 0 0 1px rgb(209 224 240 / 0.45); }
.notas-lado > summary::-webkit-details-marker { display: none; }
.notas-lado[open] > summary { margin-bottom: 8px; background: rgb(255 255 255 / 0.1); }
.notas-lado > summary:focus-visible { outline-color: var(--naranja); }

@media (min-width: 961px) {
  .entrada-panel { justify-content: safe center; padding-top: 24px; }
  .notas-lado { position: absolute; left: auto; right: 24px; top: 24px; width: min(400px, 62%); max-height: calc(100% - 48px); overflow-y: auto; display: block; z-index: 4; }}
@media (max-width: 960px) {
  .notas-lado > summary { color: var(--navy); box-shadow: inset 0 0 0 1px var(--azul-70); margin-left: 0; }
  .notas-lado[open] > summary { background: var(--azul-95); }
}

/* ---------- Ronda 6 (T2c, 02-10): la entrada como operaciones-stratio ----------
   El navy ocupa la izquierda y termina recortado por el ribete de la O, estirado a todo el alto;
   a la derecha, el formulario sobre blanco, con campos y botón grandes. Una raya naranja abajo.
   El recorte del navy sigue al ribete (left 27,6 %, ancho 38,3 %) por ADENTRO de sus franjas, a media franja del borde:
   si cae justo sobre el borde, entre los dos suavizados se cuela el blanco de atrás y se ve una línea fina (T15).
   Los cuatro puntos, en medidas del SVG: (331, 0), (207, 285), (156, 190) y (32, 474). Hay una prueba que lo mira. */
.entrada { grid-template-columns: 56% minmax(0, 44%); background: #fff; position: relative; isolation: isolate; }
.entrada-lado { grid-column: 1 / -1; grid-row: 1; background: transparent; overflow: hidden; z-index: 0; }
.entrada-lado::before {
  content: ""; position: absolute; inset: 0; background: var(--navy);
  clip-path: polygon(0 0, 62.75% 0, 49.57% 60.11%, 44.16% 40.07%, 31% 100%, 0 100%);
}
.entrada-lado .ribete-lado { top: 0; bottom: auto; left: 27.6%; right: auto; width: 38.3%; height: 100%; pointer-events: none; user-select: none; }
.entrada-lado .logo-lado { top: 36px; left: clamp(32px, 4.2vw, 80px); height: 70px; width: auto; }
.entrada-lado .banda { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px; clip-path: none; z-index: 1; }

.promesa {
  left: clamp(32px, 4.2vw, 80px); top: 50%; bottom: auto; translate: 0 -46%;
  width: min(400px, 30vw); gap: 0; background: transparent;
}
.promesa h2 { font-size: clamp(1.625rem, 2.35vw, 2.5rem); line-height: 1.3; letter-spacing: -0.03em; font-weight: 700; }
.promesa h2 span { color: #bad4ed; }
.promesa ul { margin-top: 26px; gap: 12px; font-size: var(--t-m); color: #e2ebf5; }

.entrada-panel {
  grid-column: 2; grid-row: 1; background: transparent; z-index: 2;
  padding: 32px clamp(28px, 4vw, 76px) 24px clamp(64px, 8vw, 220px);
  justify-content: safe center; gap: 16px;
}
.entrada-panel > * { width: 100%; max-width: 405px; }
.entrada-panel h1 { font-size: 1.6875rem; letter-spacing: -0.035em; color: var(--navy); }
.entrada-panel .encabezado-texto { display: grid; gap: 6px; }
.entrada-panel .bajada { font-size: 1rem; }
.entrada-panel .formulario { gap: 14px; }
.entrada-panel .etiqueta-campo { font-family: var(--source); font-weight: 600; font-size: var(--t-s); }
.entrada-panel .campo {
  min-height: 48px; padding: 11px 14px; font-size: 1rem; border-radius: 9px;
  background: #fff; box-shadow: inset 0 0 0 1px #dce3eb;
}
.entrada-panel .campo::placeholder { color: #66758a; } /* 4,7:1 sobre blanco (auditoría de T4: con #75849a daba 3,8:1) */
.entrada-panel .campo:hover { box-shadow: inset 0 0 0 1px var(--blue-gray); }
.entrada-panel .campo:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--blue-gray), 0 0 0 3px rgb(102 153 204 / 0.28); }
.entrada-panel .boton-google { min-height: 48px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #dce3eb; color: var(--azul-10); }
.entrada-panel .boton-google:hover { background: #f6f8fa; box-shadow: inset 0 0 0 1px var(--blue-gray); }
.entrada-panel .guia { background: transparent; }
.entrada-panel .guia summary { padding-left: 0; padding-right: 0; color: var(--tinta-suave); font-size: var(--t-s); }
.entrada-panel .guia-cuerpo { padding: 4px 0 8px; }
.entrada-panel .divisor { font-size: var(--t-s); }
.entrada-panel .divisor::before, .entrada-panel .divisor::after { background: #e4e8ed; }
.acciones-entrada { gap: 6px; justify-items: end; }
.acciones-entrada .boton-principal {
  min-height: 52px; border-radius: 10px; color: #fff; font-family: var(--poppins); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em;
}
.acciones-entrada .boton-texto { color: var(--tinta-suave); text-underline-offset: 4px; }
.entrada-panel .mensaje { background: #fff7f2; }
.entrada-letra-chica { margin-top: 4px; }

/* Las notas de la maqueta, debajo del logo, sobre el navy */
@media (min-width: 961px) {
  .notas-lado { left: clamp(32px, 4.2vw, 80px); right: auto; top: 124px; width: min(400px, 30vw); max-height: calc(100% - 160px); z-index: 4; }
  .notas-lado > summary { margin-left: 0; }
}
@media (max-height: 760px) and (min-width: 961px) {
  .entrada-panel { padding-top: 16px; padding-bottom: 14px; gap: 10px; }
  .entrada-panel .bloque { gap: 2px; }
  .entrada-panel .reservado { min-height: 52px; }
  .entrada-letra-chica { padding-top: 0; margin-top: 0; }
  .entrada-panel .formulario { gap: 10px; }
  .entrada-panel .campo, .entrada-panel .boton-google { min-height: 44px; }
  .acciones-entrada .boton-principal { min-height: 48px; }
  .entrada-lado .logo-lado { top: 24px; }
  .notas-lado { top: 108px; }
}
/* El formulario arranca siempre a la derecha del ribete (T15). Arriba el ribete llega al 65,9 % del ancho; cuando la
   pantalla es baja el formulario la llena y su título queda a esa altura, así que ahí el margen izquierdo se mide contra
   ese borde: la columna empieza en el 56 % (o en el 50 % entre 961 y 1180 px) y el texto, pasado el 66 %. */
@media (min-width: 1181px) and (max-height: 900px) {
  .entrada-panel { padding-left: calc(10vw + 10px); }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .entrada { grid-template-columns: 50% minmax(0, 50%); }
  .entrada-panel { padding-left: calc(16vw + 10px); }
}

/* Celular y tablet: una franja navy con el logo arriba (como la referencia) y el formulario abajo */
@media (max-width: 960px) {
  .entrada { background: #fff; grid-template-columns: minmax(0, 1fr); }
  .entrada-lado { grid-column: 1; grid-row: 1; overflow: visible; background: var(--navy); padding: 22px 20px; display: grid; gap: 12px; }
  .entrada-lado::before { content: none; }
  .entrada-lado .logo-lado { display: block; position: static; height: 70px; }
  .entrada-lado .ribete-lado, .promesa { display: none; }
  .entrada-lado .banda { display: block; position: absolute; }
  .entrada-panel { grid-column: 1; grid-row: 2; padding: 28px 20px 28px; }
  .entrada-panel > * { max-width: none; }
  .entrada-panel .logo-movil { display: none; }
  .notas-lado > summary { color: var(--pale-sky); box-shadow: inset 0 0 0 1px rgb(209 224 240 / 0.45); }
  .notas-lado[open] > summary { background: rgb(255 255 255 / 0.1); }
}

/* ---------- T2c: Configuración de la empresa y el popup «Cambiar logo» ---------- */
.logo-chico .logo-imagen { width: 78%; height: 78%; object-fit: contain; }
.logo-iniciales { font-family: var(--poppins); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--c, var(--navy)); }
.config-logo { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.config-logo .logo-chico { width: 56px; height: 56px; border-radius: 10px; }
.config-logo .logo-chico .logo-empresa { width: 36px; height: 36px; }
.config-dato { grid-template-columns: 120px minmax(0, 1fr); }
.config-dato .config-titulo { grid-row: span 2; }
.config-fila .config-valor { color: var(--tinta); font-weight: 600; }
.config-fila .config-hecho { color: var(--navy); font-weight: 600; font-size: var(--t-s); }
.config-hecho:empty { display: none; }

.dialogo { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; background: var(--superficie); color: var(--tinta);
  box-shadow: 0 24px 48px -12px rgb(31 34 39 / 0.28), 0 2px 6px rgb(31 34 39 / 0.08); }
.dialogo[open] { display: flex; flex-direction: column; animation: dialogo-entra 220ms var(--ease); }
.dialogo::backdrop { background: rgb(31 34 39 / 0.42); }
@keyframes dialogo-entra { from { opacity: 0; translate: 0 8px; } }
.dialogo-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px 22px; }
.dialogo-cab h2 { font-size: var(--t-l); }
.dialogo-cerrar { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-suave); cursor: pointer; }
.dialogo-cerrar:hover { background: var(--azul-95); color: var(--tinta); }
.dialogo-cuerpo { display: grid; gap: 16px; padding: 8px 22px 18px; overflow-y: auto; }
.dialogo-pie { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--azul-85); }
.dialogo-pie .empuje { flex: 1; }
.dialogo-vista { display: flex; align-items: center; gap: 14px; }
.dialogo-vista .logo-chico { width: 64px; height: 64px; border-radius: 12px; }
.dialogo-vista .logo-chico .logo-empresa { width: 42px; height: 42px; }
.dialogo-vista-nombre { font-family: var(--poppins); font-weight: 500; letter-spacing: -0.015em; }
.zona-subir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; border-radius: 10px;
  background: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--azul-70); transition: box-shadow 160ms var(--ease), background-color 160ms var(--ease); }
.zona-subir > div { flex: 1 1 240px; display: grid; gap: 2px; }
.zona-subir.encima { background: var(--azul-95); box-shadow: inset 0 0 0 2px var(--navy); }
.zona-subir-titulo { font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.01em; }
.zona-subir label { cursor: pointer; }
.zona-subir label:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }
.dialogo-aviso { font-size: var(--t-s); color: var(--tinta); margin-top: -8px; }
.dialogo-aviso:empty { display: none; }
.dialogo-galeria { display: grid; gap: 10px; }
.dialogo-galeria h3 { font-size: var(--t-s); font-family: var(--poppins); font-weight: 500; color: var(--tinta-suave); letter-spacing: -0.01em; }
.galeria-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.galeria-logo { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--azul-85); cursor: pointer;
  transition: box-shadow 140ms var(--ease), background-color 140ms var(--ease); --plato: var(--fondo); }
.galeria-logo .logo-empresa { width: 60%; height: 60%; color: var(--c, var(--navy)); }
.galeria-logo:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--azul-55); --plato: #fff; }
.galeria-logo[aria-checked="true"] { background: #fff; box-shadow: inset 0 0 0 2.5px var(--navy); --plato: #fff; }
@media (max-width: 600px) {
  .config-logo { grid-template-columns: auto minmax(0, 1fr); }
  .config-logo .boton-linea { grid-column: 1 / -1; justify-self: start; }
  .config-dato { grid-template-columns: minmax(0, 1fr); }
  .config-dato .config-titulo { grid-row: auto; }
  .dialogo { width: 100vw; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .dialogo-pie { flex-wrap: wrap; }
}

/* ---------- T2c: el naranja en Usuarios (y en todo el tablero) ----------
   Valentino: el naranja pegado al navy «se ve medio raro». El botón principal lleva letra blanca y bold, como la
   entrada y operaciones-stratio; lo seleccionado (secciones de la empresa) pasa a un navy clarito, así el naranja
   queda como el único bloque fuerte de la pantalla. */
.boton-principal { color: #fff; font-weight: 700; }
.boton-principal .icono { color: #fff; }
.seccion-boton[aria-current="page"] { background: #e6edf5; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.seccion-boton[aria-current="page"]:hover { background: #dbe5f0; }

/* T2c: las secciones de la empresa, siempre en una sola fila (Valentino: «que estén a la misma altura»).
   En el celular, si no entran, la fila se corre de costado. Y en la fila fija de un administrador, lo que
   no entra en la primera línea va debajo del nombre, no debajo del avatar. */
@media (max-width: 960px) {
  .secciones { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 2px; margin: -2px -2px 20px; scrollbar-width: none; }
  .secciones::-webkit-scrollbar { display: none; }
  .seccion-boton { flex: 1 0 auto; min-height: 40px; padding: 6px 12px; white-space: nowrap; }
  .usuario-fila > :nth-child(n+3) { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 600px) {
  .barra-filtros > .buscar, .barra-filtros > select, .barra-filtros > label { flex: 1 1 100%; max-width: none; }
}

/* ---------- T2c: formularios sobrios, como la entrada ----------
   Campos blancos con un filete gris suave, el foco en un anillo azul grisáceo, las etiquetas en Source Sans
   semibold y todos los campos de una fila a la misma altura (antes «Nombre» se estiraba al alto de la ayuda). */
:root { --borde-campo: #cfd6df; }
.rejilla-campos { align-items: start; }
.campo-grupo { align-content: start; }
.contenido .campo { min-height: 40px; padding: 8px 12px; border-radius: 8px; background-color: #fff; box-shadow: inset 0 0 0 1px var(--borde-campo); }
.contenido .campo:hover { box-shadow: inset 0 0 0 1px var(--blue-gray); }
.contenido .campo:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--blue-gray), 0 0 0 3px rgb(102 153 204 / 0.28); }
.contenido .campo[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--azul-10); }
.contenido select.campo { padding-right: 36px; }
.contenido .buscar .campo { padding-left: 36px; }
.contenido .etiqueta-campo, .contenido .grupo .campo-grupo > label { font-family: var(--source); font-weight: 600; font-size: var(--t-s); letter-spacing: 0; color: var(--tinta); }
.contenido .grupo legend { font-family: var(--source); font-weight: 600; color: var(--tinta); }
.panel-sumar { gap: 18px; padding: 22px 24px; }
.panel-sumar h2 { color: var(--navy); font-size: var(--t-l); }
.panel-sumar .boton-principal, .cuenta-pantalla .boton-principal { min-height: 40px; padding: 8px 18px; }
.contenido .ayuda-campo { font-size: var(--t-xs); line-height: 1.45; }

/* T2c: «Qué hace cada rol», una tabla de una línea por rol */
.hoja-tabla { overflow-x: auto; }
.tabla-roles th[scope="col"] { text-align: left; }
.tabla-roles td, .tabla-roles .rol-herr { padding: 8px 16px; font-size: var(--t-s); vertical-align: top; }
.tabla-roles .rol-herr { width: 34%; text-align: left; font-family: var(--poppins); font-weight: 500; letter-spacing: -0.01em; color: var(--navy); border-bottom: 1px solid var(--azul-85); }
.tabla-roles .rol-herr .acordeon-icono { display: inline-grid; vertical-align: middle; margin-right: 10px; }
.tabla-roles tbody td { border-bottom: 0; }
.tabla-roles tr.primera-del-grupo > * { border-top: 1px solid var(--azul-85); }
.tabla-roles tbody tr:first-child > * { border-top: 0; }
.tabla-roles .rol { font-weight: 600; }
.tabla-roles .rol-que { color: var(--tinta-suave); }
@media (max-width: 600px) {
  .tabla-roles thead { display: none; }
  .tabla-roles, .tabla-roles tbody { display: block; }
  .tabla-roles tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 14px; }
  .tabla-roles tr.primera-del-grupo { border-top: 1px solid var(--azul-85); padding-top: 10px; }
  .tabla-roles tbody tr:first-child { border-top: 0; }
  .tabla-roles tr > * { border: 0 !important; padding: 2px 0; }
  .tabla-roles .rol-herr { width: auto; padding-bottom: 6px; }
  .tabla-roles tr:not(.primera-del-grupo) + tr.primera-del-grupo, .tabla-roles tr:last-child { padding-bottom: 10px; }
}
/* T2c: con el menú de 260 px, las tablas anchas en compus chicas aflojan el relleno */
@media (min-width: 961px) and (max-width: 1180px) {
  .tabla th, .tabla td { padding-left: 10px; padding-right: 10px; }
}
/* Con letra blanca, el hover del naranja oscurece en vez de aclarar (más contraste, no menos) */
.boton-principal:hover { background: #e85600; }

/* ---------- T3: las pantallas reales ---------- */
/* El logo de un cliente es su imagen (CONTRATO §2, `logo`) o, si no cargó, las iniciales en su color */
.logo-imagen { width: 78%; height: 78%; object-fit: contain; }
.marca-logo .logo-imagen { width: 52px; height: 52px; }
.marca-logo .logo-iniciales { font-size: 1.5rem; }
.marca[data-estado="baja"] .logo-imagen { filter: grayscale(1); opacity: 0.7; }
.marca[data-estado="baja"] .logo-iniciales { color: #9a9da3; }
.empresa-titulo h1 > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* El panel: las mismas tarjetas blancas que la lista de clientes, un poco más anchas para «Te sumó…» */
.contenido > .mosaico-marcas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.marca-datos span { overflow-wrap: anywhere; }

/* Una herramienta apagada (sólo la ve Stratio) se ve como una en sólo lectura */
.tile-herr[data-estado="apagada"] { background: var(--baja-fondo); box-shadow: inset 0 0 0 1px var(--baja-borde); }
a.tile-herr[data-estado="apagada"]:hover { --fondo-hover: var(--baja-fondo); }
.tile-herr[data-estado="apagada"] .tile-icono { background: var(--azul-70); }

.boton-google img { width: 20px; height: 20px; flex: none; }
.cargando { color: var(--tinta-suave); }
.cuenta button.boton-texto { justify-self: start; }
.pie-tabla .boton-linea[hidden] { display: none; }

/* La entrada: cada caso (entrar, elegir contraseña, olvidé) ocupa el mismo panel */
.entrada-vista { display: contents; }
.entrada-vista[hidden] { display: none; }
.aviso-punto { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--naranja); grid-row: span 2; }

/* ---------- T4: personas y permisos ---------- */
/* Cambiar los permisos de una persona, dentro de su fila abierta */
.form-permisos { padding: 4px 18px 14px 78px; }
.form-permisos[hidden] { display: none; }
.form-permisos .rejilla-campos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
/* «Administrador de la empresa» al sumar a alguien (sólo Stratio) */
.casilla { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 10px; background: var(--azul-95); }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.casilla label { display: grid; gap: 2px; cursor: pointer; }
.casilla-titulo { font-family: var(--source); font-weight: 600; font-size: var(--t-s); color: var(--tinta); }
.campo-corto { max-width: 280px; }
.panel-sumar fieldset:disabled { opacity: 0.5; }
/* Buscar personas */
.buscar-persona { max-width: 720px; }
.buscar-persona-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.buscar-persona-fila .campo { flex: 1 1 260px; width: auto; }
.resultado-personas { display: grid; gap: 14px; margin-top: 16px; }
.resultado-personas .mensaje { margin: 0; }
.contenido > .mensaje { margin-bottom: 16px; }
@media (max-width: 600px) {
  .form-permisos { padding: 4px 14px 16px; }
  .buscar-persona-fila .boton-principal { flex: 1 1 100%; }
}
/* La columna del cliente, en el registro de todos, no parte «Grupo / Ejemplo» en dos renglones */
.tabla td[data-titulo="Cliente"] { min-width: 9.5rem; }

/* T4 (auditoría): el dedo no es el mouse. En el celular, los botones chicos, los filtros y los enlaces de texto llegan a 40 px de alto,
   y el interruptor tiene un área de toque de 44 px aunque se vea más chico. */
.interruptor { flex: none; }
.interruptor::before { content: ""; position: absolute; inset: -12px -4px; }
@media (max-width: 960px) {
  .boton-chico, .boton-texto, .filtros button, .segmentado button { min-height: 40px; }
  /* En una fila de usuarios, la flecha se queda arriba a la derecha y lo demás baja debajo del nombre */
  .usuario > summary > .icono { grid-column: 3; grid-row: 1; }
}

/* ---------- T5b: consumo y catálogo ---------- */
/* El ícono de una herramienta en su fila no gira ni se pone gris como la flecha */
.usuario > summary .avatar .icono, .usuario[open] > summary .avatar .icono { rotate: none; color: inherit; width: 18px; height: 18px; }
/* Un día de pedidos cerca del tope del plan */
.columna-cerca span { background: var(--naranja); }
/* Los roles de una herramienta, uno al lado del otro */
.acceso-linea .usuario-acceso { display: inline-flex; vertical-align: middle; margin: 0 4px 0 6px; }
.acceso-linea .chip { background: #fff; box-shadow: inset 0 0 0 1px var(--azul-85); }
.en-tabla { margin-top: 12px; overflow-x: auto; }
.en-tabla[open] summary { margin-bottom: 4px; }
@media (max-width: 600px) { .en-tabla .tabla th, .en-tabla .tabla td { padding-left: 8px; padding-right: 8px; } }

/* ---------- T5c: contactos de la página ---------- */
/* La barra: buscar a la izquierda, tipo y «con aviso fallido» al medio y las fechas a la derecha; en el celular, una abajo de la otra */
.contactos-barra { gap: 12px 18px; align-items: flex-end; }
.buscar-contactos { display: flex; flex: 1 1 320px; gap: 8px; align-items: center; max-width: 480px; }
.buscar-contactos .buscar { flex: 1 1 auto; max-width: none; }
.contactos-filtros { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.contactos-fechas { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.campo-fecha { display: grid; gap: 4px; }
.campo-fecha .campo { width: auto; min-width: 9.5rem; color-scheme: light; }
.acciones .al-dia { display: inline; }

/* Una fila por contacto: quién, qué escribió, cuándo y cómo salió el aviso. Se abre para ver todo */
.usuario.contacto > summary { grid-template-columns: auto minmax(200px, 1fr) minmax(0, 1.6fr) 230px auto; align-items: start; padding: 12px 16px; }
.usuario.contacto > summary > .avatar { margin-top: 1px; }
.usuario.contacto > summary > .icono { margin-top: 8px; }
.contacto-mensaje { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.contacto-estado { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: flex-end; text-align: right; }
.contacto-cuando { flex: 1 1 100%; font-size: var(--t-s); color: var(--tinta-suave); }
.contacto-estado .estado { white-space: normal; }
.sin-dato { color: var(--tinta-suave); font-weight: 400; }
strong.sin-dato { font-weight: 500; }
.contacto-ficha { margin: 2px 16px 14px 64px; }
.contacto-ficha dd.contacto-texto { font-weight: 400; white-space: pre-wrap; max-width: 70ch; }
.pie-tabla .boton-linea { margin-left: 8px; }
@media (max-width: 960px) {
  .usuario.contacto > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .usuario.contacto > summary > .contacto-mensaje, .usuario.contacto > summary > .contacto-estado { grid-column: 2 / -1; }
  .contacto-estado { justify-content: flex-start; text-align: left; }
  .contacto-ficha { margin: 2px 14px 14px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contacto-ficha dd { margin-bottom: 10px; }
  .buscar-contactos { flex-basis: 100%; max-width: none; }
}
.acciones .al-dia:empty { display: none; }
@media (max-width: 600px) {
  .contactos-fechas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .contactos-fechas .campo-fecha .campo { width: 100%; min-width: 0; }
  .contactos-fechas .boton-texto { grid-column: 1 / -1; justify-self: start; }
  .contactos-barra { gap: 10px 12px; }
}

/* ---------- T4b: permisos por casilla (n.º 53) ---------- */
/* Una herramienta de una empresa: arriba su rol (el atajo) y abajo cada casilla que se puede tildar o destildar */
.permisos-herramientas { display: grid; gap: 12px; }
.permisos-herr { display: grid; gap: 8px; padding: 14px 16px; border-radius: 10px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--azul-85); }
.permisos-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.permisos-nombre { font-family: var(--poppins); font-weight: 500; font-size: var(--t-m); letter-spacing: -0.01em; color: var(--navy); }
.permisos-cab .campo { width: auto; min-width: 200px; flex: 0 1 260px; }
.permisos-medida { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: var(--t-s); color: var(--tinta-suave); }
.permisos-medida .chip { background: #fff; box-shadow: inset 0 0 0 1px var(--azul-70); color: var(--tinta); font-weight: 600; }
.permisos-casillas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 2px 12px; }
.casilla-herr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.casilla-herr:hover { background: var(--azul-95); }
.casilla-herr input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.casilla-texto { display: grid; gap: 1px; min-width: 0; }
.casilla-texto strong { font-weight: 600; font-size: var(--t-s); color: var(--tinta); }
.casilla-texto .ayuda-campo { font-size: var(--t-xs); }
.casilla-herr:has(input:disabled) { cursor: default; }
.casilla-herr:has(input:disabled):hover { background: none; }
.casilla-herr input:disabled { cursor: default; }
.casilla-herr:has(input:disabled:not(:checked)) .casilla-texto strong { color: var(--tinta-suave); font-weight: 400; }

/* Los roles de Stratio: sus casillas en dos grupos y la gente que los tiene, dentro de la fila del rol */
.rol-cuerpo { gap: 16px; }
.form-rol { display: grid; gap: 16px; }
.permisos-stratio { display: grid; gap: 18px; }
.permisos-grupo { display: grid; gap: 4px; }
.permisos-grupo .ayuda-campo { margin: 0 0 4px; }
.permisos-titulo { margin: 0; font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); letter-spacing: -0.005em; color: var(--tinta-suave); }
.rol-cuerpo > .permisos-titulo { padding-top: 12px; border-top: 1.5px solid var(--azul-85); }
.panel-sumar .permisos-stratio { margin-top: 2px; }
.miembros { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.miembro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--azul-95); }
.miembro-ingreso { font-size: var(--t-s); text-align: right; }
.miembro-acciones, .miembro-nota, .miembro > .error-campo { grid-column: 1 / -1; margin: 0; }
.miembro-acciones { padding-left: 48px; }
.miembro-acciones .campo { width: auto; min-width: 150px; }
@media (max-width: 600px) {
  .permisos-herr { padding: 12px; }
  .permisos-cab .campo { flex: 1 1 100%; }
  .miembro { grid-template-columns: auto minmax(0, 1fr); }
  .miembro-ingreso { grid-column: 2; text-align: left; }
  .miembro-acciones { padding-left: 0; }
  .miembro-acciones .campo { flex: 1 1 100%; }
}

/* ---------- T8: topes de un cliente y casillas y roles propios (n.º 65) ---------- */
/* Debajo de las herramientas de una empresa: una fila por herramienta, como en el catálogo */
.estado-topes { margin-top: 32px; display: grid; gap: 12px; }
.estado-topes > .seccion-titulo { margin-bottom: 0; }
.estado-topes > .bajada { margin: 0; }
.bloque-topes { display: grid; gap: 10px; padding-top: 14px; border-top: 1.5px solid var(--azul-85); }
.bloque-topes > .permisos-titulo { margin: 0; }
.bloque-topes > .ayuda-campo { margin: 0; }
.etiqueta-suelta { margin: 4px 0 0; }
.casilla-suelta { padding: 4px 0; }
/* Filas «nombre → número» */
.topes-otros { display: grid; gap: 10px; }
.filas-topes { display: grid; gap: 8px; }
.fila-tope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 140px) auto; gap: 8px 10px; align-items: end; }
.celda { display: grid; gap: 3px; min-width: 0; }
.celda-etiqueta { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-suave); }
.fila-tope .campo { width: 100%; min-width: 0; }
/* Casillas y roles propios: un desplegable dentro del formulario de alta */
.plegable { border-radius: 10px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--azul-85); }
.plegable > summary { display: flex; align-items: center; min-height: 40px; padding: 8px 16px; font-family: var(--poppins); font-weight: 500; font-size: var(--t-s); color: var(--navy); cursor: pointer; border-radius: 10px; }
.plegable > summary:hover { background: var(--azul-95); }
.plegable > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.plegable-cuerpo { display: grid; gap: 12px; padding: 4px 16px 16px; }
.plegable-cuerpo > .ayuda-campo, .plegable-cuerpo > .permisos-titulo { margin: 0; }
.plegable-cuerpo > .permisos-titulo { padding-top: 10px; border-top: 1.5px solid var(--azul-85); }
.filas-edicion { display: grid; gap: 10px; }
.fila-edicion { display: grid; gap: 8px; }
.fila-casilla { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; gap: 8px 10px; }
.fila-casilla .campo, .fila-rol .campo, .fila-admin .campo { width: 100%; min-width: 0; }
.fila-casilla > .error-campo, .fila-rol > .error-campo { grid-column: 1 / -1; margin: 0; }
.fila-admin { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: end; gap: 8px 14px; }
.fila-admin > .secundario { padding-bottom: 10px; }
.fila-rol { padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--azul-85); }
.fila-rol-datos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
@media (max-width: 600px) {
  .fila-tope { grid-template-columns: minmax(0, 1fr) minmax(0, 110px); }
  .fila-tope .boton-texto { grid-column: 1 / -1; justify-self: start; }
  .fila-casilla, .fila-rol-datos, .fila-admin { grid-template-columns: minmax(0, 1fr); }
  .fila-casilla .boton-texto, .fila-rol-datos .boton-texto { justify-self: start; }
}

/* ---------- T9: sumar una herramienta a una empresa que no la tiene ---------- */
/* Un botón de línea, y al abrirlo un panel como el de «Nuevo cliente» con el mismo formulario de las filas de arriba */
.sumar-herramienta { display: grid; gap: 12px; justify-items: start; }
.sumar-herramienta > .panel-sumar { justify-self: stretch; margin-bottom: 0; }
.sumar-herramienta > .panel-sumar > .permisos-titulo { margin: 0; }
.sumar-formulario { display: grid; gap: 14px; }
.sumar-formulario:empty { display: none; }
.sumar-nota { margin: 0; }

/* ---------- T13: la lista de equivalencias de una empresa (n.º 89) ---------- */
/* Tres tablas (la empresa, Stratio, las personas de antes) con el código de cada persona, y el panel para anotar personas de antes */
/* En la ficha de la empresa, el enlace a la lista: se ve como «Estado y topes» */
.mudar-herramienta { margin-top: 32px; display: grid; gap: 12px; }
.mudar-herramienta > .seccion-titulo, .mudar-herramienta > .bajada { margin: 0; }
.equivalencias { display: grid; gap: 18px; }
.equivalencias-arriba { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.equivalencias-arriba .seccion-titulo, .equivalencias-arriba .bajada { margin: 0; }
.equivalencias > .panel-sumar { margin-bottom: 0; }
.equivalencias > .panel-sumar > .permisos-titulo, .equivalencias > .panel-sumar > .ayuda-campo { margin: 0; }
.equivalencias > .pie-pagina { margin-top: 0; }
.grupo-equivalencias { display: grid; gap: 8px; }
.grupo-equivalencias > .ayuda-campo { margin: 0; }
.grupo-titulo { font-family: var(--poppins); font-weight: 600; font-size: var(--t-m); color: var(--navy); }
.grupo-titulo .numeros { font-weight: 400; color: var(--tinta-suave); }
.vacio-chico { padding: 14px 0; text-align: left; font-size: var(--t-s); }
/* Las tres tablas, con las columnas a la misma altura */
.tabla-equivalencias { table-layout: fixed; }
.tabla-equivalencias th:first-child { width: 30%; }
.tabla-equivalencias th:nth-child(2) { width: 36%; }
.tabla-equivalencias th:nth-child(3) { width: 130px; }
.tabla-equivalencias td { overflow-wrap: anywhere; }
.tabla-equivalencias .confirmar { justify-content: flex-end; }
.codigo-persona {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: var(--t-s);
  color: var(--azul-10); user-select: all; white-space: nowrap;
}
.filas-de-antes { display: grid; gap: 10px; }
.fila-de-antes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
.fila-de-antes .campo { width: 100%; min-width: 0; }
.fila-de-antes > .error-campo { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .fila-de-antes { grid-template-columns: minmax(0, 1fr); padding-bottom: 12px; border-bottom: 1px solid var(--azul-85); }
  .fila-de-antes .boton-texto { justify-self: start; }
  .tabla-equivalencias .confirmar { justify-content: flex-start; }
}

/* ---------- T14: el catálogo dice qué sale en la página ---------- */
.en-pagina {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  padding: 12px 16px; margin-bottom: 16px; border-radius: 10px; background: var(--azul-95);
}
.en-pagina-texto { display: grid; gap: 2px; min-width: 0; }
.en-pagina-texto strong { font-weight: 600; color: var(--azul-10); }
.en-pagina .boton-chico .icono { width: 16px; height: 16px; }
/* En la fila de cada herramienta: la pastilla de quién la ve y, si está en la página, su marca (un punto y el texto) */
.quien-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.usuario-quien .quien-marcas .pill { margin-top: 0; }
.marca-pagina { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--navy); white-space: nowrap; }
.marca-pagina::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
/* Una dirección larga ya no ensancha la ficha en el celular (pasaba con «Corre en Cloudflare: https://…») */
.acceso { grid-template-columns: minmax(0, 1fr); }
.acceso-linea a { overflow-wrap: anywhere; }