:root { --primary:#8c0b2e; --primary-dark:#5b071d; --bg:#f3f4f8; --card:#ffffff; --text:#202228; --muted:#6d7280; --border:#e4e7ef; --success:#127a43; --success-bg:#e8f6ee; --error:#b42318; --error-bg:#feefef; --shadow:0 12px 35px rgba(16,24,40,.10); --radius:22px; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:Arial,Helvetica,sans-serif; background:linear-gradient(180deg,#f4f4f8 0%,#eceef4 100%); color:var(--text); }
.wrap { width:min(100%,1120px); margin:0 auto; padding:16px; }
.panel { padding:18px; }
.panel__header h2,.section-head h3,.member h4 { margin:0; }
.panel__header p,.section-head p { color:var(--muted); margin:6px 0 0; }
.section-head { margin-top:28px; margin-bottom:12px; }
.grid { display:grid; gap:14px; }
.grid--2,.grid--4 { grid-template-columns:1fr; }
.field { margin-bottom:14px; }
.field--full { margin-top:18px; }
.field label { display:block; font-weight:700; font-size:.95rem; margin-bottom:7px; }
.field input { width:100%; border:1px solid var(--border); border-radius:14px; padding:13px 14px; font-size:1rem; color:var(--text); background:#fff; transition:border-color .2s ease, box-shadow .2s ease; }
.field input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(140,11,46,.08); }
.field input[readonly] { background:#f9fafc; color:#4b5565; }
.member { margin-top:16px; padding:16px; border:1px solid #eceef4; border-radius:18px; background:#fcfcfe; }
.member__top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.member__status { display:inline-flex; align-items:center; justify-content:center; min-width:92px; padding:6px 10px; border-radius:999px; background:#f3f4f7; color:var(--muted); font-size:.80rem; font-weight:700; }
.member__status--ok { background:rgba(18,122,67,.10); color:var(--success); }
.actions { display:flex; flex-direction:column; gap:10px; margin-top:24px; }
button { width:100%; border:0; border-radius:16px; padding:15px 18px; font-size:1rem; font-weight:700; cursor:pointer; }
#btnGuardar { color:#fff; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%); }
.btn-secondary { color:var(--text); background:#f4f5f8; border:1px solid #dde1e9; }
.alert { margin-top:18px; padding:14px 16px; border-radius:14px; font-weight:700; border:1px solid transparent; }
.alert--error { background:var(--error-bg); color:var(--error); border-color:#f8c9c9; }
.alert--success { background:var(--success-bg); color:var(--success); border-color:#bde3ca; }
.loader { position:fixed; right:14px; bottom:14px; z-index:9999; background:rgba(22,24,31,.95); color:#fff; padding:12px 16px; border-radius:12px; font-weight:700; box-shadow:var(--shadow); }
.is-hidden { display:none; }
@media (min-width:768px) { .wrap { padding:26px; } .hero__content,.panel { padding:28px; } .grid--2 { grid-template-columns:repeat(2,1fr); } .grid--4 { grid-template-columns:repeat(4,1fr); } .actions { flex-direction:row; justify-content:flex-start; } button { width:auto; min-width:220px; } }

.hero,.panel{
background:var(--card);
border-radius:var(--radius);
box-shadow:var(--shadow);
}

.hero{
position:relative;
min-height:310px;
display:flex;
align-items:center;
padding:40px 24px;
margin-bottom:16px;
overflow:hidden;
border-radius:var(--radius);
box-shadow:var(--shadow);
}

.hero__bg{
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(140,11,46,.85) 0%, rgba(140,11,46,.55) 40%, rgba(0,0,0,.2) 70%),
url("../../img/hero-cachibol.jpg");
background-size:cover;
background-position:right center;
z-index:0;
}

.hero__content{
position:relative;
z-index:2;
max-width:520px;
padding:22px 18px;
}

.hero h1{
margin:0 0 10px;
font-size:2rem;
line-height:1.05;
color:#fff;
}

.hero p{
margin:0;
color:rgba(255,255,255,.92);
line-height:1.55;
font-size:1rem;
}

.tag{
display:inline-block;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
color:#fff;
font-weight:700;
font-size:12px;
margin-bottom:12px;
backdrop-filter:blur(4px);
}