body{font-family:system-ui;margin:0;background:#fff9f5;color:#222} .card{background:#fff;padding:16px;border-radius:14px;box-shadow:0 10px 20px rgba(0,0,0,.06)} .btn{background:#ff8a4c;color:#fff;border:0;padding:10px 14px;border-radius:10px;cursor:pointer} .input,select,textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;background:#fff} .tabs{display:flex;gap:8px;margin:16px 0}.tab{padding:10px 14px;border-radius:999px;background:#eee;cursor:pointer;font-weight:600}.tab.active{background:#ff8a4c;color:#fff} .view.hidden{display:none} .table{width:100%;border-collapse:collapse}.table td,.table th{padding:10px;border-bottom:1px solid #eee} .header{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,.06)} .container{padding:24px;max-width:1200px;margin:0 auto} ./* --- INICIO BLOQUE MODAL (CORREGIDO z-index) --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Capa 1000 (el fondo) */
}

.modal-backdrop.show {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  width: min(720px, 92%);
  position: fixed;
  z-index: 1001; /* Capa 1001 (el formulario, por encima) */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block; /* Visible... */
}

.modal.hidden {
  display: none; /* ...pero oculto si tiene la clase .hidden */
}

/* --- FIN BLOQUE MODAL (CORREGIDO) --- */