/* OutfitKit — layout.css
 *
 * Primitivos de layout como CSS PLANO (sin web component). Para geometría pura
 * (container, grid, sección de marketing) un custom element solo aporta costes:
 * FOUC hasta `:defined`, shadow boundary que rompe el grid del padre y peso de
 * registro/upgrade. Regla: comportamiento/estado → web component (ok-*);
 * geometría/tipografía → clase CSS de este fichero.
 *
 * Reemplaza a los antiguos <ok-container>, <ok-container-full> y <ok-section>
 * (eliminados del paquete). Complementa a Ionic: para el padding de página de
 * un dashboard usa `.ion-padding` dentro de <ion-content>; aquí solo vive lo
 * que Ionic NO tiene (grid de 12 col, container con max-width, secciones).
 *
 * Tokens: hereda --ok-container-max / --ok-spacing del tema (outfitkit-theme.css
 * o equivalente) con los mismos fallbacks que usaban los componentes.
 * Cargar después del tema. Export del paquete: `@erplora/outfitkit/layout.css`.
 */

:root {
  --ok-grid-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  --ok-section-pad-y-compact: clamp(2rem, 4vw, 3rem);
  --ok-section-pad-y-standard: clamp(2.5rem, 5vw, 4.5rem);
  --ok-section-pad-y-featured: clamp(3.5rem, 6vw, 5.5rem);
  --ok-section-pad-y: var(--ok-section-pad-y-standard);
  --ok-section-head-space: clamp(1.75rem, 3vw, 2.5rem);
}

/* ===== Container (web pública; en dashboard NO: ahí el ancho lo da el split-pane) ===== */

.ok-container {
  width: 100%;
  max-width: var(--ok-container-max, 1140px);
  margin-inline: auto;
  padding-inline: var(--ok-spacing, var(--ion-padding, 16px));
  box-sizing: border-box;
}

.ok-container-fluid {
  width: 100%;
  min-width: 0;
  padding-inline: var(--ok-spacing, var(--ion-padding, 16px));
  box-sizing: border-box;
}

/* ===== Grid de 12 columnas (compatible con ion-split-pane: minmax(0,1fr) +
   min-width:0 evitan que el contenido fuerce el ancho cuando el menú está abierto).
   Breakpoints = los de Ionic (md 768 / lg 992 / xl 1200). ===== */

.ok-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ok-grid-gap);
}

.ok-col {
  grid-column: span 12;
  min-width: 0;
}

/* Grid de cards/KPIs sin clases de breakpoint: se adapta solo al ancho útil.
   auto-fit colapsa tracks vacíos para que 2–3 tarjetas sigan llenando el eje. */
.ok-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ok-card-min, 16rem), 100%), 1fr));
  gap: var(--ok-grid-gap);
}

@media (min-width: 768px) {
  .ok-md-3 { grid-column: span 3; }
  .ok-md-4 { grid-column: span 4; }
  .ok-md-6 { grid-column: span 6; }
  .ok-md-8 { grid-column: span 8; }
  .ok-md-9 { grid-column: span 9; }
  .ok-md-12 { grid-column: span 12; }
}

@media (min-width: 992px) {
  .ok-lg-3 { grid-column: span 3; }
  .ok-lg-4 { grid-column: span 4; }
  .ok-lg-6 { grid-column: span 6; }
  .ok-lg-8 { grid-column: span 8; }
  .ok-lg-9 { grid-column: span 9; }
  .ok-lg-12 { grid-column: span 12; }
}

@media (min-width: 1200px) {
  .ok-xl-3 { grid-column: span 3; }
  .ok-xl-4 { grid-column: span 4; }
  .ok-xl-6 { grid-column: span 6; }
  .ok-xl-8 { grid-column: span 8; }
  .ok-xl-9 { grid-column: span 9; }
  .ok-xl-12 { grid-column: span 12; }
}

/* ===== Sección de marketing (antes <ok-section>) =====
 *
 *   <section class="ok-section ok-section--center ok-section--divider">
 *     <header class="ok-section-head">
 *       <span class="ok-eyebrow">Plataforma</span>
 *       <h2 class="ok-section-title">Todo en uno</h2>
 *       <p class="ok-section-sub">…</p>
 *     </header>
 *     …contenido…
 *   </section>
 *
 * El centrado horizontal se hace con padding-inline:max(...) en el propio
 * elemento (sin wrapper interno): así el divisor (border-top) ocupa el ancho
 * completo igual que hacía el :host del componente.
 */

