/* /src/modal.css */
.modal{
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .modal.is-open{ opacity: 1; pointer-events: auto; }
  
  .modal__overlay{
    position: absolute; inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
  }
  
  .modal__content{
    position: relative;
    width: min(560px, 92vw);
    background: var(--card, #fff);
    border: 1px solid var(--br, #eaeaea);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    padding: 20px 20px 16px;
    transform: translateY(8px) scale(.98);
    transition: transform .2s ease;
  }
  .modal.is-open .modal__content{ transform: translateY(0) scale(1); }
  
  .modal__title{ margin: 0 0 12px; font-size: 18px; }
  
  .modal__close{
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--br, #eaeaea);
    background: #fff;
    cursor: pointer;
    font-size: 18px; line-height: 1;
  }
  
  .modal__actions{
    display: flex; gap: 12px; justify-content: flex-end;
    margin-top: 16px;
  }
  
  /* Botones coherentes (si ya tienes .btn, puedes omitir esto) */
  .btn{ border:0; padding:10px 14px; border-radius:10px; cursor:pointer; }
  .btn-danger{ background:#ef4444; color:#fff; }
  .btn-ok{ background:#10b981; color:#fff; }