/* Aparejo — componentes. Clases .apj-*, consumidas por los .jsx del sistema.
   Sirven igual en HTML plano. Todo el color sale de las variables de tokens/. */

/* BOTÓN ---------------------------------------------------------------- */
.apj-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-label);font-weight:var(--fw-bold);font-size:14px;letter-spacing:var(--ls-button);text-transform:uppercase;line-height:1;min-height:var(--control-h);padding:0 var(--space-5);border:var(--border-width-strong) solid transparent;border-radius:var(--radius-2);text-decoration:none;cursor:pointer;white-space:nowrap;transition:var(--transition-control)}
.apj-btn:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
.apj-btn--sm{min-height:var(--control-h-sm);font-size:13px;padding:0 var(--space-3)}
.apj-btn--lg{min-height:var(--control-h-lg);font-size:15px;padding:0 var(--space-6)}
.apj-btn--block{width:100%}
.apj-btn__note{font-family:var(--font-data);font-weight:var(--fw-medium);font-size:12px;letter-spacing:0;text-transform:none;opacity:.8}
.apj-btn--primary{background:var(--navy-800);border-color:var(--navy-800);color:var(--text-inverse)}
.apj-btn--primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.apj-btn--primary:active{background:var(--navy-900);border-color:var(--navy-900)}
.apj-btn--accent{background:var(--yellow-500);border-color:var(--yellow-500);color:var(--text-on-accent)}
.apj-btn--accent:hover{background:var(--yellow-600);border-color:var(--yellow-600)}
.apj-btn--accent:active{background:#C08A00;border-color:#C08A00}
.apj-btn--accent:focus-visible{outline-color:var(--navy-800)}
.apj-btn--secondary{background:transparent;border-color:var(--navy-800);color:var(--navy-800)}
.apj-btn--secondary:hover{background:var(--stone-100)}
.apj-btn--secondary:active{background:var(--stone-200)}
.apj-btn--text{background:transparent;border-color:transparent;color:var(--navy-800);padding:0 var(--space-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--stone-400)}
.apj-btn--text:hover{color:var(--yellow-600);text-decoration-color:currentColor}
.apj-btn--danger{background:var(--error-500);border-color:var(--error-500);color:#fff}
.apj-btn--danger:hover{background:var(--error-600);border-color:var(--error-600)}
.apj-btn[disabled],.apj-btn[aria-disabled="true"]{background:var(--stone-100);border-color:var(--stone-200);color:var(--text-disabled);cursor:not-allowed;text-decoration:none}
.apj-btn--on-inverse.apj-btn--secondary{border-color:var(--navy-200);color:var(--text-inverse)}
.apj-btn--on-inverse.apj-btn--secondary:hover{background:var(--navy-700)}
.apj-btn--on-inverse.apj-btn--text{color:var(--text-inverse)}

/* CAMPO ----------------------------------------------------------------- */
.apj-field{display:flex;flex-direction:column;gap:var(--space-2)}
.apj-field__label{font-family:var(--font-label);font-weight:var(--fw-bold);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);display:flex;align-items:baseline;gap:var(--space-2)}
.apj-field__req{color:var(--error-600)}
.apj-field__opt{font-family:var(--font-body);font-weight:var(--fw-regular);letter-spacing:0;text-transform:none;font-size:var(--fs-legal);color:var(--text-muted)}
.apj-field__hint{font-size:var(--fs-caption);color:var(--text-muted);line-height:var(--lh-caption)}
.apj-field__error{font-size:var(--fs-caption);color:var(--error-600);font-weight:var(--fw-medium);display:flex;gap:var(--space-2)}
.apj-field__error::before{content:"!";font-family:var(--font-data);font-weight:var(--fw-bold);background:var(--error-500);color:#fff;width:16px;height:16px;border-radius:var(--radius-1);display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none;margin-top:1px}
.apj-input,.apj-textarea,.apj-select{font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--text-primary);background:var(--stone-000);border:var(--border-width) solid var(--border-field);border-radius:var(--radius-2);padding:0 var(--space-3);min-height:var(--control-h);width:100%;transition:var(--transition-control);box-shadow:inset 0 1px 1px rgba(15,27,45,.04)}
.apj-input--mono,.apj-textarea--mono{font-family:var(--font-data);font-size:15px}
.apj-textarea{padding:var(--space-3);min-height:120px;resize:vertical;line-height:1.6}
.apj-select{appearance:none;padding-right:var(--space-6);background-image:linear-gradient(45deg,transparent 50%,var(--navy-600) 50%),linear-gradient(135deg,var(--navy-600) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.apj-input::placeholder,.apj-textarea::placeholder{color:var(--stone-500)}
.apj-input:hover,.apj-textarea:hover,.apj-select:hover{border-color:var(--border-field-hover)}
.apj-input:focus-visible,.apj-textarea:focus-visible,.apj-select:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:0;border-color:var(--navy-800)}
.apj-input[aria-invalid="true"],.apj-textarea[aria-invalid="true"]{border-color:var(--error-500);border-width:var(--border-width-strong);background:var(--error-100)}
.apj-input[disabled],.apj-textarea[disabled],.apj-select[disabled]{background:var(--stone-100);color:var(--text-disabled);cursor:not-allowed;box-shadow:none}
.apj-input--sm{min-height:var(--control-h-sm);font-size:15px}
.apj-field__count{font-family:var(--font-data);font-size:var(--fs-legal);color:var(--text-muted);align-self:flex-end}

/* DISTINTIVO DE UNIDAD --------------------------------------------------- */
.apj-unit{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-data);font-weight:var(--fw-semibold);font-size:var(--fs-unit);line-height:1;letter-spacing:0;padding:3px 6px;border-radius:var(--radius-1);background:var(--yellow-500);color:var(--yellow-ink);min-width:28px;text-transform:none;white-space:nowrap}
.apj-unit--quiet{background:var(--stone-100);color:var(--navy-600);border:var(--border-width) solid var(--stone-300)}
.apj-unit--inverse{background:transparent;color:var(--yellow-500);border:var(--border-width) solid var(--yellow-500)}
.apj-unit--chapter{background:var(--navy-800);color:var(--yellow-500);border-radius:var(--radius-0)}
.apj-unit--ok{background:var(--ok-100);color:var(--ok-600);border:var(--border-width) solid var(--ok-300)}
.apj-unit--warn{background:var(--warn-100);color:var(--warn-600);border:var(--border-width) solid var(--warn-300)}
.apj-unit--error{background:var(--error-100);color:var(--error-600);border:var(--border-width) solid var(--error-300)}

/* TABLA DE PARTIDAS ------------------------------------------------------ */
.apj-table-wrap{border:var(--border-width) solid var(--border-default);border-radius:var(--radius-3);background:var(--surface-card);overflow:hidden}
.apj-table-toolbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width) solid var(--border-subtle);background:var(--stone-050);flex-wrap:wrap}
.apj-table-toolbar__title{font-family:var(--font-label);font-weight:var(--fw-bold);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary)}
.apj-table-toolbar__spacer{flex:1}
.apj-table-scroll{overflow-x:auto}
.apj-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body-sm);line-height:1.4}
.apj-table thead th{position:sticky;top:0;z-index:2;background:var(--navy-800);color:var(--text-inverse);font-family:var(--font-label);font-weight:var(--fw-bold);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;text-align:left;padding:var(--space-2) var(--space-3);white-space:nowrap;border-right:var(--border-width) solid var(--border-inverse)}
.apj-table thead th:last-child{border-right:0}
.apj-table th.apj-num,.apj-table td.apj-num{text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.apj-table td{padding:var(--space-2) var(--space-3);border-bottom:var(--border-width) solid var(--border-subtle);vertical-align:top;height:var(--row-h-dense)}
.apj-table tbody tr:last-child td{border-bottom:0}
.apj-table--zebra tbody tr:nth-child(even) td{background:var(--surface-row-alt)}
.apj-table tbody tr:hover td{background:var(--surface-row-hover)}
.apj-table tbody tr[aria-selected="true"] td{background:var(--surface-row-selected);box-shadow:inset 3px 0 0 var(--accent)}
.apj-table tbody tr.apj-row--chapter td{background:var(--navy-800);color:var(--text-inverse);font-family:var(--font-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;font-size:var(--fs-label);height:auto;padding:var(--space-2) var(--space-3)}
.apj-table tbody tr.apj-row--chapter:hover td{background:var(--navy-700)}
.apj-table tbody tr.apj-row--chapter .apj-code{color:var(--yellow-500)}
.apj-code{font-family:var(--font-data);font-size:var(--fs-data-sm);color:var(--text-muted);white-space:nowrap}
.apj-cell-title{font-weight:var(--fw-semibold);color:var(--text-primary);display:block}
.apj-cell-desc{color:var(--text-secondary);font-size:var(--fs-legal);line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.apj-table tbody tr[aria-selected="true"] .apj-cell-desc{-webkit-line-clamp:unset;overflow:visible}
.apj-table tfoot td{background:var(--stone-100);border-top:var(--border-width-strong) solid var(--navy-800);font-family:var(--font-data);font-weight:var(--fw-semibold);padding:var(--space-3);font-variant-numeric:tabular-nums}
.apj-table__empty{padding:var(--space-7) var(--space-4);text-align:center;color:var(--text-muted)}
.apj-table tbody tr:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:-3px}
@media(max-width:760px){
  .apj-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .apj-table--stack tbody tr{display:block;border-bottom:var(--border-width) solid var(--border-default);padding:var(--space-2) 0}
  .apj-table--stack tbody tr.apj-row--chapter{padding:0}
  .apj-table--stack tbody td{display:flex;gap:var(--space-3);border:0;padding:var(--space-1) var(--space-4);height:auto;align-items:baseline}
  .apj-table--stack tbody td::before{content:attr(data-label);font-family:var(--font-label);font-weight:var(--fw-bold);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);flex:0 0 84px}
  .apj-table--stack tbody td.apj-num{justify-content:flex-start;text-align:left}
  .apj-table--stack tbody tr.apj-row--chapter td::before{content:none}
  .apj-table--stack .apj-cell-desc{-webkit-line-clamp:3}
}

/* TARJETA ---------------------------------------------------------------- */
.apj-card{background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-3);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.apj-card--sunken{background:var(--stone-100);border-color:var(--border-subtle)}
.apj-card--inverse{background:var(--surface-inverse);border-color:var(--navy-700);color:var(--text-inverse)}
.apj-card--inverse .apj-card__body{color:var(--text-inverse-secondary)}
.apj-card--flat{border-radius:var(--radius-0);border-left:0;border-right:0}
.apj-card--interactive{cursor:pointer;transition:var(--transition-control),box-shadow var(--dur-fast) var(--ease-out);text-decoration:none;color:inherit}
.apj-card--interactive:hover{border-color:var(--navy-400);box-shadow:var(--shadow-1)}
.apj-card--interactive:active{background:var(--stone-050)}
.apj-card--interactive:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
.apj-card__key{width:36px;height:36px;border-radius:var(--radius-2);background:var(--yellow-100);border:var(--border-width) solid var(--yellow-300);display:grid;place-items:center;font-family:var(--font-data);font-weight:var(--fw-semibold);font-size:13px;color:var(--yellow-ink)}
.apj-card__title{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-heading)}
.apj-card__body{color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.55;text-wrap:pretty}
.apj-card__footer{margin-top:auto;padding-top:var(--space-3);border-top:var(--border-width) solid var(--border-subtle);display:flex;align-items:center;gap:var(--space-3)}

