/**
 * Componentes base compartidos — "Industrial Precision".
 *
 * Capa común de panel (app.directoriopetrolero) y portal de clientes
 * (/clientes). Solo define la forma, el color y las medidas del control; la
 * composición de cada pantalla sigue en el CSS de cada app.
 *
 * REGLAS
 * - Todo valor sale de shared/assets/css/dp-tokens.css. Aquí no hay literales
 *   de color, radio ni tamaño: si hace falta un valor nuevo, se añade un token.
 * - Alturas: control 44 (--dp-control-height), control compacto 36, fila de
 *   tabla 48 (--dp-row-height).
 * - Radios: control 8, tarjeta 12, badge 4.
 * - Contraste verificado en shared/tests/contraste_tokens.php. La acción
 *   primaria usa --dp-action-strong (naranja 700): el naranja 500 de marca no
 *   llega a 4,5:1 con texto blanco.
 *
 * Carga: después de dp-tokens.css y antes del CSS propio de la app, para que
 * la app pueda ajustar casos concretos sin !important.
 */

/* ── Foco ──────────────────────────────────────────────────────────────────── */
/* Un solo anillo de foco en las dos apps. :where() mantiene la especificidad en
   0 para que nunca gane a un foco propio de un componente. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--dp-focus-ring-width) solid var(--dp-action);
    outline-offset: var(--dp-focus-ring-offset);
}

/* ── Botón ─────────────────────────────────────────────────────────────────── */
.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-space-2);
    min-height: var(--dp-control-height);
    padding: 0 var(--dp-space-5);
    border: var(--dp-border-width) solid transparent;
    border-radius: var(--dp-radius-control);
    background: var(--dp-surface);
    color: var(--dp-ink);
    font-family: inherit;
    font-size: var(--dp-fs-label);
    font-weight: var(--dp-fw-semibold);
    line-height: var(--dp-lh-label);
    white-space: nowrap;
    cursor: pointer;
}

.dp-btn > svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* Acción primaria: naranja 700. El 500 de marca queda para acentos y bordes,
   no para texto blanco encima (ver informe de contraste). */
.dp-btn.is-primary {
    background: var(--dp-action-strong);
    color: var(--dp-action-ink);
}

.dp-btn.is-primary:hover:not(:disabled) {
    background: var(--dp-navy-700);
}

.dp-btn.is-outline {
    border-color: var(--dp-action-strong);
    background: var(--dp-surface);
    color: var(--dp-action-strong);
}

.dp-btn.is-outline:hover:not(:disabled) {
    background: var(--dp-orange-50);
}

.dp-btn.is-ghost {
    border-color: var(--dp-line-strong);
    background: var(--dp-surface);
    color: var(--dp-ink);
}

.dp-btn.is-ghost:hover:not(:disabled) {
    border-color: var(--dp-ink-muted);
    background: var(--dp-surface-sunken);
}

.dp-btn.is-danger {
    background: var(--dp-danger);
    color: var(--dp-action-ink);
}

.dp-btn.is-small {
    min-height: var(--dp-control-height-sm);
    padding: 0 var(--dp-space-3);
    font-size: var(--dp-fs-caption);
}

.dp-btn:disabled,
.dp-btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Campo ─────────────────────────────────────────────────────────────────── */
.dp-field {
    display: block;
    margin-bottom: var(--dp-space-4);
}

.dp-field > span,
.dp-field > label {
    display: block;
    margin-bottom: var(--dp-space-2);
    color: var(--dp-ink);
    font-size: var(--dp-fs-label);
    font-weight: var(--dp-fw-semibold);
    line-height: var(--dp-lh-label);
}

.dp-input,
.dp-select,
.dp-textarea {
    width: 100%;
    min-height: var(--dp-control-height);
    padding: 0 var(--dp-space-3);
    border: var(--dp-border-width) solid var(--dp-field-border);
    border-radius: var(--dp-radius-control);
    background: var(--dp-surface);
    color: var(--dp-ink);
    font-family: inherit;
    font-size: var(--dp-fs-body-sm);
}

.dp-textarea {
    padding: var(--dp-space-3);
    line-height: var(--dp-lh-body);
}

