:root{
  --bg:#0f172a;           /* navy oscuro */
  --bg2:#0b3b8c;          /* azul fuerte */
  --ink:#0b1324;          /* texto principal */
  --ink-soft:#475569;     /* texto suave */
  --card:#ffffff;         /* superficie */
  --line:#cbd5e1;         /* bordes */
  --pri:#2563eb;          /* azul primario */
  --pri-700:#1d4ed8;
  --acc:#10b981;          /* acento */
}
body1 {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#f6f7fb; color:var(--ink);
}


html, body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  height: 100%;
  margin: 0;
}

body {
  background-image: url('img/fondo.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

/* Opcional:*/
.container, .card, .wrapper {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(1px);
} 

.wrap { 
  max-width: 880px; 
  margin: 28px auto; 
  /* Modificación aquí */
  background: rgba(255,255,255,0.7); /* Fondo blanco (255,255,255) con 88% de opacidad */
  backdrop-filter: blur(1px);         /* Aplica el desenfoque al fondo */
  /* Fin modificación */
  border: 1px solid #e2e8f0; 
  border-radius: 14px; 
  padding: 24px; 
  box-shadow: 0 10px 30px rgba(2,6,23,.06); 
}

.muted { color: var(--ink-soft); font-size: 13px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.span-2 { grid-column: 1 / -1; }

label { 
  font-weight: 800;
  display:block; margin-bottom:6px; 
  color:var(--bg2); 
  letter-spacing:.2px; 
}

.field input, .field select {
  width: 100%; font-size: 16px; padding: 12px 6px; background: transparent;
  border: 0; border-bottom: 2px solid var(--line); border-radius:0; outline:none;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus { border-bottom-color: var(--pri); box-shadow: 0 1px 0 0 var(--pri); }

.actions { display:flex; gap:12px; margin-top: 10px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; font-size:13px; border-radius:8px; border:1px solid transparent; cursor:pointer; }
.btn-primary { background: var(--pri); color:#fff; }
.btn-primary:hover { background: var(--pri-700); }
.btn-ghost { background:#f1f5f9; color:#0f172a; border-color:#e2e8f0; }
.btn-ghost:hover { background:#e2e8f0; }
.btn-exit { background:#ef4444; color:#fff; border-color:#ef4444; }
.btn-exit:hover { background:#dc2626; border-color:#dc2626; }
@media (max-width: 720px){ .row{ grid-template-columns: 1fr; } }
@media (max-width: 600px){
  .actions{ flex-direction: column; }
  .btn{ width:100%; min-height:44px; }
}
/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-backdrop.show{display:flex}
.modal{background:#fff;border:1px solid #e2e8f0;border-radius:14px;width:min(520px,92vw);box-shadow:0 24px 80px rgba(2,6,23,.25)}
.modal header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #eef2f7}
.modal .body{padding:18px 16px}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid #eef2f7}
.modal .badge{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#d1fae5;color:#065f46;font-size:18px;font-weight:900}

.required::after{
  content:" *";
  color:#ef4444;     /* rojo del asterisco */
  font-weight:900;
  margin-left:2px;
}

/* Placeholders más claros */
.field input::placeholder{ color:#9aa4b2; opacity:1; }
.field input::-webkit-input-placeholder{ color:#9aa4b2; }
.field input:-ms-input-placeholder{ color:#9aa4b2; }

/* "Placeholder" para selects hasta que sean válidos */
.field select:required:invalid{ color:#9aa4b2; }
.field select option{ color:#0f172a; }
.field select option[value=""]{ color:#9aa4b2; }