@layer components {
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 40px; min-width: var(--touch-min); padding: 0 var(--space-4);
    border: 1px solid transparent; border-radius: var(--radius-control);
    font-size: var(--text-md); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: background-color var(--duration-short) var(--ease-out);
  }
  .button--primary { background: var(--color-action); color: var(--color-on-action); }
  .button--primary:hover { background: var(--color-action-hover); }
  .button--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-control-border); }
  .button--secondary:hover { background: var(--color-surface-hover); }
  .button--quiet { background: transparent; color: var(--color-text-muted); box-shadow: none; }
  .button--quiet:hover { background: var(--color-surface-hover); color: var(--color-text); }
  .button--block { width: 100%; min-height: 46px; }
  .button[disabled], .button[aria-disabled="true"] { background: var(--color-surface-hover); color: var(--color-text-subtle); border-color: transparent; cursor: not-allowed; box-shadow: none; }

  .field { display: grid; gap: 6px; }
  .field__label { font-size: var(--text-md); font-weight: 500; color: var(--color-text-muted); }
  .field__control { position: relative; display: flex; align-items: center; }
  .field__control .icon { position: absolute; left: 14px; color: var(--color-text-subtle); pointer-events: none; }

  .input {
    width: 100%; min-height: 46px; padding: 0 14px;
    background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
    box-shadow: var(--shadow-xs); font-size: var(--text-base);
  }
  .field__control .input { padding-left: 42px; }
  .input--compact { min-width: 7rem; }
  .input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: transparent; }

  .alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); font-size: var(--text-md); }
  .alert--danger { background: var(--color-danger-soft); color: var(--color-danger); }
  .alert--warning { background: var(--color-warning-soft); color: var(--color-warning); }
  .alert--info { background: var(--color-action-soft); color: var(--color-text); }

  .card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); }
  .card__body { padding: var(--space-6); display: grid; gap: var(--space-4); }

  .status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
  .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .status--success { background: var(--color-success-soft); color: var(--color-success); }
  .status--warning { background: var(--color-warning-soft); color: var(--color-warning); }
  .status--danger { background: var(--color-danger-soft); color: var(--color-danger); }
  .status--neutral { background: var(--color-surface-hover); color: var(--color-text-muted); }

  .badge { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 6px; background: var(--badge-ink); color: var(--badge-bg); font-size: 11px; font-weight: 800; }
  [data-color="petroleo"] { --badge-ink: var(--company-petroleo-ink); --badge-bg: var(--company-petroleo-bg); }
  [data-color="violeta"] { --badge-ink: var(--company-violeta-ink); --badge-bg: var(--company-violeta-bg); }
  [data-color="oxido"] { --badge-ink: var(--company-oxido-ink); --badge-bg: var(--company-oxido-bg); }
  [data-color="pino"] { --badge-ink: var(--company-pino-ink); --badge-bg: var(--company-pino-bg); }
  [data-color="anil"] { --badge-ink: var(--company-anil-ink); --badge-bg: var(--company-anil-bg); }
  [data-color="mostaza"] { --badge-ink: var(--company-mostaza-ink); --badge-bg: var(--company-mostaza-bg); }

  @media (width <= 720px) {
    .button, .input { min-height: var(--touch-min); }
  }

  .empty { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-8); }
  .empty p { color: var(--color-text-muted); max-width: 56ch; }
}

