/* ============================================================
   PYM360 · COMPONENT — Modal
   Capa 2 — primitivo del DS.

   Markup canónico:
     <div class="pym-modal-overlay" onclick="closeOnBackdrop(event)">
       <div class="pym-modal pym-modal--md">
         <div class="pym-modal-h">
           <h3>Título</h3>
           <button class="pym-modal-close" onclick="cerrar()">×</button>
         </div>
         <div class="pym-modal-body">...</div>
         <div class="pym-modal-foot">
           <button class="pym-btn">Cancelar</button>
           <button class="pym-btn pym-btn--primary">Aceptar</button>
         </div>
       </div>
     </div>

   Sizes:
     .pym-modal--sm    400px
     .pym-modal--md    600px
     .pym-modal--lg    800px
     .pym-modal--xl    1000px
     .pym-modal--full  92vw / 92vh
   ============================================================ */

.pym-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
  z-index:var(--pym-z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--pym-space-4);
  animation:pym-modal-fade .15s ease;
}
@keyframes pym-modal-fade{from{opacity:0}to{opacity:1}}

.pym-modal{
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border-strong);
  border-radius:var(--pym-radius-xl);
  box-shadow:var(--pym-shadow-xl);
  width:100%;
  max-width:600px;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:pym-modal-slide .2s cubic-bezier(.4,0,.2,1);
}
@keyframes pym-modal-slide{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.pym-modal--sm{max-width:420px}
.pym-modal--md{max-width:600px}
.pym-modal--lg{max-width:800px}
.pym-modal--xl{max-width:1040px}
.pym-modal--full{max-width:92vw;max-height:92vh}

.pym-modal-h{
  padding:var(--pym-space-3) var(--pym-space-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pym-space-3);
  border-bottom:1px solid var(--pym-color-border);
  flex-shrink:0;
}
.pym-modal-h h3{
  font-size:var(--pym-fs-md);
  font-weight:var(--pym-fw-semibold);
  letter-spacing:-.005em;
  margin:0;
  color:var(--pym-color-text);
  display:flex;
  align-items:center;
  gap:var(--pym-space-2);
}

.pym-modal-close{
  width:28px;
  height:28px;
  background:transparent;
  border:1px solid transparent;
  color:var(--pym-color-text-muted);
  font-size:18px;
  cursor:pointer;
  border-radius:var(--pym-radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  line-height:1;
  transition:all var(--pym-trans-fast);
}
.pym-modal-close:hover{
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text);
  border-color:var(--pym-color-border);
}

.pym-modal-body{
  padding:var(--pym-space-4);
  overflow-y:auto;
  flex:1;
}
.pym-modal-body--flush{padding:0}

.pym-modal-foot{
  padding:var(--pym-space-3) var(--pym-space-4);
  border-top:1px solid var(--pym-color-border);
  display:flex;
  gap:var(--pym-space-2);
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  flex-shrink:0;
  background:var(--pym-color-bg);
}
.pym-modal-foot--start{justify-content:flex-start}
.pym-modal-foot--between{justify-content:space-between}

/* Banner inline en modal (resultado de submit, errores) */
.pym-modal-banner{
  margin:var(--pym-space-2) 0 0;
  padding:8px 12px;
  border-radius:var(--pym-radius-sm);
  font-size:var(--pym-fs-base);
  display:flex;
  align-items:center;
  gap:8px;
}
.pym-modal-banner--success{background:var(--pym-color-success-dim);color:var(--pym-color-success)}
.pym-modal-banner--danger{background:var(--pym-color-danger-dim);color:var(--pym-color-danger)}
.pym-modal-banner--warning{background:var(--pym-color-warning-dim);color:var(--pym-color-warning)}
.pym-modal-banner--info{background:var(--pym-color-accent-dim);color:var(--pym-color-accent-2)}

/* TEMA CLARO */
[data-theme="light"] .pym-modal-overlay{background:rgba(0,0,0,.35)}
[data-theme="light"] .pym-modal{border-color:var(--pym-color-border-strong)}