/* =====================================================================
   AK Community — PORTAL DEL CLIENTE y «MI CUENTA» (fase 5)
   Solo tokens y componentes del sistema (ak-componentes.css). Sin colores fijos.
   Índice:
     1. Portal: navegación de secciones y selector de negocio
     2. Portal: resumen (servicio, equipo, contadores, aviso)
     3. Portal: listas (informes, presupuestos) y estados vacíos
     4. Portal: solicitudes (historial con pasos) y formulario
     5. Acceso al portal (panel del alumno y avisos)
     6. «Mi cuenta»: resumen (capa plugins, para ganar a Woo/Astra)
     7. Responsive
   ===================================================================== */
@layer componentes {

  /* ---------------------------------------------------------------
     1. Navegación de secciones (fija bajo la cabecera) y negocios
     --------------------------------------------------------------- */
  .ak-portal .ak-dash-head { padding-bottom: var(--space-5); }
  .ak-portal .ak-dash-head .ak-lead strong { color: var(--text); }
  .ak-portal-negocios { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-4); }

  .ak-portal-nav {
    grid-column: 1 / -1; align-self: start;
    position: sticky; top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + 8px); z-index: 5;
    display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none;
    padding: 6px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-1);
  }
  .ak-portal-nav::-webkit-scrollbar { display: none; }
  .ak-portal-nav a {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 8px 16px; min-height: 40px; border-radius: var(--radius-pill);
    font-weight: var(--weight-bold); font-size: var(--step--1); color: var(--text-2); text-decoration: none;
  }
  .ak-portal-nav a:hover { background: var(--surface-2); color: var(--text); }
  .ak-portal-nav a.is-on { background: var(--text); color: var(--bg); }
  .ak-portal-nav .ak-mono { font-size: .82em; color: var(--text-muted); }
  .ak-portal-nav a.is-on .ak-mono { color: inherit; opacity: .8; }
  .ak-portal-punto {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--radius-pill);
    background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  }
  .ak-portal [id] { scroll-margin-top: calc(var(--header-h) + 76px); }

  .ak-portal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }

  /* ---------------------------------------------------------------
     2. Resumen
     --------------------------------------------------------------- */
  .ak-portal-resumen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
  .ak-portal-servicio { grid-column: span 5; display: flex; flex-direction: column; gap: var(--space-3); }
  .ak-portal-equipo { grid-column: span 4; display: flex; flex-direction: column; gap: var(--space-3); }
  .ak-portal-stats { grid-column: span 3; display: grid; gap: var(--space-3); }
  .ak-portal-card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
  .ak-portal-card-top .ak-eyebrow { margin: 0; }
  .ak-portal-servicios { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
  .ak-portal-servicios li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; margin: 0; }
  .ak-portal-servicios strong { font-size: var(--step-0); line-height: 1.3; }
  .ak-portal-servicio-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--success-bg); color: var(--success); }
  .ak-portal-servicio-nombre { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.1; margin: 0; }
  .ak-portal-desde { margin: auto 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--rule); }

  .ak-portal-personas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
  .ak-portal-personas li { display: flex; gap: var(--space-3); align-items: center; margin: 0; }
  .ak-portal-personas li > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
  .ak-portal-contacto { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: auto; }
  .ak-portal-contacto .ak-btn--ghost { padding-inline: 4px; overflow-wrap: anywhere; white-space: normal; }

  .ak-portal-stats .ak-stat { flex-direction: row; align-items: center; text-decoration: none; color: inherit; padding: var(--space-3) var(--space-4); transition: border-color var(--dur-base); }
  .ak-portal-stats .ak-stat:hover { border-color: var(--border-strong); }
  .ak-portal-stats .ak-stat-v { font-size: var(--step-2); }
  .ak-portal-stats .ak-stat.is-atencion { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent), var(--shadow-1); }

  .ak-portal-aviso {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
    padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .ak-portal-aviso p { margin: 0; }
  .ak-portal-aviso-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--accent-text); }
  .ak-portal-aviso-t { font-weight: var(--weight-black); color: var(--text); margin: 0; }
  .ak-portal-aviso .ak-muted { color: var(--text-2); }

  /* ---------------------------------------------------------------
     3. Listas y estados vacíos
     --------------------------------------------------------------- */
  .ak-portal-seccion { grid-column: span 6; }
  .ak-portal-seccion .ak-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ak-portal-seccion .ak-card-head p { margin: 0; }
  .ak-portal-lista { list-style: none; padding: 0; margin: 0; }
  .ak-portal-fila {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic main badge" "ic acc acc";
    gap: var(--space-2) var(--space-3); align-items: start;
    padding: var(--space-4) 0; margin: 0; border-top: 1px dashed var(--rule);
  }
  .ak-portal-fila:first-child { border-top: 0; padding-top: var(--space-2); }
  .ak-portal-fila.is-atencion { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); border-radius: var(--radius-sm); }
  .ak-portal-fila-ic { grid-area: ic; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); }
  .ak-portal-fila-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ak-portal-fila-main strong { line-height: 1.3; overflow-wrap: anywhere; }
  .ak-portal-fila > .ak-badge { grid-area: badge; }
  .ak-portal-fila-acc { grid-area: acc; display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
  .ak-portal-fila-acc .ak-btn--ghost { padding-inline: 6px; }

  .ak-portal-vacio { text-align: center; padding: var(--space-6) var(--space-4); border: 1.5px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
  .ak-portal-vacio p { margin: 0 auto; max-width: 46ch; }
  .ak-portal-vacio-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); margin-bottom: var(--space-3); }
  .ak-portal-vacio-ic .ak-icon { width: 26px; height: 26px; }
  .ak-portal-vacio .ak-portal-vacio-t { font-weight: var(--weight-black); color: var(--text); margin-bottom: 6px; }

  /* ---------------------------------------------------------------
     4. Solicitudes y formulario
     --------------------------------------------------------------- */
  .ak-portal-solicitudes { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
  .ak-portal-solicitudes .ak-portal-seccion { grid-column: auto; }
  .ak-portal-solicitud { padding: var(--space-4) 0; margin: 0; border-top: 1px dashed var(--rule); }
  .ak-portal-solicitud:first-child { border-top: 0; padding-top: var(--space-2); }
  .ak-portal-solicitud p { margin: 4px 0 0; }
  .ak-portal-solicitud-top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
  .ak-portal-solicitud-top strong { line-height: 1.3; }
  .ak-portal-solicitud-desc { font-size: var(--step--1); color: var(--text-2); border-left: 3px solid var(--border); padding-left: var(--space-3); }

  .ak-portal-pasos { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: paso; }
  .ak-portal-pasos li {
    position: relative; margin: 0; padding-top: 12px;
    font-size: var(--step--2); font-weight: var(--weight-bold); color: var(--text-muted);
  }
  .ak-portal-pasos li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: 99px; background: var(--progress-track); }
  .ak-portal-pasos li.is-hecho { color: var(--text-2); }
  .ak-portal-pasos li.is-hecho::before { background: var(--progress-fill); }
  .ak-portal-pasos li.is-actual { color: var(--text); }
  .ak-portal-pasos li.is-actual::before { background: var(--accent); }

  .ak-portal-form { position: sticky; top: calc(var(--header-h) + 84px); }
  .ak-portal-form .ak-eyebrow { margin-bottom: var(--space-2); }
  .ak-portal-form-t { font-size: var(--step-2); margin: 0 0 4px; }
  .ak-portal-campos { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
  .ak-campo { display: grid; gap: 6px; min-width: 0; }
  .ak-campo label { font-size: var(--step--1); }
  .ak-campo input, .ak-campo select, .ak-campo textarea { width: 100%; }
  .ak-campo.is-error input, .ak-campo.is-error select, .ak-campo.is-error textarea { border-color: var(--danger); }
  .ak-campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .ak-campo-fila .ak-campo[hidden] { display: none; }
  .ak-campo-fila:has(.ak-campo[hidden]) { grid-template-columns: 1fr; }
  .ak-portal-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .ak-portal-nota { margin: 0; text-align: center; }

  .ak-portal-alerta {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; border-radius: var(--radius-sm);
    font-size: var(--step--1);
  }
  .ak-portal-alerta .ak-icon { margin-top: .15em; }
  .ak-portal-alerta.is-ok { background: var(--success-bg); color: var(--success); }
  .ak-portal-alerta.is-ok strong { color: inherit; }
  .ak-portal-alerta.is-error { background: var(--danger-bg); color: var(--danger); }

  .ak-portal-estudio {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
  }
  .ak-portal-estudio p { margin: 0; }
  .ak-portal-estudio .ak-portal-fila-ic { grid-area: auto; background: var(--learn); color: var(--learn-ink); }

  /* ---------------------------------------------------------------
     5. Acceso al portal (panel del alumno, avisos)
     --------------------------------------------------------------- */
  .ak-portal-acceso {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
    padding: var(--space-5) var(--space-6); border-radius: var(--radius-md);
    background: var(--hire); color: var(--hire-ink); box-shadow: var(--shadow-2);
  }
  .ak-portal-acceso p { margin: 0; }
  .ak-portal-acceso .ak-eyebrow { color: color-mix(in srgb, var(--hire-ink) 80%, transparent); margin-bottom: 4px; }
  .ak-portal-acceso-t { font-weight: var(--weight-black); font-size: var(--step-1); line-height: 1.25; }
  .ak-portal-acceso .ak-portal-acceso-txt { color: color-mix(in srgb, var(--hire-ink) 85%, transparent); font-size: var(--step--1); margin-top: 4px; }
  .ak-portal-acceso-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--hire-ink) 14%, transparent); }
  .ak-portal-acceso-ic .ak-icon { width: 24px; height: 24px; }
  .ak-portal-acceso .ak-btn { background: var(--accent); color: var(--on-accent); }
  .ak-portal-acceso .ak-btn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: var(--on-accent); }
  .ak-portal-acceso .ak-portal-acceso-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-3); }
  .ak-portal-acceso-chips span {
    font-family: var(--font-mono); font-size: var(--step--2); padding: 2px 8px; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--hire-ink) 12%, transparent);
  }
}

