/* Estilos propios del portal que no están en la librería ui: la hoja de las pantallas públicas (ingreso, recuperación). */
.publico .tarjeta { max-width: 440px; gap: 18px; }
.publico-marca { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--titulo); }
.publico .btn, .publico .campo input { min-height: 44px; font-size: 16px; }
.publico .campo label { font-size: 14px; }
.publico-enlace { margin: 0; }
.publico-enlace a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal-strong); }
.publico-equipo a { color: var(--muted); font-size: 14px; }
.publico .ayuda { font-size: 14px; margin: 0; }
.publico .aviso-ok, .publico .alerta { margin: 0; }

/* Segundo paso para entrar */
.publico-titulo { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--titulo); }
.segundo-paso-pasos { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.qr { justify-self: center; width: 220px; height: 220px; max-width: 100%; background: #fff; border-radius: 10px; }
.publico code { font-family: var(--mono); word-break: break-all; }
.publico .codigo-input { font-size: 18px; }

/* Franja del equipo de Integrio (Estás viendo el portal de …) */
.franja-equipo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 12px; }
.franja-equipo a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; text-decoration: underline; }
.lista-clientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-clientes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.lista-clientes form { margin: 0; }

/* Pantallas del portal (Resumen y las que siguen) */
body.portal .resumen-paneles { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
body.portal .portal-panel-titulo { margin: 0 0 16px; font-family: var(--display); font-size: var(--fs-panel); font-weight: 700; color: var(--titulo); }
body.portal .resumen-frase { margin: 16px 0 0; font-size: 17px; }
body.portal .resumen-frase strong { color: var(--teal-strong); }
body.portal .resumen-vacio { margin: 0; color: var(--muted); }
/* Nombres largos sin espacios (de un cliente o un producto) no deben ensanchar la página */
body.portal .portal-aviso-texto, body.portal .portal-cifra-etiqueta, body.portal .portal-titular, body.portal .resumen-frase { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  body.portal .resumen-paneles { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Pantalla Tiendas (lista y ficha) · tarea 10 ===== */
body.portal .solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.portal .clientes-sub { margin: -8px 0 20px; color: var(--muted); }
body.portal .clientes-dejaron { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
body.portal .clientes-tarjeta { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--hundido); border-radius: 14px; min-width: 0; overflow-wrap: anywhere; }
body.portal .clientes-tarjeta p { margin: 0; }
body.portal .clientes-nombre { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.25; }
body.portal .clientes-nombre a { color: var(--titulo); text-decoration: none; }
body.portal .clientes-nombre a:hover { text-decoration: underline; }
body.portal .clientes-tarjeta strong { color: var(--bad); }
body.portal .clientes-atiende { color: var(--muted); font-size: 15px; }
body.portal .clientes-enlace, body.portal .clientes-mas a { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 600; color: var(--teal-strong); text-underline-offset: 3px; }
body.portal .clientes-mas { margin: 16px 0 0; }
body.portal .clientes-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
body.portal .clientes-grupo { min-width: 0; overflow-wrap: anywhere; }
body.portal .clientes-grupo p { margin: 0; }
body.portal .clientes-grupo-titulo { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--titulo); }
body.portal .clientes-grupo-cifra { font-family: var(--mono); font-size: 24px; color: var(--titulo); }
body.portal .clientes-grupo-frase { margin-top: 4px; color: var(--muted); }
body.portal .clientes-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
body.portal .clientes-cabeza .portal-panel-titulo { margin: 0; }
body.portal .clientes-buscar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
body.portal .clientes-buscar input[type="search"] { flex: 1 1 260px; min-width: 0; }
body.portal .chips { margin-bottom: 20px; }
body.portal .chips a { min-height: 44px; padding: 8px 16px; font-size: 16px; }
body.portal .clientes-contador { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
body.portal .clientes-tabla th, body.portal .clientes-tabla td { padding: 12px 12px; font-size: 16px; vertical-align: middle; }
body.portal .clientes-tabla th, body.portal .clientes-tabla th.num { font-size: 12px; font-family: var(--mono); }
body.portal .clientes-tabla td a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--titulo); }
body.portal .clientes-tabla td.num { text-align: right; font-size: 15px; }
body.portal .clientes-tabla th.num { text-align: right; }
body.portal .clientes-tabla .etiqueta { font-size: 14px; padding: 4px 12px; }
body.portal .tabla-marco { max-height: none; }
body.portal .paginacion { font-size: 16px; margin-top: 16px; }
body.portal .clientes-encabezado { display: grid; gap: 12px; min-width: 0; }
body.portal .clientes-volver { margin: 0; }
body.portal .clientes-volver a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--teal-strong); }
body.portal .clientes-linea { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 18px; color: var(--muted); }
body.portal .clientes-linea .etiqueta { font-size: 14px; padding: 4px 12px; }
body.portal .clientes-hecho { font-size: 26px; overflow-wrap: anywhere; }
body.portal .clientes-grafica { max-height: 300px; }
body.portal .clientes-barra { fill: var(--teal-strong); }
body.portal .clientes-productos { list-style: none; margin: 0; padding: 0; }
body.portal .clientes-productos li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
body.portal .clientes-productos li:last-child { border-bottom: 0; }
body.portal .clientes-producto-nombre { min-width: 0; overflow-wrap: anywhere; }
body.portal .clientes-producto-monto { font-family: var(--mono); white-space: nowrap; color: var(--titulo); }
@media (max-width: 599px) {
  body.portal .clientes-buscar .btn { flex: 1 1 auto; }
  body.portal .clientes-hecho { font-size: 22px; }
}
body.portal .tabla-marco.tarjetas .tabla td, body.portal .tabla-marco.tarjetas .tabla td:first-child { font-size: 16px; }
body.portal .tabla-marco.tarjetas .tabla td::before { font-size: 14px; }
@media (max-width: 639px) { body.portal .tabla-marco.tarjetas .tabla tr { padding: 16px; } }
/* ===== fin Pantalla Tiendas ===== */