/* ACORDEÓN --------------------------------------------------------------- */
.apj-accordion{border-top:var(--border-width) solid var(--border-subtle)}
.apj-accordion__item{border-bottom:var(--border-width) solid var(--border-subtle)}
.apj-accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);background:none;border:0;padding:var(--space-4) var(--space-1);min-height:var(--touch-min);text-align:left;font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-h4);line-height:1.35;color:var(--text-primary);cursor:pointer;transition:var(--transition-control)}
.apj-accordion__trigger:hover{color:var(--navy-600)}
.apj-accordion__trigger:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:-1px}
.apj-accordion__sign{flex:none;width:26px;height:26px;border:var(--border-width) solid var(--border-default);border-radius:var(--radius-1);display:grid;place-items:center;font-family:var(--font-data);font-size:16px;color:var(--navy-600);transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.apj-accordion__trigger[aria-expanded="true"] .apj-accordion__sign{transform:rotate(45deg);background:var(--yellow-500);border-color:var(--yellow-500);color:var(--yellow-ink)}
.apj-accordion__panel{padding:0 var(--space-1) var(--space-4);color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.6;max-width:var(--measure-prose);text-wrap:pretty}

/* BARRA DE NAVEGACIÓN ----------------------------------------------------- */
.apj-nav{position:sticky;top:0;z-index:30;background:var(--stone-000);border-bottom:var(--border-width) solid var(--border-default)}
.apj-nav--inverse{background:var(--navy-800);border-bottom-color:var(--navy-700)}
.apj-nav__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);height:64px;display:flex;align-items:center;gap:var(--space-5)}
@media(min-width:760px){.apj-nav__inner{padding:0 var(--container-pad-lg)}}
.apj-nav--wide .apj-nav__inner{max-width:none}
.apj-nav__brand{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;flex:none}
.apj-nav__brand img{height:26px;width:auto}
.apj-nav__links{display:none;align-items:center;gap:var(--space-1);flex:1}
@media(min-width:900px){.apj-nav__links{display:flex}}
.apj-nav__link{font-family:var(--font-label);font-weight:var(--fw-semibold);font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;padding:var(--space-2) var(--space-3);min-height:var(--touch-min);display:inline-flex;align-items:center;border-bottom:var(--border-width-strong) solid transparent;transition:var(--transition-control)}
.apj-nav__link:hover{color:var(--text-primary);background:var(--stone-100)}
.apj-nav__link[aria-current]{color:var(--text-primary);border-bottom-color:var(--accent)}
.apj-nav--inverse .apj-nav__link{color:var(--navy-200)}
.apj-nav--inverse .apj-nav__link:hover{color:#fff;background:var(--navy-700)}
.apj-nav--inverse .apj-nav__link[aria-current]{color:#fff}
.apj-nav__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.apj-nav__burger{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-2);background:none;cursor:pointer;flex-direction:column;gap:4px;padding:0}
.apj-nav__burger span{display:block;width:18px;height:2px;background:var(--navy-800)}
.apj-nav--inverse .apj-nav__burger{border-color:var(--border-inverse)}
.apj-nav--inverse .apj-nav__burger span{background:#fff}
@media(min-width:900px){.apj-nav__burger{display:none}}
.apj-nav__drawer{display:flex;flex-direction:column;padding:var(--space-2) var(--container-pad) var(--space-4);border-top:var(--border-width) solid var(--border-subtle);gap:var(--space-1)}
.apj-nav__drawer .apj-nav__link{border-bottom:0;border-left:var(--border-width-strong) solid transparent;width:100%}
.apj-nav__drawer .apj-nav__link[aria-current]{border-left-color:var(--accent)}
@media(min-width:900px){.apj-nav__drawer{display:none}}

/* AVISO DE ESTADO --------------------------------------------------------- */
.apj-alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--border-default);border-left-width:var(--rule-accent);border-radius:var(--radius-2);background:var(--stone-100);font-size:var(--fs-body-sm);line-height:1.5;align-items:flex-start}
.apj-alert__mark{flex:none;width:22px;height:22px;border-radius:var(--radius-1);display:grid;place-items:center;font-family:var(--font-data);font-weight:var(--fw-bold);font-size:13px;color:#fff;background:var(--navy-800);margin-top:1px}
.apj-alert__title{font-family:var(--font-label);font-weight:var(--fw-bold);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;display:block;margin-bottom:2px}
.apj-alert__body{color:var(--text-secondary);text-wrap:pretty}
.apj-alert__close{margin-left:auto;background:none;border:0;cursor:pointer;font-family:var(--font-data);font-size:15px;color:var(--text-muted);width:var(--space-6);height:var(--space-6);border-radius:var(--radius-1);flex:none}
.apj-alert__close:hover{background:rgba(15,27,45,.08);color:var(--text-primary)}
.apj-alert--info{background:var(--stone-100);border-color:var(--stone-300);border-left-color:var(--navy-800)}
.apj-alert--ok{background:var(--ok-100);border-color:var(--ok-300);border-left-color:var(--ok-500)}
.apj-alert--ok .apj-alert__mark{background:var(--ok-500)}
.apj-alert--ok .apj-alert__title{color:var(--ok-600)}
.apj-alert--warn{background:var(--warn-100);border-color:var(--warn-300);border-left-color:var(--warn-500)}
.apj-alert--warn .apj-alert__mark{background:var(--warn-500)}
.apj-alert--warn .apj-alert__title{color:var(--warn-600)}
.apj-alert--error{background:var(--error-100);border-color:var(--error-300);border-left-color:var(--error-500)}
.apj-alert--error .apj-alert__mark{background:var(--error-500)}
.apj-alert--error .apj-alert__title{color:var(--error-600)}
.apj-alert--accent{background:var(--yellow-100);border-color:var(--yellow-300);border-left-color:var(--yellow-500)}
.apj-alert--accent .apj-alert__mark{background:var(--yellow-500);color:var(--yellow-ink)}
.apj-alert--accent .apj-alert__title{color:var(--yellow-ink)}