@erplora/outfitkit 0.1.1

package/dist/layout.css

@@ -0,0 +1,338 @@
+/* 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: clamp(3rem, 7vw, 5.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. */
+.ok-grid-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--ok-card-min, 260px), 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);
+}
+
+.ok-section--divider {
+  border-top: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 8%, transparent);
+}
+
+.ok-section-head {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+  margin-bottom: clamp(2rem, 4vw, 3rem);
+  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: 0.72rem;
+  font-weight: 600;
+  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-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem);
+  line-height: 1.06;
+  letter-spacing: -0.025em;
+  font-weight: 650;
+}
+
+.ok-section-sub {
+  margin: 0;
+  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
+  line-height: 1.55;
+  color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
+}
+
+/* ===== 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)
+ *
+ * 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;
+}
+
+/* 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) {
+  /* 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 = card */
+  .ok-table-stack :is(tbody tr, .ok-trow) {
+    border: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 12%, transparent);
+    border-radius: 8px;
+    margin-bottom: 0.75rem;
+    overflow: hidden;
+  }
+
+  /* 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; }