/* ===== Pantalla Productos · tarea 11 ===== */
body.portal .productos-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 24px; }
body.portal .productos-periodo { display: flex; flex-wrap: wrap; padding: 4px; border-radius: 14px; }
body.portal .productos-periodo a { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border-radius: 11px; font-size: 16px; white-space: nowrap; }
body.portal .productos-periodo a[aria-current="true"] { background: var(--surface); color: var(--titulo); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
body.portal .productos-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
body.portal .productos-marca label { font-size: 16px; font-weight: 600; color: var(--titulo); }
body.portal .productos-marca select { min-width: 0; max-width: 100%; }
body.portal .productos-descargar { margin-left: auto; }
body.portal .productos-paneles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
body.portal .productos-franja { margin: 0 0 24px; padding: 16px 20px; background: var(--surface); border-radius: 14px; border-bottom: 0; box-shadow: var(--sombra); }
body.portal .productos-franja-detalle { color: var(--muted); }
body.portal .productos-franja-lista { flex: 1 1 280px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
body.portal .productos-sub { margin: -8px 0 20px; color: var(--muted); }
body.portal .productos-lista { list-style: none; margin: 0; padding: 0; }
body.portal .productos-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
body.portal .productos-lista li:last-child { border-bottom: 0; }
body.portal .productos-nombre { min-width: 0; overflow-wrap: anywhere; color: var(--titulo); font-weight: 600; }
body.portal .productos-cifra { font-family: var(--mono); white-space: nowrap; color: var(--titulo); text-align: right; }
body.portal .productos-nota { min-width: 0; grid-column: 1; color: var(--muted); font-size: 15px; }
body.portal .productos-bodega { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; text-align: right; color: var(--muted); font-size: 15px; }
body.portal .productos-bodega .productos-cifra { font-size: 16px; }
body.portal .productos-barra { grid-column: 1 / -1; display: block; width: 100%; height: 8px; }
body.portal .productos-barra-fondo { fill: var(--hundido); }
body.portal .productos-barra-valor { fill: var(--teal-strong); }
body.portal .productos-mas { margin: 8px 0 0; }
body.portal .productos-mas a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--teal-strong); text-underline-offset: 3px; }
@media (max-width: 899px) {
  body.portal .productos-paneles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  body.portal .productos-periodo { width: 100%; }
  body.portal .productos-periodo a { flex: 1 1 calc(50% - 4px); padding: 8px 10px; }
  body.portal .productos-marca { width: 100%; }
  body.portal .productos-marca select { flex: 1 1 160px; }
  body.portal .productos-descargar { margin-left: 0; width: 100%; }
}
/* ===== fin Pantalla Productos ===== */