.dp-input:hover:not(:disabled),
.dp-select:hover:not(:disabled),
.dp-textarea:hover:not(:disabled) {
    border-color: var(--dp-ink-muted);
}

/* El borde enfocado usa el naranja 600, no el 500: el 500 se queda en 2,94:1
   sobre blanco y el borde es parte del indicador de foco. */
.dp-input:focus,
.dp-select:focus,
.dp-textarea:focus {
    border-color: var(--dp-orange-600);
    box-shadow: 0 0 0 3px var(--dp-focus-ring);
    outline: 0;
}

.dp-input:disabled,
.dp-select:disabled,
.dp-textarea:disabled {
    background: var(--dp-surface-sunken);
    color: var(--dp-ink-subtle);
    cursor: not-allowed;
}

.dp-field-hint {
    display: block;
    margin-top: var(--dp-space-1);
    color: var(--dp-ink-muted);
    font-size: var(--dp-fs-caption);
    line-height: var(--dp-lh-caption);
}

.dp-field-error {
    display: block;
    margin-top: var(--dp-space-1);
    color: var(--dp-danger);
    font-size: var(--dp-fs-caption);
    line-height: var(--dp-lh-caption);
}

/* ── Casillas y radios ─────────────────────────────────────────────────────── */
/* El control mide 18 px y va en la misma fila que su texto; la etiqueta entera es
   el área de toque (44 px de alto). Nunca heredan el tamaño de un campo de texto.

   <label class="dp-check"><input type="checkbox"> <span class="dp-check-text">
     <strong>Título</strong><small>Descripción opcional</small></span></label> */
.dp-check {
    display: flex;
    align-items: flex-start;
    gap: var(--dp-space-3);
    min-height: var(--dp-control-height);
    padding: var(--dp-space-3) 0;
    color: var(--dp-ink);
    font-size: var(--dp-fs-body-sm);
    font-weight: var(--dp-fw-regular);
    line-height: var(--dp-lh-body-sm);
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.dp-check > input[type="checkbox"],
.dp-check > input[type="radio"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 1px 0 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    accent-color: var(--dp-action-strong);
    cursor: pointer;
}

.dp-check-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dp-check-text strong {
    font-weight: var(--dp-fw-semibold);
}

.dp-check-text small {
    color: var(--dp-ink-muted);
    font-size: var(--dp-fs-caption);
    line-height: var(--dp-lh-caption);
}

.dp-check.is-disabled,
.dp-check > input:disabled + .dp-check-text {
    color: var(--dp-ink-subtle);
    cursor: not-allowed;
}

/* Grupo de opciones: fieldset sin el marco del navegador, con leyenda legible. */
.dp-choice-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.dp-choice-group > legend {
    margin-bottom: var(--dp-space-1);
    padding: 0;
    color: var(--dp-ink);
    font-size: var(--dp-fs-label);
    font-weight: var(--dp-fw-semibold);
    line-height: var(--dp-lh-label);
}

.dp-choice-group.is-boxed {
    padding: var(--dp-space-4) var(--dp-space-5) var(--dp-space-2);
    border: var(--dp-border-width) solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    background: var(--dp-surface);
}

.dp-choice-group.is-boxed > legend {
    float: left;
    width: 100%;
    margin-bottom: var(--dp-space-2);
    font-size: var(--dp-fs-h4);
    line-height: var(--dp-lh-h4);
}

.dp-choice-group.is-boxed > legend + * {
    clear: both;
}

.dp-choice-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dp-space-3);
}

.dp-choice-list {
    display: grid;
    column-gap: var(--dp-space-6);
}

.dp-choice-list.is-inline {
    display: flex;
    flex-wrap: wrap;
}

.dp-choice-list.is-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* ── Buscador de empresas (shared/assets/js/dp-combobox.js) ────────────────── */
.dp-combobox {
    position: relative;
    display: block;
    min-width: 0;
}

/* Las piezas ocultas del buscador tienen display propio (flex/block), que anula el atributo
   hidden si la hoja de la app no trae [hidden]{display:none}; en Clientes la lista de chips
   vacía dejaba 8px de margen encima del campo. */
.dp-combobox [hidden] {
    display: none !important;
}

/* El input en bloque: en línea dejaba el hueco de la línea base (~8px) bajo el campo y, en las
   rejillas alineadas abajo, el buscador quedaba más alto que los select vecinos. */