/* ---------------------------------------------------------------
   6. «Mi cuenta»: resumen (capa plugins: Woo/Astra ya están en vendor,
      pero los ajustes de Mi cuenta de ak-plugins.css viven aquí)
   --------------------------------------------------------------- */
@layer plugins {
  .ak-cuenta-hola { margin-bottom: var(--space-5); }
  .ak-cuenta-hola h2 { font-family: var(--font-display); font-size: var(--step-3); margin: 0 0 6px; }
  .ak-cuenta-hola p { margin: 0; color: var(--text-2); }
  .ak-cuenta-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
  .ak-cuenta-accesos li { margin: 0; }
  .ak-cuenta-acceso {
    display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
    padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
    color: var(--text); text-decoration: none;
    transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
  }
  .ak-cuenta-acceso:hover { border-color: var(--border-strong); transform: translateY(-2px); color: var(--text); }
  .ak-cuenta-acceso .ak-cuenta-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); }
  .ak-cuenta-acceso strong { font-size: var(--step-0); }
  .ak-cuenta-acceso span.ak-small { color: var(--text-2); }
  .ak-cuenta-acceso .ak-progress-row { margin-top: auto; }
  .ak-cuenta-acceso.is-portal, .ak-cuenta-acceso.is-portal strong { background: var(--hire); border-color: var(--hire); color: var(--hire-ink); }
  .ak-cuenta-acceso.is-portal span.ak-small { color: color-mix(in srgb, var(--hire-ink) 85%, transparent); }
  .ak-cuenta-acceso.is-portal .ak-cuenta-ic { background: color-mix(in srgb, var(--hire-ink) 14%, transparent); color: var(--hire-ink); }
  .ak-cuenta-acceso.is-learn .ak-cuenta-ic { background: var(--learn); color: var(--learn-ink); }
  .ak-cuenta-acceso.is-cert .ak-cuenta-ic { background: var(--accent-soft); color: var(--accent-text); }
  .ak-cuenta-membresia {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px dashed var(--rule); background: var(--bg-subtle);
    font-size: var(--step--1); color: var(--text-2);
  }
  .ak-cuenta-membresia p { margin: 0; }
  .ak-cuenta-salir { margin-top: var(--space-5); font-size: var(--step--1); color: var(--text-muted); }

  /* Entradas propias del menú lateral */
  .woocommerce-MyAccount-navigation-link--ak-portal a { font-weight: var(--weight-black); }
}

