.app-body {margin:0; font-family:'Inter',Arial,Helvetica,sans-serif; background:#f5f7fb; color:#1b1e28;}
.app-header {background:#1f2b5c; color:#fff; box-shadow:0 10px 24px rgba(28, 56, 128, 0.25); width:100%;}
.app-header-inner {max-width:1280px; margin:0 auto; padding:30px 36px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.app-header h1 {margin:0; font-size:32px; font-weight:700; color:#fff;}
.app-header p.tagline {margin:8px 0 0; font-size:16px; opacity:0.9;}
.app-header p {margin:4px 0 0; font-size:15px; opacity:.85;}
.header-actions {display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.btn-primary {display:inline-flex; align-items:center; justify-content:center; min-width:140px; padding:12px 18px; border-radius:999px; background:#fff; color:#284786; font-weight:600; text-decoration:none; box-shadow:0 4px 12px rgba(255,255,255,0.25); transition:transform .2s ease, box-shadow .2s ease;}
.btn-primary:hover {transform:translateY(-2px); box-shadow:0 8px 18px rgba(255,255,255,0.35);}
.btn-secondary {display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,0.6); color:#fff; text-decoration:none; font-weight:500; transition:background .2s ease;}
.btn-secondary:hover {background:rgba(255,255,255,0.15);}
.btn-ghost {display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,0.6); color:#fff; text-decoration:none; font-weight:500; transition:background .2s ease; background:transparent;}
.btn-ghost:hover {background:rgba(255,255,255,0.15);}
.layout {display:grid; gap:24px; padding:32px; max-width:1280px; margin:0 auto; grid-template-columns:1fr;}
.layout-single {max-width:1280px; margin:0 auto; padding:32px;}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.card {background:#fff; border-radius:18px; box-shadow:0 12px 30px rgba(15,35,95,0.12); padding:28px; position:relative;}
.card h2 {margin-top:0; font-size:20px; font-weight:600; color:#1d2b4f;}
.card + .card {margin-top:24px;}
.premium-card {background:linear-gradient(145deg,#1f2b5c 0%,#384a9c 100%); color:#fff; padding:30px; border-radius:20px; box-shadow:0 16px 32px rgba(21,38,87,0.18);}
.premium-card h3 {margin:0 0 10px; font-size:20px; font-weight:600;}
.premium-card p {margin:0 0 18px; font-size:15px; line-height:1.5; opacity:.92;}
.premium-card .btn-primary {background:#ffcd4d; color:#1b1e28; box-shadow:none; min-width:0; padding:12px 20px;}
.ad-slot {background:#eef1fb; border:1px dashed #b9c3ec; border-radius:16px; padding:24px; text-align:center; color:#3a4a80; font-size:15px;}
.ad-slot span {display:block; font-size:13px; margin-top:4px; opacity:.8;}
.grid-header {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px;}
.grid-header .badge {background:#e8edff; color:#2a4d9b; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; letter-spacing:.05em;}
.badge-link {text-decoration:none; display:inline-flex; align-items:center; gap:6px; color:inherit;}
.badge-link:hover {background:#d5defc;}
.cta-banner {background:#fff1cc; border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:12px; margin-top:24px; box-shadow:0 10px 24px rgba(240,187,57,0.2);}
.cta-banner strong {font-size:16px; color:#634100;}
.cta-banner a {align-self:flex-start;}
.mensaje-exito {padding:16px 20px; margin:0 0 24px; border-radius:14px; background:#e6f7ec; color:#1b5e20; font-weight:500; box-shadow:0 8px 20px rgba(18,128,64,0.15);}
.mensaje-exito span {display:block; margin-top:8px; font-size:14px; opacity:.85;}
.table-scroll {overflow:auto; max-width:100%;}
.table-elevated {background:#fff; border-radius:16px; box-shadow:0 10px 24px rgba(17,56,130,0.12); padding:16px;}
.toolbar {display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.toolbar a {font-size:14px; color:#2a4d9b; text-decoration:none; font-weight:500;}
.toolbar a:hover {text-decoration:underline;}
label.toolbar-field {display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:0; text-transform:none; letter-spacing:0; color:#31406b; font-size:12px;}
label.toolbar-field span {font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#29407a;}
label.toolbar-field select {border-radius:10px; border:1px solid rgba(64,82,150,0.25); background:#f8f9ff; color:#1d2b4f; font-size:14px; font-weight:500; padding:8px 14px; min-width:160px; transition:border .2s ease, box-shadow .2s ease;}
label.toolbar-field select:focus {outline:none; border-color:#3f7af0; box-shadow:0 0 0 3px rgba(63,122,240,.15);}
.layout-two {display:grid; gap:24px; padding:32px; max-width:1280px; margin:0 auto; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));}
.creation-grid {display:grid; gap:20px; margin-top:28px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));}
.creation-card {background:#f7f9ff; border:1px solid rgba(61, 90, 161, 0.15); border-radius:16px; padding:24px; box-shadow:0 8px 20px rgba(20,38,90,0.08); display:flex; flex-direction:column; gap:14px;}
.creation-card h2 {margin:0; font-size:18px; color:#1d2b4f;}
.creation-card p {margin:0; font-size:14px; line-height:1.55; color:#384a7a;}
.creation-card .toolbar {justify-content:flex-start;}
.creation-card .badge {align-self:flex-start;}
.play-selector {display:flex; flex-direction:column; gap:18px; margin-top:28px;}
.play-selector details {background:#f7f9ff; border-radius:14px; border:1px solid rgba(61, 90, 161, 0.18); padding:18px 20px;}
.play-selector summary {font-weight:600; font-size:15px; color:#1d2b4f; cursor:pointer; outline:none;}
.selector-content {margin-top:16px; font-size:14px; line-height:1.6; color:#2e3d66;}
.selector-content .btn-primary {margin-top:8px;}
.form-grid {display:grid; gap:18px;}
.form-grid label {display:block; font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:#31406b; margin-bottom:6px;}
.form-grid > div > input[type="text"], .form-grid > div > input[type="password"], .form-grid > div > textarea {width:100%; border-radius:12px; border:1px solid #ccd3ea; padding:12px 14px; font-size:15px; background:#f8f9ff; transition:border .2s ease, box-shadow .2s ease;}
.form-grid > div > textarea {min-height:140px; resize:vertical;}
.form-grid > div > input[type="text"]:focus, .form-grid > div > input[type="password"]:focus, .form-grid > div > textarea:focus {outline:none; border-color:#3f7af0; box-shadow:0 0 0 4px rgba(63,122,240,.15);}
.submit-row {display:flex; align-items:center; justify-content:flex-end; gap:16px;}
.submit-row input[type="submit"], .submit-row button {background:#3f7af0; color:#fff; border:none; border-radius:999px; padding:12px 24px; font-weight:600; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;}
.submit-row input[type="submit"]:hover, .submit-row button:hover {transform:translateY(-2px); box-shadow:0 8px 22px rgba(63,122,240,0.35);}
.status-toast {position:fixed; bottom:24px; right:24px; background:#1f2b5c; color:#fff; padding:14px 18px; border-radius:12px; box-shadow:0 16px 32px rgba(15,35,95,0.3); display:flex; align-items:center; gap:12px; font-size:14px; z-index:1000;}
.status-toast.success {background:#1c7c54;}
.status-toast.error {background:#b12b2b;}
.mobile-only {display:none;}
.logo {font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; color:#fff;}
.logo span {display:inline-flex; width:auto; padding:0 14px; height:36px; border-radius:12px; background:rgba(39,66,136,0.85); color:#fff; font-weight:700; align-items:center; justify-content:center; letter-spacing:0.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,0.2); box-shadow:0 4px 12px rgba(39,66,136,0.25);}
.hero-subtitle {font-size:14px; opacity:.8;}
.section-title {font-size:18px; font-weight:600; margin:0 0 18px; color:#1f2b5c;}
.features-list {list-style:none; padding:0; margin:0;}
.features-list li {display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:14px;}
.features-list li::before {content:"•"; color:#ffcd4d; font-size:18px; line-height:1;}
.app-footer {margin-top:48px; background:#eef1fb; border-top:1px solid rgba(52,69,129,0.12); color:#4a5c89;}
.app-footer-inner {max-width:1280px; margin:0 auto; padding:24px 36px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.app-footer-copy {font-size:13px; line-height:1.5;}
.app-footer-copy a {color:inherit; text-decoration:none; font-weight:600;}
.app-footer-copy a:hover {text-decoration:underline;}
.app-footer-meta {font-size:13px; font-weight:500; opacity:0.8;}
.app-footer-meta::before {content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:#9aa8d8; margin-right:8px;}

@media (min-width:100%){
    .app-header-inner {max-width:1400px;}
    .layout {max-width:1400px; grid-template-columns:minmax(0,1fr) 320px;}
}
@media (max-width:900px){
    .app-header-inner {padding:22px 24px; gap:12px;}
    .layout, .layout-single, .layout-two {padding:24px;}
    .card {padding:24px;}
    .premium-card {padding:24px;}
    .app-footer-inner {padding:20px 24px;}
}
@media (max-width:600px){
    .app-header-inner {padding:20px 18px;}
    .layout, .layout-single, .layout-two {padding:20px;}
    .card {padding:20px;}
    .premium-card {padding:22px;}
    .mobile-only {display:block;}
    .app-footer-inner {flex-direction:column; align-items:flex-start; gap:10px; padding:20px 18px;}
    .app-footer-meta::before {display:none;}
}