@layer components {
  .alert--success { background: var(--color-success-soft); color: var(--color-success); align-items: center; }

  .form { display: grid; gap: var(--space-5); }
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
  .form-grid .field--wide { grid-column: 1 / -1; }
  .field__hint { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .field__error { font-size: var(--text-sm); color: var(--color-danger); font-weight: 500; }
  .input[aria-invalid="true"] { border-color: var(--color-danger); }
  select.input { appearance: auto; }
  .form__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; padding-top: var(--space-2); }

  fieldset.form { border: 0; margin: 0; min-width: 0; }
  fieldset.form > legend { padding: 0; float: left; width: 100%; }
  fieldset.form > legend + * { clear: both; }

  /* Un grupo de casillas dentro de un formulario: sin el marco que el navegador le pone. */
  fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
  fieldset.field > legend { padding: 0; margin-bottom: var(--space-2); }
  .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-2) var(--space-5); }
  .check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--touch-min); padding: var(--space-2) 0; font-size: var(--text-md); }
  .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-action); }
  .check small { display: block; color: var(--color-text-subtle); font-size: var(--text-sm); }

  /* position: relative para que lo absoluto de adentro (el rótulo oculto de una columna) no
     escape del recorte y ensanche la página en el teléfono. */
  .table-wrap { position: relative; overflow-x: auto; }
  .table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
  .table th { height: 40px; padding: 0 var(--space-4); text-align: left; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-subtle); white-space: nowrap; }
  .table td { height: 52px; padding: var(--space-2) var(--space-4); }
  .table tbody tr:nth-child(odd) td { background: var(--color-surface-alt); }
  .table td:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
  .table td:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
  .table .actions { text-align: right; white-space: nowrap; }
  .toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
  .toolbar:empty { display: none; }
  .inline-form { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
  .row-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
  .table .tree-child { padding-left: var(--space-8); }

  .toolbar--split { justify-content: space-between; align-items: center; }
  .search { display: flex; flex-wrap: wrap; flex: 1 1 320px; gap: var(--space-2); max-width: 680px; }
  .search .input { flex: 1 1 220px; min-width: 0; }
  .search select.input { flex: 0 1 200px; }
  .pager { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; }
  .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
  .facts dt { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .facts dd { margin: 2px 0 0; font-weight: 600; }
  textarea.input { height: auto; min-height: 80px; padding-top: var(--space-2); resize: vertical; }

  .name-cell { display: inline-flex; align-items: center; gap: var(--space-3); }
  .status-text { color: var(--color-text-subtle); font-size: var(--text-sm); }
  .table .amount { white-space: nowrap; }

  /* El monto no se parte, pero su renglón de apoyo sí: si no, empuja la tabla a lo ancho en el teléfono. */
  .table .amount .table__sub { white-space: normal; }
  .table__sub { display: block; font-size: var(--text-sm); color: var(--color-text-subtle); }

  .stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); }
  .stat { display: grid; gap: var(--space-1); padding: var(--space-5); }
  .stat__label { font-size: var(--text-sm); color: var(--color-text-muted); }
  .stat__value { font-size: var(--text-xl); font-weight: 700; }
  .stat__note { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .stat__note--warning { color: var(--color-warning); font-weight: 500; }

  .section-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-4); }
  .section-link { display: grid; gap: var(--space-2); padding: var(--space-5); color: var(--color-text); text-decoration: none; }
  .section-link:hover { background: var(--color-surface-alt); }
  .section-link span { font-size: var(--text-md); color: var(--color-text-muted); }
  .section-link .icon-chip { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--color-action-soft); color: var(--color-action); }

  @media (width <= 720px) {
    .form-grid { grid-template-columns: 1fr; }

    /* En el teléfono cada fila de la tabla es un bloque: nombre, datos y acción uno debajo
       del otro, sin desplazar de lado. */
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; }
    .table--stack tr { padding: var(--space-3); border-radius: var(--radius-control); }
    .table--stack tbody tr:nth-child(odd) { background: var(--color-surface-alt); }
    .table--stack tbody tr:nth-child(odd) td { background: none; }
    .table--stack td { height: auto; padding: var(--space-1) 0; }
    .table--stack .actions { text-align: left; padding-top: var(--space-2); }

    /* Sin encabezados a la vista, cada dato lleva su rótulo delante. */
    .table--stack td[data-label] { display: flex; justify-content: space-between; gap: var(--space-3); }
    .table--stack td[data-label]::before { content: attr(data-label); color: var(--color-text-subtle); font-family: var(--font-sans, inherit); font-size: var(--text-sm); white-space: normal; }
  }
}

@layer components {
  /* Un documento como J-123456789 no se parte en el guion: "J-" solo en un renglón no se lee. */
  .table .nowrap { white-space: nowrap; }
}

@layer components {
  /* Pestañas de una lista: cada una es un enlace a la misma lista filtrada, con su cantidad.
     La puesta no se quita tocándola otra vez (CLAUDE.md, sección 6). */
  .tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

  .tab {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
    background: var(--color-surface-hover); color: var(--color-text-muted); font-size: var(--text-md); font-weight: 600; text-decoration: none;
  }
  .tab:hover { color: var(--color-text); }
  .tab[aria-current="page"] { background: var(--color-action-soft); color: var(--color-action); }
  .tab__count { font-size: var(--text-xs); font-weight: 700; }

  /* Totales de un documento: rótulo a la izquierda, montos alineados a la derecha. */
  .totals th[scope="row"] { font-weight: 500; color: var(--color-text-muted); }
  .totals tr:last-child th, .totals tr:last-child td { font-weight: 700; color: var(--color-text); }

  @media (width <= 720px) {
    .tab { min-height: 44px; }

    /* En el teléfono no caben tres columnas con montos en bolívares: cada concepto lleva su
       rótulo a la izquierda y los dos montos uno encima del otro, a la derecha. */
    .totals thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .totals tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); }
    .totals tbody tr:nth-child(odd) { background: var(--color-surface-alt); }
    .totals tbody tr:nth-child(odd) td { background: none; }
    .totals th[scope="row"], .totals td { height: auto; padding: 0; }
    .totals th[scope="row"] { grid-row: span 2; white-space: normal; }
    .totals td { text-align: right; }
  }
}

@layer components {
  /* Una tabla de muchas columnas, como un libro fiscal: menos aire a los lados para que quepa
     entera en una pantalla de 1280 sin desplazarse. */
  .table--dense th, .table--dense td { padding-left: var(--space-2); padding-right: var(--space-2); }
}

@layer components {
  /* Indicador del Inicio con su enlace al pie (docs/DISENO.md, "Indicadores"). */
  .stat__label { display: flex; align-items: center; gap: var(--space-2); }
  .stat .icon-chip { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--color-action-soft); color: var(--color-action); }

  .stat__link {
    display: inline-flex; align-items: center; min-height: 40px; margin-top: var(--space-2); padding-top: var(--space-2);
    color: var(--color-action); font-size: var(--text-md); font-weight: 600; text-decoration: none;
  }
  .stat__link:hover { text-decoration: underline; }

  @media (width <= 720px) {
    .stat__link { min-height: 44px; }
  }
}