.dp-combobox-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.dp-combobox-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-space-1);
    margin: 0 0 var(--dp-space-2);
    padding: 0;
    list-style: none;
}

.dp-combobox-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-1);
    max-width: 100%;
    padding: 2px 2px 2px var(--dp-space-2);
    border-radius: var(--dp-radius-badge);
    background: var(--dp-neutral-bg);
    color: var(--dp-ink);
    font-size: var(--dp-fs-caption);
    line-height: var(--dp-lh-caption);
}

.dp-combobox-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-combobox-chip button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--dp-radius-badge);
    background: transparent;
    color: var(--dp-ink-muted);
    font-size: 16px;
    cursor: pointer;
}

.dp-combobox-chip button:hover {
    background: var(--dp-surface);
    color: var(--dp-danger);
}

.dp-combobox-list {
    position: absolute;
    z-index: 60;
    top: 100%;
    left: 0;
    right: 0;
    min-width: min(360px, 90vw);
    max-height: 320px;
    margin: var(--dp-space-1) 0 0;
    padding: var(--dp-space-1);
    overflow: auto;
    list-style: none;
    border: var(--dp-border-width) solid var(--dp-line);
    border-radius: var(--dp-radius-control);
    background: var(--dp-surface);
    box-shadow: var(--dp-elev-2);
}

.dp-combobox-option {
    display: grid;
    gap: 2px;
    padding: var(--dp-space-2) var(--dp-space-3);
    border-radius: var(--dp-radius-badge);
    color: var(--dp-ink);
    cursor: pointer;
}

.dp-combobox-option strong {
    font-size: var(--dp-fs-body-sm);
    font-weight: var(--dp-fw-medium);
}

.dp-combobox-option small {
    color: var(--dp-ink-muted);
    font-size: var(--dp-fs-caption);
    line-height: var(--dp-lh-caption);
}

.dp-combobox-option mark {
    padding: 0;
    background: var(--dp-orange-100);
    color: inherit;
}

.dp-combobox-option:hover,
.dp-combobox-option.is-active {
    background: var(--dp-surface-sunken);
}

.dp-combobox-option.is-active {
    box-shadow: inset 3px 0 0 var(--dp-orange-600);
}

.dp-combobox-option.is-chosen strong::after {
    content: " · elegida";
    color: var(--dp-success);
    font-weight: var(--dp-fw-regular);
}

.dp-combobox-empty {
    padding: var(--dp-space-2) var(--dp-space-3);
    color: var(--dp-ink-muted);
    font-size: var(--dp-fs-body-sm);
}

/* Referencia de la opción elegida: dentro del campo, a la derecha. Fuera del flujo para que
   elegir no cambie el alto de la fila (antes empujaba el campo y desalineaba el formulario). */
.dp-combobox-detail {
    position: absolute;
    top: 50%;
    right: var(--dp-space-2);
    max-width: 45%;
    transform: translateY(-50%);
    overflow: hidden;
    padding: 2px var(--dp-space-2);
    border-radius: var(--dp-radius-badge);
    background: var(--dp-surface-sunken);
    color: var(--dp-ink-muted);
    font-size: var(--dp-fs-caption);
    font-weight: var(--dp-fw-regular);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.dp-combobox[data-multiple] .dp-combobox-detail,
.dp-combobox-chips:not([hidden]) ~ .dp-combobox-detail {
    display: none;
}

.dp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Aviso ─────────────────────────────────────────────────────────────────── */
/* El color es refuerzo, no el único indicador: el texto del aviso dice siempre
   qué pasó, y las vistas le ponen role="alert" o role="status". */
.dp-alert {
    display: flex;
    align-items: center;
    gap: var(--dp-space-2);
    margin-bottom: var(--dp-space-4);
    padding: var(--dp-space-3) var(--dp-space-4);
    border: var(--dp-border-width) solid var(--dp-line);
    border-radius: var(--dp-radius-control);
    background: var(--dp-surface);
    color: var(--dp-ink);
    font-size: var(--dp-fs-body-sm);
    line-height: var(--dp-lh-body-sm);
}

.dp-alert.is-success {
    border-color: var(--dp-success);
    background: var(--dp-success-bg);
    color: var(--dp-success);
}

.dp-alert.is-error,
.dp-alert.is-danger {
    border-color: var(--dp-danger);
    background: var(--dp-danger-bg);
    color: var(--dp-danger);
}

.dp-alert.is-warning {
    border-color: var(--dp-warning);
    background: var(--dp-warning-bg);
    color: var(--dp-warning);
}

.dp-alert.is-info {
    border-color: var(--dp-info);
    background: var(--dp-info-bg);
    color: var(--dp-info);
}

/* ── Tarjeta ───────────────────────────────────────────────────────────────── */
/* Nivel 0: la tarjeta en reposo se define por el borde, no por la sombra. */
.dp-card {
    padding: var(--dp-space-4);
    border: var(--dp-border-width) solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    background: var(--dp-surface);
    box-shadow: var(--dp-elev-0);
}

.dp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dp-space-4);
    margin-bottom: var(--dp-space-3);
}

