/* ═══════════════════════════════════════════════════════════════════════
   ib-confirm.css — LOS PRIMITIVOS CANÓNICOS QUE EL DIÁLOGO `ibConfirm` NECESITA
   ═══════════════════════════════════════════════════════════════════════

   MUDANZA, NO COPIA (2026-09-13, tanda 4-bis paso 7). Estos tres bloques
   —los tokens `--ib-*`, la botonera `.ib-btn` y el diálogo `.ib-confirm`—
   vivían en `dashboard.css`, que solo cargan el layout del dashboard y la
   pantalla de acceso. El panel de la PLATAFORMA usa otro layout, así que
   llevar ahí el diálogo canónico obligaba a escribir una segunda copia de su
   aspecto: justo la duplicación que el owner señaló el 2026-09-05 («cuatro
   hojas de acciones distintas»). Se movieron **sin tocar una declaración**, y
   ahora los cargan sus tres consumidores: `dashboard_layout.twig`,
   `access/signin.twig` y `platform_layout.twig`.

   SE CARGA SIEMPRE ANTES DE `dashboard.css`, para que el orden de cascada de
   todo lo que venía detrás no cambie ni un ápice.

   El comportamiento vive en `public/core/js/ib-confirm.js`.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ═══ TOKENS DEL SISTEMA DE DISEÑO (DESIGN.md, D-DESIGN-1) ═══
       Paleta NEUTRA: el verde deja de ser protagonista (solo --ib-accent
       para éxito/badges/activos). Texto informativo nunca más claro que
       --ib-muted (legibilidad, owner 2026-07-28). */
    --ib-bg: #ffffff;
    --ib-bg-soft: #f6f7f9;
    --ib-text: #111827;
    --ib-text-2: #1f2937;
    --ib-muted: #4b5563;
    --ib-border: rgba(0, 0, 0, 0.12);
    --ib-border-soft: rgba(0, 0, 0, 0.06);
    --ib-accent: #2bb295;
    --ib-danger: #dc2626;
}

/* ═══ BOTONES CANÓNICOS (DESIGN.md, D-DESIGN-2) — el estilo de la botonera
   del perfil ("Siguiendo"/"Chatear con la tienda") para TODA la plataforma.
   Secundaria = pill blanca con borde (por defecto). Primaria = misma
   geometría en negro (estilo X) para LA acción principal del contexto. ═══ */
.ib-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; height: 40px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--ib-border);
    background: var(--ib-bg); color: var(--ib-text-2);
    font-size: 14px; font-weight: 600; line-height: 1;
    font-family: inherit;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ib-btn:hover { background: var(--ib-bg-soft); color: var(--ib-text); }
/* Estado ACTIVO/SELECCIONADO canónico (filtros, tabs, toggles, seguir):
   NEGRO SIEMPRE — una sola regla para toda la plataforma (D-DESIGN-1/2).
   Cubre las clases de estado que ya usan las vistas (active/on/is-on/
   following) para no tocar su JS. */
.ib-btn.active, .ib-btn.on, .ib-btn.is-on, .ib-btn.following, .ib-btn.is-active {
    background: var(--ib-text); border-color: var(--ib-text); color: #fff;
}
/* Variante COMPACTA (D-DESIGN-2): para chips dentro de tarjetas/cabeceras
   (p.ej. Seguir en el post) y chips de filtro. Fuente 14 SIEMPRE.
   Doble clase: gana a la media query base de 44px del .ib-btn. */