.ok-section {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--ok-section-pad-y);
  padding-inline: max(
    var(--ok-spacing, 1.25rem),
    calc((100% - var(--ok-container-max, 1140px)) / 2 + var(--ok-spacing, 1.25rem))
  );
  color: var(--ok-text, var(--ion-text-color, #18181b));
  font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

/* Ritmo vertical compartido. .ok-section-content permite conservar un
   .ok-container explícito dentro de superficies full-bleed. Los modificadores
   pueden vivir en el propio bloque o en un wrapper y se heredan por tokens. */
.ok-section-content {
  box-sizing: border-box;
  padding-block: var(--ok-section-pad-y);
}

.ok-section--compact {
  --ok-section-pad-y: var(--ok-section-pad-y-compact);
  --ok-section-head-space: clamp(1.5rem, 2.5vw, 2rem);
}

.ok-section--featured {
  --ok-section-pad-y: var(--ok-section-pad-y-featured);
  --ok-section-head-space: clamp(2rem, 4vw, 3rem);
}

.ok-section--divider {
  border-top: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 8%, transparent);
}

/* Superficie alterna para crear ritmo entre secciones de página. Funciona
   tanto sobre .ok-section como sobre un wrapper full-bleed con .ok-container
   en su interior. */
.ok-section--soft {
  background: color-mix(
    in oklab,
    var(--ok-text, var(--ion-text-color, #18181b)) 2.5%,
    var(--ok-surface, var(--ion-background-color, #fff))
  );
}

.ok-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: var(--ok-section-head-space);
  max-width: 56ch;
}

.ok-section--center .ok-section-head {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.ok-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: var(--ok-type-eyebrow-size, 0.72rem);
  font-weight: var(--ok-type-eyebrow-weight, 600);
  line-height: var(--ok-type-eyebrow-leading, 1.2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ok-primary, var(--ion-color-primary, #1496d6));
  background: color-mix(in oklab, var(--ok-primary, var(--ion-color-primary, #1496d6)) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--ok-primary, var(--ion-color-primary, #1496d6)) 22%, transparent);
}

.ok-section--center .ok-eyebrow {
  align-self: center;
}

.ok-section-title {
  margin: 0;
  font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
  font-size: var(--ok-type-section-title-size, clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem));
  line-height: var(--ok-type-section-title-leading, 1.06);
  letter-spacing: -0.025em;
  font-weight: var(--ok-type-section-title-weight, 650);
}

.ok-section-sub {
  margin: 0;
  font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
  line-height: var(--ok-type-intro-leading, 1.6);
  color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
}

/* ===== Editorial content and documentation surfaces =====
 *
 * Reusable public/documentation primitives: constrained readable width,
 * Ionic search/accordion theming and rich-text content generated from Markdown.
 */
ion-searchbar.ok-search {
  --background: var(--ok-surface, var(--ion-card-background, #fff));
  --border-radius: 0.875rem;
  --box-shadow: 0 10px 28px -22px color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 45%, transparent);
  --color: var(--ok-text, var(--ion-text-color, #18181b));
  --icon-color: var(--ok-primary, var(--ion-color-primary, #1496d6));
  --placeholder-color: var(--ok-text, var(--ion-text-color, #18181b));
  --placeholder-opacity: 0.55;
  padding-inline: 0;
  margin-block-end: 1rem;
}

ion-accordion.ok-accordion {
  --background: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
}

ion-item.ok-accordion-header {
  --background: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
  --color: var(--ok-text, var(--ion-text-color, #18181b));
  --padding-start: 1.125rem;
  --inner-padding-end: 1rem;
  font-weight: 600;
}

ion-item.ok-accordion-header iconify-icon {
  color: var(--ok-primary, var(--ion-color-primary, #1496d6));
  margin-inline-end: 0.75rem;
}

.ok-accordion-body {
  padding: 0.25rem 1.25rem 1.5rem;
  background: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
}

.ok-prose {
  color: var(--ok-text, var(--ion-text-color, #18181b));
  line-height: 1.7;
}

.ok-prose h2 {
  margin: 1.5rem 0 0.75rem;
  font-family: var(--ok-font-display, var(--ok-font, system-ui, sans-serif));
  font-size: 1.25rem;
  font-weight: 600;
}

.ok-prose h3 {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--ok-font-display, var(--ok-font, system-ui, sans-serif));
  font-size: 1.1rem;
  font-weight: 600;
}

.ok-prose p {
  margin: 0.5rem 0;
}

.ok-prose :is(ul, ol) {
  margin: 0.5rem 0;
  padding-inline-start: 1.5rem;
}

.ok-prose ul {
  list-style: disc;
}

.ok-prose ol {
  list-style: decimal;
}

.ok-prose li {
  margin: 0.25rem 0;
  line-height: 1.6;
}

.ok-prose table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ok-prose :is(th, td) {
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 12%, transparent);
  text-align: start;
}

.ok-prose th {
  background: color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 5%, transparent);
  font-weight: 600;
}

.ok-prose code {
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  background: color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 6%, transparent);
  font-size: 0.875em;
}

.ok-prose pre {
  overflow-x: auto;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 6%, transparent);
}

.ok-prose pre code {
  padding: 0;
  background: none;
}

.ok-prose blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-inline-start: 3px solid var(--ok-primary, var(--ion-color-primary, #1496d6));
  border-radius: 0 0.5rem 0.5rem 0;
  background: color-mix(in oklab, var(--ok-primary, var(--ion-color-primary, #1496d6)) 5%, transparent);
}

.ok-prose strong {
  font-weight: 600;
}

.ok-prose hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 12%, transparent);
}
/* Tipografía editorial reutilizable fuera de los componentes. El display se
 * reserva para el hero principal; page-title para cabeceras interiores e
 * intro/body para el texto que las acompaña. */
.ok-display-title,
.ok-page-title {
  margin: 0;
  font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
  letter-spacing: -0.045em;
}

.ok-display-title {
  font-size: var(--ok-type-display-size, clamp(3rem, 2.25rem + 3vw, 4.5rem));
  font-weight: var(--ok-type-display-weight, 650);
  line-height: var(--ok-type-display-leading, 1);
}

.ok-page-title {
  font-size: var(--ok-type-page-title-size, clamp(2.35rem, 1.75rem + 2.6vw, 4rem));
  font-weight: var(--ok-type-page-title-weight, 650);
  line-height: var(--ok-type-page-title-leading, 1.04);
  text-wrap: balance;
}

.ok-intro,
.ok-body {
  margin: 0;
  color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
  text-wrap: pretty;
}

.ok-intro {
  font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
  line-height: var(--ok-type-intro-leading, 1.6);
}

.ok-body {
  font-size: var(--ok-type-body-size, 1rem);
  line-height: var(--ok-type-body-leading, 1.6);
}
/* ===== Tabla apilable (.ok-table-stack) — patrón «no more tables» =====
 *
 * Solo CSS, sin web component (para CRUDs ricos usa <ok-data-table>; esto es
 * para tablas simples/estáticas). En escritorio se ve como tabla; bajo 768px
 * (breakpoint md de Ionic) cada fila se convierte en una card apilada y cada
 * celda pinta su etiqueta de columna delante con `content: attr(data-title)`.
 *
 * Funciona con tres tipos de markup:
 *   1) <table class="ok-table-stack"> nativo:
 *        <td data-title="Precio">9,90 €</td>
 *   2) divs (o cualquier elemento):
 *        .ok-table-stack > .ok-thead/.ok-trow > .ok-tcell[data-title]
 *   3) Ionic:
 *        ion-grid.ok-table-stack > ion-row.ok-trow > ion-col.ok-tcell
 *      (los estilos del documento ganan al :host de Ionic, así que el grid
 *      propio sustituye al flex de ion-row; ::before sí renderiza en hosts
 *      con shadow DOM)
 *
 * En tablas editoriales, envolver con .ok-table-surface para obtener una
 * superficie común sin añadir bordes de página. .ok-table-group identifica
 * filas de sección que no deben convertirse en superficies independientes.
 *
 * Tokens: --ok-table-cols (columnas del markup no-<table>; por defecto
 * partes iguales) · --ok-table-label-w (ancho de la etiqueta en móvil, 45%).
 * Celdas sin data-title (p.ej. acciones) ocupan el ancho completo en móvil.
 */

.ok-table-stack {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  color: var(--ok-text, var(--ion-text-color, #18181b));
}

table.ok-table-stack {
  border-collapse: collapse;
}

/* Marco editorial reutilizable. Usa una línea óptica muy suave en escritorio
 * y desaparece en móvil, donde las filas ya construyen su propia superficie. */
.ok-table-surface {
  width: 100%;
  overflow-x: auto;
  background: var(--ok-surface, var(--ion-card-background, #fff));
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 6%, transparent);
}

.ok-table-surface > .ok-table-stack {
  margin: 0;
}

.ok-table-surface > .ok-table-stack :is(tbody tr:last-child td, .ok-trow:last-child .ok-tcell) {
  border-bottom: 0;
}

/* Markup no-<table>: cabecera y filas como grid de columnas iguales */
.ok-table-stack > .ok-thead,
.ok-table-stack > .ok-trow {
  display: grid;
  grid-template-columns: var(--ok-table-cols, repeat(auto-fit, minmax(0, 1fr)));
  align-items: center;
}

.ok-table-stack :is(th, td, .ok-tcell) {
  padding: 0.6rem 0.75rem;
  text-align: left;
  min-width: 0;
  box-sizing: border-box;
}

.ok-table-stack :is(thead th, .ok-thead .ok-tcell) {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
}

.ok-table-stack :is(tr, .ok-trow, .ok-thead) {
  border-bottom: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 10%, transparent);
}

@media (max-width: 767px) {
  .ok-table-surface {
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  /* La tabla nativa deja de comportarse como tabla */
  table.ok-table-stack,
  table.ok-table-stack :is(thead, tbody, tfoot, tr, th, td),
  .ok-table-stack > .ok-trow {
    display: block;
  }

  /* Cabecera oculta visualmente, no para lectores de pantalla */
  .ok-table-stack :is(thead, .ok-thead) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Fila = superficie ligera. Sin borde: la separación procede del fondo,
     la sombra mínima y los divisores internos, evitando superficies anidadas. */
  .ok-table-stack :is(tbody tr, .ok-trow) {
    border: 0;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--ok-surface, var(--ion-card-background, #fff));
    box-shadow: 0 1px 3px color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 9%, transparent);
  }

  /* Una fila de grupo es un rótulo editorial, no otra card de datos. */
  .ok-table-stack :is(tbody tr.ok-table-group, .ok-trow.ok-table-group) {
    margin: 1.25rem 0 0.35rem;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  /* Celda = par etiqueta/valor (display/width explícitos: pisan el :host
     flex de ion-col, que si no se queda con su sizing de columna) */
  .ok-table-stack :is(td, .ok-tcell) {
    display: block;
    width: 100%;
    max-width: 100%;
    position: relative;
    border: none;
    border-bottom: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 7%, transparent);
    padding: 0.55rem 0.75rem;
    padding-inline-start: calc(var(--ok-table-label-w, 45%) + 0.75rem);
    white-space: normal;
    text-align: left;
  }

  .ok-table-stack :is(td, .ok-tcell):last-child {
    border-bottom: none;
  }

  .ok-table-stack :is(td, .ok-tcell)::before {
    content: attr(data-title);
    position: absolute;
    top: 0.55rem;
    inset-inline-start: 0.75rem;
    width: calc(var(--ok-table-label-w, 45%) - 1rem);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
  }

  /* Celdas sin etiqueta (acciones, etc.): ancho completo, sin ::before */
  .ok-table-stack :is(td, .ok-tcell):not([data-title]),
  .ok-table-stack :is(td, .ok-tcell)[data-title=''] {
    padding-inline-start: 0.75rem;
  }
}

/* ===== Masonry (columnas CSS, sin JS) — hueco de Ionic ===== */
/* Layout de columnas tipo Pinterest: los items fluyen por columnas con
 * break-inside:avoid. Variantes 2..5 columnas; colapsa a 2 (768px) y 1 (480px).
 * Para galerías de cards de altura desigual. (Antiguo ux-masonry.) */
.ok-masonry {
  --_cols: 3;
  column-count: var(--_cols);
  column-gap: var(--ok-grid-gap, 1rem);
}
.ok-masonry-2 { --_cols: 2; }
.ok-masonry-3 { --_cols: 3; }
.ok-masonry-4 { --_cols: 4; }
.ok-masonry-5 { --_cols: 5; }
.ok-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--ok-grid-gap, 1rem);
}
@media (max-width: 768px) {
  .ok-masonry { column-count: 2; }
}
@media (max-width: 480px) {
  .ok-masonry { column-count: 1; }
}

/* ===== Form actions (barra de acciones de pie de formulario/modal) — hueco de Ionic ===== */
/* Pie estandarizado de formularios: borde superior, gap y alineación de botones.
 * Más barato como utilidad CSS que como web component. (Antiguo ux-form-actions.)
 * Uso: <div class="ok-form-actions ok-form-actions-end"><ion-button…/></div> */
.ok-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--ok-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.1)));
}
.ok-form-actions-end { justify-content: flex-end; }
.ok-form-actions-start { justify-content: flex-start; }
.ok-form-actions-between { justify-content: space-between; }