/* ═══════════════════════════════════════════════════════════════════════════════
   BotonPartido — GEMELO VANILLA (hoja de estilo)
   Ficha: design-system/COMPONENTE_BOTON_PARTIDO.md
   Kit React hermano: catalogo-cd/components/BotonPartido.jsx
   Copiada del bloque <style> inline del .jsx + los `style` de las dos mitades — sólo tokens.
   ⛔ ESTA HOJA NO REDECLARA NADA DEL Button NI DEL Menu: sólo el divisor entre las dos mitades
   y el giro del caret. El fondo, el hover, el foco y el radio base son de `componentes/button/`
   y el popover entero es de `componentes/menu/` — cargar las tres hojas, en ese orden.
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-split { display: inline-flex; position: relative; }

/* Mitad PRINCIPAL — esquina derecha recta + el divisor (comparte el borde con la del caret). */
.exds-split-btn-izq {
  border-radius: var(--radius-button) 0 0 var(--radius-button);
  border-right: 1px solid var(--color-border-default);
}

/* Sección del CARET — comparte el divisor (sin borde izquierdo), cuadrada de 36px. */
.exds-split-btn-der {
  width: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
  border-left: 0;
}

/* ⛔ TAMAÑO CHICO `sm` (Ricardo, 2026-10-28 — «con tamaño chico añadido»): las dos mitades miden 32 px, como
   `Button sm`, y el caret es un cuadrado de 32. Se declara con el peso del Button (0-3-0): el padding
   `0 14px` (y el `0 20px` del tamaño md, que dejaba el caret en 41 px y no en 36) de `.exds-btn[data-size="sm"]` le ganaba al `padding:0` de arriba y desplazaba el chevron. */
.exds-split > .exds-menu > .exds-split-btn-der {
  width: 36px;
  min-width: 36px;
  padding: 0;
}
.exds-split[data-size="sm"] > .exds-menu > .exds-split-btn-der {
  width: 32px;
  min-width: 32px;
}

/* ⛔ EL FOCO DELINEA LOS CUATRO LADOS DEL CARET (Ricardo, 2026-10-28 — «el estado focus del botón partido debe
   delinear todo ese botón del chevron… le falta el lado izquierdo»). El caret no tiene borde izquierdo (lo
   comparte con la mitad principal, que lo pinta `--color-border-default`), así que al enfocarlo sólo se
   encendían tres lados. Un sombreado exterior de 1 px a la izquierda, del color del foco del Button,
   cubre la columna de ese borde compartido. */
.exds-split-btn-der:focus-visible {
  position: relative;
  z-index: 1;
  /* LINT-ALLOW: #6E7378 · sombra -1px 0 0 0 del foco · es la columna del borde izquierdo que el caret comparte con la mitad principal, no una elevación; la receta inset 1px dibujaría dentro del caret, no sobre la costura */
  box-shadow: -1px 0 0 0 var(--color-border-focus, #6E7378);
}

/* ⛔ ABIERTO = TINTA EN LOS CUATRO LADOS (Ricardo, 2026-10-29 — «El estado enfoque del lado derecho del botón partido,
   es decir, el que tiene el chevron, debe de delinear de color tinta toda la perímetro del botón partido. Aquí, por
   ejemplo, le faltaría de delinear de color tinta el lado izquierdo»). Medido: con el menú abierto (clic o Enter)
   `menu.css` pinta los tres lados del caret en `--color-action-ink` (#21272C, `aria-expanded`), y la costura
   izquierda quedaba en gris: #6E7378 con teclado (el sombreado de arriba, color del foco) y #D1D5DB con ratón (ni
   `:focus-visible` ni sombreado: era el borde de la mitad principal). Aquí la costura toma el color de los otros tres
   lados. Peso 0-4-0: gana a `:focus-visible` (0-2-0) y no depende de él. */
.exds-split > .exds-menu > .exds-split-btn-der[aria-expanded="true"] {
  position: relative;
  z-index: 1;
  /* LINT-ALLOW: #21272C · sombra -1px 0 0 0 abierto · columna del borde izquierdo compartido con la mitad principal, en el color del borde abierto; no es una elevación */
  box-shadow: -1px 0 0 0 var(--color-action-ink, #21272C);
}

/* El caret gira cuando el Menu marca el trigger como abierto (aria-expanded, no una clase). */
.exds-split-chev {
  transition: transform var(--motion-base, 250ms) var(--ease-out);
  flex: none;
}
.exds-split [aria-expanded="true"] .exds-split-chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .exds-split-chev { transition: none !important; transform: none !important; }
}