.ib-btn.ib-btn--sm { height: 34px; padding: 0 14px; }
@media (max-width: 768px) {
    .ib-btn.ib-btn--sm { height: 36px; }
}
.ib-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ib-btn i, .ib-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ib-btn--primary {
    background: var(--ib-text); border-color: var(--ib-text); color: #fff;
}
.ib-btn--primary:hover { background: #000; border-color: #000; color: #fff; }
.ib-btn--danger { color: var(--ib-danger); }
.ib-btn--danger:hover { background: rgba(220, 38, 38, 0.06); color: var(--ib-danger); }
@media (max-width: 768px) {
    .ib-btn { height: 44px; }   /* área táctil (D-DESIGN-2) */
}

/* ═══ La PREGUNTA canónica `ibConfirm` — hoy es *LA HOJA* con apellido ═══
   window.ibConfirm({title, text|html, confirmText, cancelText, danger,
   input:'textarea'|'date'|'text', choices:[{label,value,primary,danger}]})
   → Promise<{confirmed, value?, choice?}>.

   HASTA EL 2026-09-17 ESTE BLOQUE PINTABA SU PROPIA CAJA (`.ib-confirm`,
   posición fija, capa 1701, asa dibujada con un `::before`). Desde la tanda 6B
   la pregunta se CONSTRUYE sobre `ibSheet` (D-DESIGN-8 §2, dictado del owner
   repetido el 17-09), así que aquí solo queda su APELLIDO: `.ib-sheet--ask`.
   Lo que se gana de paso, sin pedirlo: el arrastre natural, el «atrás», el
   candado del fondo y —RSD— un asa que es un ELEMENTO en vez de un `::before`.

   EN ESCRITORIO SE VE EXACTAMENTE COMO AYER, y eso es requisito: diálogo
   centrado de 430 px con 24 px de aire, botones en fila (confirmar a la
   derecha) y sin asa. En MÓVIL es la hoja de la casa, ni más ni menos.

   LO QUE NO SE TOCA: `.ib-confirm-acts` y `.ib-btn--danger-solid` siguen
   enteros — no son del diálogo, son clases de LAYOUT que usan cuatro vistas de
   marketplace (`alta.twig`, `_alta_contract.twig`, `store.twig`). */
.ib-sheet--ask .ib-confirm-txt { margin: 0 0 16px; font-size: 14px; color: var(--ib-muted, #4b5563); line-height: 1.55; }
.ib-sheet--ask .ib-confirm-txt b, .ib-sheet--ask .ib-confirm-txt strong { color: var(--ib-text, #111827); }
.ib-sheet--ask .ib-confirm-cuerpo { padding: 0 16px; }
.ib-sheet--ask textarea, .ib-sheet--ask input {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid var(--ib-border, rgba(0,0,0,0.2)); border-radius: 10px;
    font: inherit; font-size: 14px; margin-bottom: 14px; resize: vertical;
}
.ib-sheet--ask textarea:focus, .ib-sheet--ask input:focus { outline: none; border-color: var(--ib-text, #111827); }
.ib-confirm-acts { display: flex; flex-direction: column; gap: 8px; }
.ib-confirm-acts .ib-btn { width: 100%; box-sizing: border-box; }
/* Primario destructivo SÓLIDO (variante canónica reutilizable). */
.ib-btn--danger-solid { background: var(--ib-danger, #dc2626); border-color: var(--ib-danger, #dc2626); color: #fff; }
.ib-btn--danger-solid:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
@media (min-width: 769px) {
    /* El diálogo de siempre, medida a medida: 430 px y 24 px de aire (la hoja
       sin apellido son 560 px y sin padding).
       El tope del alto y su scroll se quedan donde estaban por la razón que los
       puso: medido el 2026-09-04 con la hoja "Qué puede hacer Impulsito"
       (724 px de alto), a 1280x720 el botón caía en y=698 con el diálogo
       empezando en y=-2 — sin tope, no había forma de llegar a él. */
    /* Doble clase A PROPÓSITO: este fichero se carga ANTES que `ib-sheet.css`,
       así que con una sola clase la medida de la hoja (560 px) ganaría por
       orden de cascada. */
    .ib-sheet.ib-sheet--ask { width: min(430px, 92vw); padding: 24px 8px; max-height: 90vh; }
    .ib-sheet--ask .ib-sheet-title { padding: 0 16px 6px; }
    /* En escritorio la pregunta es un diálogo, no una hoja: sin asa. */
    .ib-sheet--ask .ib-sheet-handle { display: none; }
    .ib-sheet--ask .ib-sheet-actions { flex-direction: row-reverse; padding: 0 16px; }
    /* LOS BOTONES SE REPARTEN LA FILA, como en `af5574e8` — no se ciñen a su
       texto. Aquí hubo un `width: auto` (tanda 6B, vuelta 1) que, con tres
       clases (0,3,0), ganaba a `.ib-sheet-actions .ib-btn { width: 100% }`
       (`ib-sheet.css`, 0,2,0) y dejaba los dos botones apelotonados a la
       derecha: medido a 1280, «Sí, eliminar» 113 px y «Cancelar» 100 px en una
       fila de 414, donde el diálogo de ayer daba 181 y 181 y la llenaba.
       NO se escribe aquí ninguna regla de ancho, a propósito: el `width: 100%`
       que la hoja ya pone es EL MISMO que tenía `.ib-confirm-acts .ib-btn`
       (`af5574e8:99`), y en una fila con `flex-shrink` por defecto es lo que
       los reparte a partes iguales. */
}
@media (max-width: 768px) {
    /* En modo app la pregunta se ciñe al contenido en vez de estirarse: una
       pregunta de dos líneas no ocupa media pantalla. */
    .ib-sheet--ask .ib-sheet-body { flex: 0 1 auto; }
}