/* Flip UI 5.1 — implementación de referencia de estados interactivos y colores funcionales.
   Requiere tokens/brand-tokens.css. Tema oscuro: [data-theme="dark"] o .flip-dark en un contenedor. */
.flip-button,.flip-button-secondary,.flip-icon-button,.flip-accordion summary{font-family:var(--flip-font,var(--font-sans));-webkit-tap-highlight-color:transparent}

/* Botón principal: píldora en Azul Intenso */
.flip-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--flip-space-2);min-height:var(--flip-target-min);padding:0 var(--flip-space-5);border:1px solid var(--flip-action);border-radius:var(--flip-radius-pill);background:var(--flip-action);color:var(--flip-on-action);font-size:14px;line-height:20px;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color var(--flip-transition-color),border-color var(--flip-transition-color),color var(--flip-transition-color)}
.flip-button:hover{background:var(--flip-action-hover);border-color:var(--flip-action-hover)}
.flip-button:active,.flip-button.is-pressed{background:var(--flip-action-pressed);border-color:var(--flip-action-pressed)}

/* Botón secundario: contorno */
.flip-button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--flip-space-2);min-height:var(--flip-target-min);padding:0 var(--flip-space-5);border:1px solid var(--flip-border-control);border-radius:var(--flip-radius-pill);background:var(--flip-secondary-bg);color:var(--flip-text);font-size:14px;line-height:20px;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color var(--flip-transition-color)}
.flip-button-secondary:hover{background:var(--flip-secondary-hover)}
.flip-button-secondary:active,.flip-button-secondary.is-pressed{background:var(--flip-secondary-pressed)}

/* Control circular de solo icono */
.flip-icon-button{display:inline-grid;place-items:center;width:var(--flip-target-min);height:var(--flip-target-min);padding:0;border:1px solid var(--flip-border-control);border-radius:var(--flip-radius-pill);background:var(--flip-secondary-bg);color:var(--flip-text);cursor:pointer;transition:background-color var(--flip-transition-color)}
.flip-icon-button:hover{background:var(--flip-secondary-hover)}
.flip-icon-button:active,.flip-icon-button.is-pressed{background:var(--flip-secondary-pressed)}
.flip-icon-button.is-action{background:var(--flip-action);border-color:var(--flip-action);color:var(--flip-on-action)}
.flip-icon-button.is-action:hover{background:var(--flip-action-hover);border-color:var(--flip-action-hover)}
.flip-icon-button.is-action:active,.flip-icon-button.is-action.is-pressed{background:var(--flip-action-pressed);border-color:var(--flip-action-pressed)}

/* Iconos */
.flip-icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--flip-icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.flip-button .flip-icon,.flip-button-secondary .flip-icon{width:20px;height:20px}

/* Foco visible, común a todos los controles */
.flip-button:focus-visible,.flip-button-secondary:focus-visible,.flip-icon-button:focus-visible,.flip-link:focus-visible,.flip-accordion summary:focus-visible,.flip-field input:focus-visible,.flip-field textarea:focus-visible,.is-focus{outline:var(--flip-focus-width) solid var(--flip-focus);outline-offset:var(--flip-focus-offset)}

/* Deshabilitado: colores explícitos, sin opacidad */
.flip-button:disabled,.flip-button[aria-disabled="true"],.flip-button-secondary:disabled,.flip-button-secondary[aria-disabled="true"],.flip-icon-button:disabled,.flip-icon-button[aria-disabled="true"]{background:var(--flip-disabled-bg);border-color:var(--flip-disabled-border);color:var(--flip-disabled-text);cursor:not-allowed}

/* Cargando: conserva el color del estado, bloquea el clic y muestra el giro */
.flip-button[aria-busy="true"],.flip-button-secondary[aria-busy="true"],.flip-icon-button[aria-busy="true"]{cursor:progress;pointer-events:none}
.flip-spin{animation:flip-spin 900ms linear infinite}
@keyframes flip-spin{to{transform:rotate(360deg)}}