/* ── Badge ─────────────────────────────────────────────────────────────────── */
/* Badge con punto: el color por sí solo no distingue estados para quien no lo
   percibe bien, así que el punto acompaña siempre al texto. Viene del panel
   (.pnl-badge) y ahora lo comparten las dos apps. */
.dp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-2);
    width: fit-content;
    padding: var(--dp-space-1) var(--dp-space-2);
    border-radius: var(--dp-radius-badge);
    background: var(--dp-neutral-bg);
    color: var(--dp-neutral);
    font-size: var(--dp-fs-caption);
    font-weight: var(--dp-fw-medium);
    line-height: var(--dp-lh-caption);
}

.dp-badge::before {
    content: '';
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: var(--dp-radius-pill);
    background: currentColor;
}

.dp-badge.is-success { background: var(--dp-success-bg); color: var(--dp-success); }
.dp-badge.is-warning { background: var(--dp-warning-bg); color: var(--dp-warning); }
.dp-badge.is-danger  { background: var(--dp-danger-bg);  color: var(--dp-danger); }
.dp-badge.is-info    { background: var(--dp-info-bg);    color: var(--dp-info); }
.dp-badge.is-muted   { background: var(--dp-neutral-bg); color: var(--dp-neutral); }

/* ── Tabla de datos ────────────────────────────────────────────────────────── */
/* Nombre propio (no .dp-table) porque en el portal .dp-table ya es una lista en
   grid, no un <table>. */
.dp-data-table-wrap {
    overflow: auto;
    border: var(--dp-border-width) solid var(--dp-line);
    border-radius: var(--dp-radius-card);
    background: var(--dp-surface);
}

.dp-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--dp-fs-body-sm);
}

.dp-data-table th {
    color: var(--dp-ink-muted);
    font-size: var(--dp-fs-caption);
    font-weight: var(--dp-fw-semibold);
    letter-spacing: var(--dp-tracking-wide);
    text-transform: uppercase;
}

.dp-data-table th,
.dp-data-table td {
    height: var(--dp-row-height);
    padding: var(--dp-space-2) var(--dp-space-4);
    border-bottom: var(--dp-border-width) solid var(--dp-line);
}

.dp-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.dp-data-table tbody tr:hover {
    background: var(--dp-gray-50);
}

/* ── Sugerencias de búsqueda (shared/assets/js/dp-suggest.js) ─────────────── */
/* Reutiliza .dp-combobox-list/.dp-combobox-option; aquí solo la envoltura y los extras. */
.dp-suggest {
    position: relative;
    display: block;
    min-width: 0;
}

.dp-suggest > input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.dp-suggest [hidden] {
    display: none !important;
}

.dp-suggest-list {
    max-height: min(420px, 60vh);
}

.dp-suggest-group {
    padding: var(--dp-space-2) var(--dp-space-3) var(--dp-space-1);
    color: var(--dp-ink-muted);
    font-size: var(--dp-fs-caption);
    font-weight: var(--dp-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dp-suggest-group:not(:first-child) {
    margin-top: var(--dp-space-1);
    border-top: var(--dp-border-width) solid var(--dp-line);
}

.dp-suggest-all {
    margin-top: var(--dp-space-1);
    border-top: var(--dp-border-width) solid var(--dp-line);
}

.dp-suggest-all strong {
    color: var(--dp-orange-700);
}