/* Estilos propios del grupo "productos": productos/easybrain.html y productos/easypos.html.
   Reutiliza tokens y componentes de base.css; solo agrega lo que el catálogo del contrato no
   cubre. Clases prefijadas "pr-" para no chocar con otros grupos. */

/* Acción bajo el párrafo de la cabecera de página (botón "Solicitar demostración" / "Quiero
   EasyPos"), reutilizando .boton ya existente. */
.pr-cabecera-accion { margin-top: var(--espacio-6); }

/* Paneles de pestañas propios (capacidades de EasyBrain). El componente generico
   data-componente="pestanas" pone la clase "activa" en el boton y "activo" en el panel; aqui
   solo se define el aspecto visual, igual que .sv-panel del grupo servicios. */
html.js .pr-panel:not(.activo) { display: none; }
.pr-panel {
  border-radius: var(--radio-superficie);
  border: 1px solid var(--linea);
  background: var(--superficie);
  padding: clamp(24px, 4vw, 40px);
}
.pr-panel h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
/* El limite de linea legible va en el texto, no en la tarjeta: con flex:1 (abajo, desde
   1024px) la tarjeta llena el ancho disponible junto al listado de pestanas en vez de
   dejar la mitad del carril vacia (m-14), y el parrafo se sigue leyendo comodo. */
.pr-panel > p { margin-top: var(--espacio-3); color: var(--texto-2); max-width: 68ch; }
.pr-panel .lista-check { margin-top: var(--espacio-5); max-width: 68ch; }
@media (min-width: 1024px) {
  .pr-panel { flex: 1; min-width: 0; }
}

/* Visual abstracto de EasyPos: composicion grafica de marca, nunca una pantalla inventada. */
.pr-epos-visual { display: flex; justify-content: center; align-items: center; padding: clamp(24px, 5vw, 56px); }
.pr-epos-visual svg { width: min(320px, 100%); height: auto; color: var(--acento-texto); }
.pr-epos-visual .pr-epos-linea { stroke: var(--linea); }
.pr-epos-visual .pr-epos-punto { fill: var(--acento); }

/* Selector "¿Qué necesitas controlar?" (EasyPos): radiogroup con resultado honesto, sin
   cifras, que muestra el modulo documentado correspondiente. */
.pr-negocio-tabs { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-5); }
.pr-negocio-tab {
  min-height: 44px;
  padding-inline: var(--espacio-5);
  border-radius: var(--radio-control);
  border: 1px solid var(--linea);
  background: var(--superficie);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-2);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.pr-negocio-tab:hover { border-color: var(--acento); }
.pr-negocio-tab[aria-checked="true"] { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); }
.pr-negocio-resultado {
  margin-top: var(--espacio-6);
  padding: var(--espacio-6);
  border-radius: var(--radio-superficie);
  border: 1px solid var(--linea);
  background: var(--superficie-2);
}
.pr-negocio-resultado h3 { font-size: 1.0625rem; }
.pr-negocio-resultado ul { margin-top: var(--espacio-4); }

@media not (prefers-reduced-motion: reduce) {
  html.js .pr-negocio-resultado { transition: opacity 0.2s var(--curva), transform 0.2s var(--curva); }
}

/* Tabla de compatibilidad fiscal (EasyPos): reutiliza .tabla-capacidades. Por debajo de 480px
   se apila (cada fila pasa a bloque) en vez de desbordar u obligar a desplazar horizontalmente:
   la columna "Detalle" quedaba cortada a 360px (M9 de la auditoria). */
.pr-tabla th:first-child, .pr-tabla td:first-child { white-space: nowrap; }
@media (max-width: 479px) {
  .pr-tabla, .pr-tabla thead, .pr-tabla tbody, .pr-tabla tr, .pr-tabla th, .pr-tabla td {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .pr-tabla thead { position: absolute; left: -9999px; }
  .pr-tabla tr { padding-block: var(--espacio-4); border-bottom: 1px solid var(--linea); }
  .pr-tabla tr:first-child { padding-top: 0; }
  .pr-tabla td { padding: 0; border-bottom: 0; }
  .pr-tabla td:first-child { font-weight: 700; color: var(--texto-1); margin-bottom: var(--espacio-2); }
}