/* Enlaces */
.flip-link{color:var(--flip-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;transition:color var(--flip-transition-color)}
.flip-link:hover{color:var(--flip-link-hover);text-decoration-thickness:2px}
.flip-link:active,.flip-link.is-pressed{color:var(--flip-link-pressed)}
.flip-link[aria-disabled="true"]{color:var(--flip-disabled-text);text-decoration:none;cursor:not-allowed}

/* Campos */
.flip-field{display:grid;gap:var(--flip-space-2);font-family:var(--flip-font,var(--font-sans));color:var(--flip-text)}
.flip-field label{font-size:14px;line-height:20px;font-weight:500}
.flip-field input,.flip-field textarea{box-sizing:border-box;width:100%;min-height:var(--flip-target-min);padding:9px var(--flip-space-4);border:1px solid var(--flip-border-control);border-radius:var(--flip-radius-control);background:var(--flip-card);color:var(--flip-text);font:inherit;font-size:var(--flip-field-font-size);line-height:24px;transition:border-color var(--flip-transition-color)}
.flip-field input:hover,.flip-field textarea:hover{border-color:var(--flip-text)}
.flip-field input::placeholder,.flip-field textarea::placeholder{color:var(--flip-text-muted)}
.flip-field input:disabled,.flip-field textarea:disabled{background:var(--flip-disabled-bg);border-color:var(--flip-disabled-border);color:var(--flip-disabled-text);cursor:not-allowed}
.flip-field input[aria-invalid="true"],.flip-field textarea[aria-invalid="true"]{border:2px solid var(--flip-error-border);padding:8px 15px}
.flip-help{font-size:14px;line-height:20px;color:var(--flip-text-muted)}
.flip-error-msg{display:flex;gap:var(--flip-space-2);align-items:flex-start;font-size:14px;line-height:20px;color:var(--flip-error)}
.flip-error-msg .flip-icon{width:20px;height:20px}

/* Acordeón (details/summary) */
.flip-accordion{border-top:1px solid var(--flip-line);font-family:var(--flip-font,var(--font-sans));color:var(--flip-text)}
.flip-accordion details{border-bottom:1px solid var(--flip-line)}
.flip-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:var(--flip-space-4);min-height:var(--flip-target-min);padding:var(--flip-space-3) var(--flip-space-2);list-style:none;font-size:16px;line-height:24px;font-weight:600;cursor:pointer;border-radius:var(--flip-radius-control);transition:background-color var(--flip-transition-color)}
.flip-accordion summary::-webkit-details-marker{display:none}
.flip-accordion summary:hover{background:var(--flip-secondary-hover)}
.flip-accordion summary:active{background:var(--flip-secondary-pressed)}
.flip-accordion summary .flip-icon{transition:transform var(--flip-transition-layout)}
.flip-accordion details[open] summary .flip-icon{transform:rotate(180deg)}
.flip-accordion .flip-accordion-body{padding:0 var(--flip-space-2) var(--flip-space-4);font-size:16px;line-height:24px;color:var(--flip-text-muted)}
.flip-accordion details.is-disabled summary{color:var(--flip-disabled-text);cursor:not-allowed;pointer-events:none}

/* Mensajes de estado */
.flip-status{display:flex;gap:var(--flip-space-3);align-items:flex-start;padding:var(--flip-space-4);border:1px solid;border-radius:var(--flip-radius-panel);font-family:var(--flip-font,var(--font-sans));font-size:16px;line-height:24px;color:var(--flip-text)}
.flip-status strong{font-weight:600}
.flip-status .flip-icon{margin-top:0}
.flip-status.is-success{background:var(--flip-success-surface);border-color:var(--flip-success-border)}.flip-status.is-success .flip-icon,.flip-status.is-success strong{color:var(--flip-success)}
.flip-status.is-warning{background:var(--flip-warning-surface);border-color:var(--flip-warning-border)}.flip-status.is-warning .flip-icon,.flip-status.is-warning strong{color:var(--flip-warning)}
.flip-status.is-error{background:var(--flip-error-surface);border-color:var(--flip-error-border)}.flip-status.is-error .flip-icon,.flip-status.is-error strong{color:var(--flip-error)}
.flip-status.is-info{background:var(--flip-info-surface);border-color:var(--flip-info-border)}.flip-status.is-info .flip-icon,.flip-status.is-info strong{color:var(--flip-info)}

@media (prefers-reduced-motion:reduce){.flip-button,.flip-button-secondary,.flip-icon-button,.flip-link,.flip-field input,.flip-accordion summary,.flip-accordion summary .flip-icon{transition:none}.flip-spin{animation:none}}