/* ===== Tu cuenta: Seguridad y Lo que ves · tarea 12 ===== */
body.portal .cuenta-cab { margin: 0 0 8px; }
body.portal .cuenta-titulo { margin: 0; font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1.15; color: var(--titulo); }
body.portal .cuenta-linea { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; }
body.portal .pestanas a { min-height: 44px; padding: 10px 16px; font-size: 16px; }
body.portal .cuenta-paneles { display: grid; gap: 24px; max-width: 760px; }
body.portal .cuenta-paneles .portal-panel-titulo { margin-bottom: 12px; }
body.portal .cuenta-paneles .portal-panel > p { margin: 0 0 16px; }
body.portal .cuenta-paneles .aviso-ok, body.portal .cuenta-paneles .alerta { margin: 0 0 16px; }
body.portal .cuenta-form { display: grid; gap: 16px; max-width: 440px; }
body.portal .cuenta-form .campo label, body.portal .campo label { font-size: 16px; }
body.portal .cuenta-form .ayuda { font-size: 15px; color: var(--muted); }
body.portal .cuenta-form .btn { justify-self: start; }
body.portal .cuenta-titulo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
body.portal .cuenta-titulo-fila .portal-panel-titulo { margin: 0; }
body.portal .cuenta-titulo-fila .etiqueta, body.portal .cuenta-sesiones .etiqueta { font-size: 14px; padding: 4px 12px; }
body.portal .cuenta-nota { color: var(--muted); font-size: 15px; }
body.portal .cuenta-sesiones { list-style: none; margin: 0 0 16px; padding: 0; }
body.portal .cuenta-sesiones li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
body.portal .cuenta-sesiones li:last-child { border-bottom: 0; }
body.portal .cuenta-equipo { font-weight: 600; color: var(--titulo); }
body.portal .cuenta-uso { margin-left: auto; color: var(--muted); font-size: 15px; }
body.portal .cuenta-salir { margin: 0; display: flex; }
body.portal .cuenta-opciones { display: grid; gap: 4px; }
body.portal .cuenta-opciones legend { padding: 0; float: left; width: 100%; margin-bottom: 8px; }
body.portal .cuenta-opciones legend + * { clear: both; }
body.portal .cuenta-opcion { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; }
body.portal .cuenta-opcion input { flex: none; margin: 1px 0 0; }
body.portal .cuenta-opcion > span { min-width: 0; overflow-wrap: anywhere; }
body.portal .cuenta-detalle { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; }
body.portal .cuenta-guardar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
body.portal .cuenta-guardar .cuenta-nota { margin: 0; }
body.portal .cuenta-paneles select { max-width: 100%; }
body.portal .resumen-paneles-uno { grid-template-columns: minmax(0, 1fr); }
body.portal .resumen-oculto { margin: 0; color: var(--muted); }
body.portal .resumen-oculto a { font-weight: 600; color: var(--teal-strong); text-underline-offset: 3px; }
@media (max-width: 599px) {
  body.portal .cuenta-titulo { font-size: 26px; }
  body.portal .cuenta-uso { margin-left: 0; flex-basis: 100%; }
}
/* ===== fin Tu cuenta ===== */

/* ===== Tu equipo: lista, invitar y la ficha de una persona · tarea 13 ===== */
body.portal .equipo-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 8px; }
body.portal .equipo-cab .portal-panel-titulo { margin: 0; }
body.portal .equipo-sub { margin: 4px 0 0; color: var(--muted); }
body.portal .equipo-lista { list-style: none; margin: 8px 0 0; padding: 0; }
body.portal .equipo-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
body.portal .equipo-fila:last-child { border-bottom: 0; }
body.portal .equipo-datos { display: grid; gap: 2px; min-width: 0; }
body.portal .equipo-nombre { font-weight: 600; color: var(--titulo); overflow-wrap: anywhere; }
body.portal .equipo-detalle, body.portal .equipo-uso { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
body.portal .equipo-estado .etiqueta { font-size: 14px; padding: 4px 12px; white-space: normal; }
body.portal .equipo-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body.portal .equipo-acciones form { margin: 0; }
body.portal .equipo-quieta .equipo-nombre { color: var(--muted); font-weight: 500; }
body.portal .equipo-aviso { color: var(--amb); font-weight: 600; }
body.portal .equipo-enlace { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--wash); color: var(--titulo); font: inherit; font-size: 15px; }
body.portal .equipo-reglas-lectura { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.portal .equipo-volver { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--teal-strong); text-underline-offset: 3px; }
body.portal .equipo-como { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
body.portal .equipo-menu { background: var(--wash); border-radius: 14px; padding: 16px 18px; }
body.portal .equipo-menu-titulo { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--titulo); }
body.portal .equipo-menu-lista { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
body.portal .equipo-menu-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
body.portal .equipo-menu-item small { color: var(--muted); font-size: 14px; }
body.portal .equipo-menu-primera { box-shadow: 0 0 0 2px var(--teal-strong); font-weight: 600; color: var(--titulo); }
body.portal .equipo-menu .cuenta-nota { margin: 0; }
body.portal .equipo-peligro { padding: 24px; }
body.portal .equipo-peligro .portal-panel-titulo { margin-bottom: 8px; }
body.portal .equipo-peligro p { margin: 0 0 14px; }
body.portal .equipo-peligro form:last-child, body.portal .equipo-peligro p:last-child { margin-bottom: 0; }
@media (max-width: 599px) {
  body.portal .equipo-fila { grid-template-columns: minmax(0, 1fr); }
  body.portal .equipo-acciones { justify-content: flex-start; }
  body.portal .equipo-como { grid-template-columns: minmax(0, 1fr); }
  body.portal .equipo-cab .btn { width: 100%; }
}
/* ===== fin Tu equipo ===== */