/* ---------------------------------------------------------------
   7. Responsive
   --------------------------------------------------------------- */
@layer componentes {
  @media (max-width: 1100px) {
    .ak-portal-servicio { grid-column: span 7; }
    .ak-portal-equipo { grid-column: span 5; }
    .ak-portal-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ak-portal-stats .ak-stat { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 960px) {
    .ak-portal-seccion { grid-column: 1 / -1; }
    .ak-portal-solicitudes { grid-template-columns: 1fr; }
    .ak-portal-form { position: static; }
  }
  @media (max-width: 720px) {
    .ak-portal-servicio, .ak-portal-equipo { grid-column: 1 / -1; }
    .ak-portal-stats { grid-template-columns: 1fr; gap: var(--space-2); }
    .ak-portal-stats .ak-stat { flex-direction: row; align-items: center; }
    .ak-portal-aviso, .ak-portal-estudio, .ak-portal-acceso { grid-template-columns: auto minmax(0, 1fr); }
    .ak-portal-aviso .ak-btn, .ak-portal-estudio .ak-link-arrow, .ak-portal-acceso .ak-btn { grid-column: 1 / -1; justify-self: start; }
    .ak-portal-acceso { padding: var(--space-5); }
    .ak-portal-fila { grid-template-areas: "ic main" "ic badge" "acc acc"; grid-template-columns: auto minmax(0, 1fr); }
    .ak-portal-fila > .ak-badge { justify-self: start; }
    .ak-portal-fila.is-atencion { margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
    .ak-campo-fila { grid-template-columns: 1fr; }
    .ak-portal .ak-dash-head-row > .ak-btn { width: 100%; }
  }
}