:root{--red:#e31920;--red2:#b20f16;--black:#080808;--ink:#141414;--muted:#6f6862;--cream:#f5efe6;--paper:#fffaf4;--line:#e4d8cb;--white:#fff;--max:1220px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}.topline{height:5px;background:linear-gradient(90deg,var(--red),#f04b4f,var(--red))}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,250,244,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.nav{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.04em}.brand img{width:56px;height:56px;object-fit:cover;border-radius:50%}.brand span{font-size:14px;line-height:.9}.brand b{font-size:20px;color:var(--red)}.navlinks{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.navlinks a{padding:9px 12px;border-radius:999px;font-size:13px;font-weight:800}.navlinks a:hover,.navlinks a.active{background:#181818;color:#fff}.navlinks .donate-nav{background:var(--red);color:#fff}.menu-toggle{display:none;background:none;border:0;font-size:28px}
/* Menu desplegable principal */
.menu-dropdown{position:static;display:flex;align-items:center}
.menu-dropdown-title{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border-radius:999px;font-size:13px;font-weight:800;line-height:1.6}
.menu-dropdown-title:hover,.menu-dropdown.open .menu-dropdown-title{background:#181818;color:#fff}
.menu-arrow{display:inline-block;font-size:15px;line-height:1;transition:transform .2s ease;margin-top:-2px}
.menu-dropdown.open .menu-arrow{transform:rotate(180deg)}
.menu-panel{position:absolute;top:calc(100% - 1px);left:0;right:0;width:100%;background:#fff;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 18px 35px rgba(0,0,0,.12);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:110}
.menu-dropdown.open .menu-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.menu-panel-inner{width:min(var(--max),calc(100% - 40px));margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;padding:30px 0 34px}
.menu-column{display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-column h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:900;color:var(--red);padding-bottom:9px;border-bottom:1px solid var(--line)}
.menu-column a{display:block;padding:7px 0;border-radius:0;font-size:14px;font-weight:800;transition:transform .15s ease,color .15s ease,opacity .15s ease}
.menu-column a:hover,.menu-column a.active{background:transparent!important;color:var(--red)!important;transform:translateX(4px)}
body.dark-mode .menu-dropdown-title:hover,body.dark-mode .menu-dropdown.open .menu-dropdown-title{background:#f4eee8;color:#111}
body.dark-mode .menu-panel{background:#181818;color:var(--ink);border-color:#37312c;box-shadow:0 18px 35px rgba(0,0,0,.4)}
body.dark-mode .menu-column h3{border-color:#37312c}
@media(max-width:700px){
.menu-dropdown{display:block;width:100%}
.menu-dropdown-title{width:100%;justify-content:center}
.menu-panel{position:static;width:100%;margin-top:8px;border:1px solid var(--line);border-radius:12px;box-shadow:none;transform:none;display:none;opacity:1;visibility:visible;pointer-events:auto}
.menu-dropdown.open .menu-panel{display:block;transform:none}
.menu-panel-inner{width:100%;grid-template-columns:1fr;gap:18px;padding:18px}
.menu-column a{text-align:center}
}
.main{padding:34px 0 80px}.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center;padding:44px 0 60px}.hero-copy h1,.page-intro h1,.about-hero h1,.donation-hero h1,.article h1,.auth-card h1{font-family:Georgia,serif;font-size:clamp(44px,7vw,88px);line-height:.95;margin:10px 0 24px;letter-spacing:-.05em}.hero-copy h1 span{color:var(--red)}.hero-copy p{max-width:620px;font-size:18px;color:#4f4842}.hero-art{border:1px solid #111;border-radius:24px;overflow:hidden;background:#000;box-shadow:20px 20px 0 #111}.hero-art img{width:100%;height:520px;object-fit:cover}.eyebrow,.tag{font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}.eyebrow{color:var(--red)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 20px;font-weight:900;cursor:pointer;font-size:14px}.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red2)}.btn-ghost,.btn-outline{border:1px solid #211f1e;background:transparent}.btn-light{background:#fff;color:#111}.section{padding:74px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.section-head h2,.split-copy h2{font-family:Georgia,serif;font-size:44px;line-height:1;margin:8px 0}.see-all{font-weight:900;color:var(--red)}.opinion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.opinion-card{background:#fff;border:1px solid var(--line);overflow:hidden;border-radius:18px;transition:.2s}.opinion-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(24,15,8,.08)}.card-media{aspect-ratio:16/10;overflow:hidden;background:#111}.card-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}.card-body{padding:21px}.card-body h2,.card-body h3{font-family:Georgia,serif;line-height:1.05;margin:10px 0;font-size:28px}.card-body p{color:#5f5852}.card-body a{display:inline-block;margin-top:14px;color:var(--red);font-weight:900}.tag{color:var(--red)}.split-section{display:grid;grid-template-columns:1fr 1fr;background:var(--black);color:#fff;border-radius:24px;overflow:hidden;margin:20px 0}.split-copy{padding:54px}.split-copy p{color:#d7cec6}.split-media img{width:100%;height:100%;object-fit:cover}.dark-section{background:#101010;color:#fff;border-radius:24px;padding:54px;margin-top:50px}.quote-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.quote-grid blockquote{margin:0;border:1px solid #34302d;padding:24px;border-radius:18px;background:#161616}.quote-grid p{font-family:Georgia,serif;font-size:20px}.stars{color:#ff3a42;letter-spacing:2px}.quote-grid footer{display:flex;flex-direction:column;color:#bdb6b0}.page-intro{padding:34px 0 42px;max-width:820px}.page-intro h1{font-size:clamp(54px,7vw,78px)}.page-intro p{font-size:19px;color:var(--muted)}.featured-layout{display:grid;grid-template-columns:.85fr 1.15fr}.featured-layout .card-media{height:100%;aspect-ratio:auto}.article{max-width:860px;margin:0 auto}.article-meta{color:var(--muted);margin-bottom:24px}.article-cover{width:100%;max-height:600px;object-fit:cover;border-radius:20px;margin:20px 0 30px}.article-body{font-size:19px;line-height:1.85}.video-wrap{aspect-ratio:16/9;margin-top:30px}.video-wrap iframe,.video-thumb iframe{width:100%;height:100%;border:0}.pdf-card{display:block;border:1px solid var(--line);padding:16px;border-radius:14px;margin-top:28px;font-weight:900}.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.video-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.video-thumb{aspect-ratio:16/9;background:#111}.video-thumb iframe,.video-thumb img{width:100%;height:100%;object-fit:cover}.video-placeholder{height:100%;display:grid;place-items:center;color:#fff;font-size:64px}.article-list{display:grid;gap:18px}.list-card{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px}.list-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}.list-card h2{font-family:Georgia,serif;font-size:34px;line-height:1.05;margin:6px 0}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.library-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.library-card>img{aspect-ratio:16/9;object-fit:cover}.library-card .card-body{display:flex;flex-direction:column;align-items:flex-start}.text-link{font-weight:900;color:var(--red);margin-top:12px}.memory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.memory-card{display:grid;grid-template-columns:180px 1fr;gap:18px;background:#111;color:#fff;border-radius:18px;overflow:hidden}.memory-img img{height:100%;width:100%;object-fit:cover}.memory-card>div:last-child{padding:22px}.memory-card p{color:#cfc7c0}.workshop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.workshop-card{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}.workshop-num{font-size:38px;color:var(--red);font-weight:900}.workshop-card h2{font-family:Georgia,serif;margin:0;font-size:30px}.about-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:50px 0}.about-hero img{max-height:500px;object-fit:cover;border-radius:24px}.three-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.three-cols>div{border-top:5px solid var(--red);padding-top:16px}.three-cols span{font-size:48px;font-family:Georgia,serif;color:var(--red)}.donation-hero{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:center;background:var(--black);color:#fff;border-radius:24px;padding:44px;margin-bottom:28px}.donation-hero p{color:#cbc3bb}.qr-card{background:#fff;color:#111;border-radius:18px;padding:22px;text-align:center}.qr-image{width:220px;height:220px;object-fit:contain;margin:auto;border:8px solid #fff}.donation-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-card,.payment-card,.auth-card,.admin-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}.wide-form{max-width:900px;margin:auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-weight:800;margin:0 0 16px}input,textarea,select{display:block;width:100%;margin-top:8px;border:1px solid #d7ccc2;background:#fffaf5;border-radius:12px;padding:13px 14px;font:inherit}textarea{resize:vertical}.check{display:flex;align-items:center;gap:8px}.check input{width:auto;margin:0}.auth-card{max-width:500px;margin:60px auto}.join-band{background:var(--red);color:#fff;padding:42px 0}.join-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.join-inner h2{font-family:Georgia,serif;font-size:45px;margin:6px 0}.footer{background:#0c0c0c;color:#ddd;padding:48px 0 18px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer-grid h4{color:#fff;margin-top:0}.footer-grid a{display:block;color:#bbb;margin:8px 0}.footer-logo{width:80px;height:80px;object-fit:cover;border-radius:50%;background:#fff}.footer-bottom{border-top:1px solid #252525;margin-top:36px;padding-top:18px;color:#888}.alert{padding:12px 16px;border-radius:12px;margin-bottom:20px;background:#d7f5df;color:#155b2a;font-weight:800}.alert.error{background:#ffe1e1;color:#7a1414}.admin-body{background:#efe7de}.admin-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.admin-side{background:#0c0c0c;color:#fff;padding:22px;display:flex;flex-direction:column;gap:10px}.admin-side img{width:70px;height:70px;background:#fff;border-radius:50%}.admin-side a{padding:10px 12px;border-radius:10px;color:#ddd}.admin-side a:hover{background:#1b1b1b}.admin-main{padding:38px;min-width:0}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:25px 0}.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.stat span{display:block;color:var(--muted);font-size:13px}.stat strong{font-size:42px;color:var(--red)}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px}.table-wrap table{width:100%;border-collapse:collapse;min-width:720px}.table-wrap th,.table-wrap td{padding:12px 14px;border-bottom:1px solid #eee;text-align:left}.inline-form{display:contents}.note{color:var(--muted);font-size:13px;margin-top:20px}@media(max-width:980px){.navlinks a{padding:8px}.hero,.about-hero,.donation-grid,.split-section{grid-template-columns:1fr}.hero-art img{height:360px}.opinion-grid,.library-grid,.quote-grid{grid-template-columns:repeat(2,1fr)}.memory-grid,.workshop-grid,.video-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.donation-hero{grid-template-columns:1fr}.admin-layout{grid-template-columns:1fr}.admin-side{position:sticky;top:0;z-index:30}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.wrap{width:min(var(--max),calc(100% - 24px))}.nav{min-height:74px}.menu-toggle{display:block}.navlinks{display:none;position:absolute;top:79px;left:12px;right:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.12)}.navlinks.show{display:flex;flex-direction:column;align-items:stretch}.navlinks a{text-align:center}.hero{padding:30px 0}.hero-copy h1,.page-intro h1,.article h1,.auth-card h1{font-size:50px}.opinion-grid,.quote-grid,.library-grid,.three-cols,.form-grid,.footer-grid{grid-template-columns:1fr}.featured-layout,.list-card{grid-template-columns:1fr}.list-card h2{font-size:28px}.memory-card{grid-template-columns:120px 1fr}.join-inner{flex-direction:column;align-items:flex-start}.join-inner h2{font-size:36px}.admin-main{padding:18px}.stats-grid{grid-template-columns:1fr}}
/* Navegación, login y permisos */
.navlinks .login-nav{margin-left:auto;border:1px solid #171717;background:#171717;color:#fff;box-shadow:0 4px 0 #000}.navlinks .login-nav:hover{background:#333}.navlinks .theme-toggle{border:1px solid var(--line);background:#fffaf4}.navlinks .theme-toggle:hover{background:#181818}.login-card{box-shadow:14px 14px 0 #111}.login-lead{color:var(--muted);margin-top:-10px;margin-bottom:24px}.login-btn{width:100%;font-size:15px;padding:15px}.login-register{margin-top:20px}.login-register a{color:var(--red);font-weight:900}.formation-home{margin-top:28px}.compact-section{padding-top:10px}.formation-workshops{padding-top:20px}.memory-home-grid{grid-template-columns:repeat(3,1fr)}.memory-home-card{border:1px solid #34302d;padding:24px;border-radius:18px;background:#161616}.memory-home-card h3{font-family:Georgia,serif;font-size:27px;line-height:1.05}.memory-home-card p{color:#cfc7c0}.memory-home-card a{color:#fff;font-weight:900}.permission-box{border:1px solid var(--line);border-radius:16px;padding:18px;margin:20px 0}.permission-box legend{font-weight:900;padding:0 8px}.permission-box p{color:var(--muted);font-size:14px}.permission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.inline-delete{display:inline}.link-danger{border:0;background:none;color:var(--red);font:inherit;font-weight:800;cursor:pointer;padding:0}.admin-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.admin-actions h2{width:100%;margin-top:0}
/* Modo oscuro persistente */
body.dark-mode{--paper:#101010;--ink:#f4eee8;--muted:#b9b0a8;--line:#37312c;background:#101010;color:var(--ink)}
body.dark-mode .site-header{background:rgba(16,16,16,.94);border-color:#37312c}body.dark-mode .navlinks .theme-toggle{background:#181818;color:#fff;border-color:#444}body.dark-mode .navlinks .login-nav{background:#f4eee8;color:#111;border-color:#f4eee8;box-shadow:none}body.dark-mode .navlinks a:hover,body.dark-mode .navlinks a.active{background:#f4eee8;color:#111}body.dark-mode .opinion-card,body.dark-mode .video-card,body.dark-mode .library-card,body.dark-mode .workshop-card,body.dark-mode .form-card,body.dark-mode .payment-card,body.dark-mode .auth-card,body.dark-mode .admin-box{background:#181818;border-color:#37312c}body.dark-mode .card-body p,body.dark-mode .hero-copy p{color:#c8beb6}body.dark-mode input,body.dark-mode textarea,body.dark-mode select{background:#111;color:#fff;border-color:#4a413a}body.dark-mode .btn-outline,body.dark-mode .btn-ghost{border-color:#aaa;color:#fff}body.dark-mode .page-intro p{color:#c8beb6}
@media(max-width:980px){.memory-home-grid{grid-template-columns:1fr 1fr}.permission-grid{grid-template-columns:1fr}}
@media(max-width:700px){.memory-home-grid{grid-template-columns:1fr}.admin-actions{align-items:stretch;flex-direction:column}.admin-actions .btn{width:100%}}
/* Panel administrativo */
.admin-layout{display:block;min-height:100vh}.admin-side{position:fixed;left:0;top:0;bottom:0;width:270px;height:100vh;z-index:100;background:#0c0c0c;color:#fff;padding:24px 18px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}.admin-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 20px;border-bottom:1px solid #2b2b2b}.admin-brand img{width:54px;height:54px;object-fit:cover;border-radius:50%;background:#fff}.admin-brand strong{display:block;font-size:15px}.admin-brand span{display:block;color:#999;font-size:12px;margin-top:3px}.admin-nav{display:flex;flex-direction:column;gap:7px}.admin-nav a,.admin-side-bottom a{padding:12px 14px;border-radius:10px;color:#ddd;font-weight:800}.admin-nav a:hover,.admin-nav a.active,.admin-side-bottom a:hover{background:#1c1c1c;color:#fff}.admin-side-bottom{margin-top:auto;border-top:1px solid #2b2b2b;padding-top:14px}.admin-logout{color:#ff7777!important}.admin-main{margin-left:270px;padding:42px;min-width:0}.admin-users-table table{min-width:1150px}.admin-users-table select{min-width:135px}.compact-permissions{grid-template-columns:repeat(2,minmax(130px,1fr));min-width:300px}.content-admin-section{margin:0 0 28px}.content-admin-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}.content-admin-head h2{font-family:Georgia,serif;font-size:38px;margin:4px 0}.content-admin-list{display:grid;gap:12px}.content-admin-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:22px}.content-admin-card h3{font-family:Georgia,serif;font-size:25px;margin:6px 0}.content-admin-card p{margin:5px 0;color:var(--muted)}.content-admin-card small{color:#999}.content-admin-actions{display:flex;gap:8px;flex-shrink:0}.danger-outline{color:var(--red)}.empty-content{background:#f8f1e9;border:1px dashed #cdbfaf;border-radius:14px;padding:22px;color:var(--muted)}
@media(max-width:980px){.admin-side{position:relative;width:100%;height:auto;min-height:0}.admin-main{margin-left:0;padding:24px}.admin-side-bottom{margin-top:0}.content-admin-card{align-items:flex-start;flex-direction:column}.content-admin-actions{width:100%}}
/* Menú de perfil de usuario */
.profile-menu{position:relative;margin-left:auto}.profile-trigger{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fffaf4;color:var(--ink);border-radius:999px;padding:5px 10px 5px 6px;font:inherit;font-weight:800;cursor:pointer}.profile-trigger:hover{background:#f2e9df}.profile-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#171717;color:#fff;font-size:14px;font-weight:900;flex-shrink:0}.profile-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-arrow{font-size:16px;line-height:1;transition:transform .18s ease}.profile-menu.open .profile-arrow{transform:rotate(180deg)}.profile-panel{display:none;position:absolute;right:0;top:calc(100% + 10px);width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 45px rgba(0,0,0,.15);padding:8px;z-index:200}.profile-menu.open .profile-panel{display:block}.profile-panel-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;margin-bottom:5px;border-bottom:1px solid var(--line)}.profile-panel-head strong{display:block;font-size:14px}.profile-panel-head small{text-transform:capitalize;color:var(--muted);font-size:12px}.profile-avatar-panel{width:42px;height:42px}.profile-avatar-image{object-fit:cover;overflow:hidden}.profile-panel>a{display:block;padding:11px 12px;border-radius:10px;color:var(--ink);font-weight:700}.profile-panel>a:hover{background:#f3ece5}.profile-panel .profile-logout{color:#b32020;margin-top:3px;border-top:1px solid var(--line);border-radius:0;padding-top:14px}.profile-avatar-large{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:#171717;color:#fff;font-size:30px;font-weight:900;margin-bottom:18px}.profile-photo-large{object-fit:cover;overflow:hidden}.profile-photo-wrap{margin-bottom:2px}.profile-photo-form{margin-top:20px;margin-bottom:8px}.profile-photo-form input[type=file]{padding:10px}.profile-menu+.donate-nav{margin-left:0}
body.dark-mode .profile-trigger{background:#181818;color:#fff;border-color:#444}.dark-mode .profile-panel{background:#181818;border-color:#444}.dark-mode .profile-panel-head{border-color:#444}.dark-mode .profile-panel>a{color:#fff}.dark-mode .profile-panel>a:hover{background:#242424}.dark-mode .profile-panel .profile-logout{color:#ff7777}.dark-mode .profile-avatar-large{background:#f4eee8;color:#111}
@media(max-width:700px){.profile-menu{width:100%;margin-left:0}.profile-trigger{width:100%;justify-content:center}.profile-panel{position:static;width:auto;margin-top:8px;box-shadow:none}.navlinks .profile-menu{padding:4px}.profile-name{max-width:200px}}
/* Panel lateral contraíble */
.admin-layout{--sidebar-width:270px;display:block;min-height:100vh}
.admin-side{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);height:100vh;z-index:100;padding:24px 18px;transition:width .22s ease,padding .22s ease;overflow-x:hidden}
.admin-main{margin-left:var(--sidebar-width);padding:42px;transition:margin-left .22s ease}
.admin-layout.sidebar-collapsed{--sidebar-width:78px}
.admin-layout.sidebar-collapsed .admin-side{padding:24px 10px}
.admin-layout.sidebar-collapsed .admin-brand > div,.admin-layout.sidebar-collapsed .admin-nav a,.admin-layout.sidebar-collapsed .admin-side-bottom a{font-size:0;opacity:0;pointer-events:none}
.admin-layout.sidebar-collapsed .admin-brand{justify-content:center}
.sidebar-toggle{align-self:flex-end;border:1px solid #393939;background:#171717;color:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font:inherit;font-weight:800;margin-bottom:2px;white-space:nowrap}
.sidebar-toggle span{font-size:12px}
.admin-layout.sidebar-collapsed .sidebar-toggle{align-self:center;font-size:0}
.admin-layout.sidebar-collapsed .sidebar-toggle:first-letter{font-size:16px}
.user-forms-holder{display:none}
.companion-permission-grid{grid-template-columns:repeat(3,1fr)}
.companion-permission-grid .stat strong a{color:var(--red);font-size:18px}
.stat{text-decoration:none;color:inherit;display:block}
.stat small{display:block;color:var(--muted);margin-top:4px}
@media(max-width:980px){.admin-layout{--sidebar-width:0;display:block}.admin-side{position:sticky;width:auto;height:auto;min-height:0;padding:12px 14px;display:block}.admin-main{margin-left:0;padding:24px}.admin-brand{margin-bottom:10px}.sidebar-toggle{position:absolute;right:14px;top:12px}.companion-permission-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.companion-permission-grid{grid-template-columns:1fr}}
/* Tarjeta de perfil adaptable al nombre del usuario */
.profile-card{width:fit-content;min-width:min(380px,100%);max-width:min(920px,100%)}
.profile-card h1{overflow-wrap:anywhere;word-break:break-word}
.profile-card>p{overflow-wrap:anywhere}
@media(max-width:700px){.profile-card{width:100%;min-width:0}}
/* Mejoras de subida de imágenes, sidebar y perfil */
.sidebar-toggle{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;padding:0;font-size:22px;line-height:1;flex-shrink:0}
.sidebar-arrow{display:block;transition:transform .2s ease}
.admin-layout.sidebar-collapsed .sidebar-toggle{font-size:22px;width:42px;height:42px}
.admin-layout.sidebar-collapsed .admin-main{margin-left:78px}
.profile-card{width:fit-content;min-width:min(400px,100%);max-width:min(760px,100%);padding:34px 34px 30px;border-radius:24px;box-shadow:0 20px 60px rgba(28,20,12,.10)}
.profile-card h1{font-size:clamp(38px,6vw,62px);margin-bottom:8px;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.profile-card > p{max-width:100%;overflow-wrap:anywhere}
.profile-photo-wrap{display:flex;align-items:center;justify-content:center;margin:0 0 18px}
.profile-avatar-large,.profile-photo-large{width:120px;height:120px;border-radius:50%;border:4px solid var(--white);box-shadow:0 10px 30px rgba(0,0,0,.14)}
.profile-photo-form{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:24px}
.profile-photo-form label{display:grid;gap:8px;font-weight:800}
.profile-photo-form input[type=file]{background:#fff;border:1px solid var(--line);border-radius:12px}
.danger-outline{color:var(--red)!important;border-color:#d8aaa8!important}
.danger-outline:hover{background:#fff0f0}
@media(max-width:980px){.admin-layout.sidebar-collapsed .admin-main{margin-left:0}.admin-side{z-index:150}}
@media(max-width:700px){.profile-card{width:100%;min-width:0;padding:26px 20px}.profile-avatar-large,.profile-photo-large{width:104px;height:104px}}
/* Ajuste final del sidebar contraíble */
.admin-side{box-shadow:1px 0 0 rgba(255,255,255,.04);will-change:width}
.admin-brand,.admin-nav a,.admin-side-bottom a,.sidebar-toggle{transition:opacity .16s ease,transform .16s ease,background .16s ease}
.admin-layout.sidebar-collapsed .admin-side{padding:18px 10px;width:var(--sidebar-width)}
.admin-layout.sidebar-collapsed .admin-brand{padding:6px 0 14px;border-bottom-color:transparent;justify-content:center}
.admin-layout.sidebar-collapsed .admin-brand img{width:46px;height:46px}
.admin-layout.sidebar-collapsed .admin-brand > div,
.admin-layout.sidebar-collapsed .admin-nav a,
.admin-layout.sidebar-collapsed .admin-side-bottom a{display:none}
.admin-layout.sidebar-collapsed .admin-nav{display:none}
.admin-layout.sidebar-collapsed .admin-side-bottom{display:none}
.admin-layout.sidebar-collapsed .sidebar-toggle{margin:0 auto 4px;transform:none}
/* Cápsulas de permisos del compañero */
.companion-permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.companion-permission-card{position:relative;display:flex;flex-direction:column;gap:7px;min-height:150px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px rgba(28,20,12,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.companion-permission-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(28,20,12,.10);border-color:#cdbfaf}
.companion-permission-card strong{font-family:Georgia,serif;font-size:28px;line-height:1.05}
.companion-permission-card small{color:var(--muted);font-weight:700}
.companion-permission-arrow{margin-top:auto;color:var(--red);font-size:22px;font-weight:900}
body.dark-mode .companion-permission-card{background:#181818;border-color:#37312c;box-shadow:none}
body.dark-mode .companion-permission-card small{color:#c8beb6}
body.dark-mode .companion-summary-grid .stat{background:#181818;border-color:#37312c}
@media(max-width:980px){.companion-permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.companion-permission-grid{grid-template-columns:1fr}}
/* Panel admin: tablas legibles en modo oscuro */
body.dark-mode.admin-body { --paper:#101010; --ink:#f4eee8; --muted:#b9b0a8; --line:#37312c; background:#101010; color:#f4eee8; }
body.dark-mode .admin-main .table-wrap { background:#181818; border-color:#37312c; color:#f4eee8; }
body.dark-mode .admin-main .table-wrap table { background:#181818; color:#f4eee8; }
body.dark-mode .admin-main .table-wrap thead { background:#24201d; }
body.dark-mode .admin-main .table-wrap th { color:#fff; background:#24201d; border-bottom-color:#4a413a; }
body.dark-mode .admin-main .table-wrap td { color:#e9e1da; border-bottom-color:#37312c; background:#181818; }
body.dark-mode .admin-main .table-wrap tbody tr:nth-child(even) td { background:#1d1a18; }
body.dark-mode .admin-main .table-wrap tbody tr:hover td { background:#27231f; }
body.dark-mode .admin-main .table-wrap a { color:#ff6a70; }
body.dark-mode .admin-main .table-wrap input,
body.dark-mode .admin-main .table-wrap select,
body.dark-mode .admin-main .table-wrap textarea { background:#111; color:#fff; border-color:#4a413a; }
body.dark-mode .admin-main .content-admin-card { background:#181818; border-color:#37312c; color:#f4eee8; }
body.dark-mode .admin-main .empty-content { background:#211d19; border-color:#4a413a; color:#c8beb6; }
.admin-home-link { display:flex; align-items:center; gap:8px; }
.admin-layout.sidebar-collapsed .admin-home-link { justify-content:center; }
.admin-layout.sidebar-collapsed .admin-home-link span { display:none; }
body.dark-mode .admin-home-link { color:#ddd; }
/* Selector de archivo con estilo propio del sitio (reemplaza el botón nativo "Elegir archivo") */
.field-label{display:block;font-weight:800;margin:0 0 10px}
.file-picker{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.file-picker-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);border:0}
.file-picker-btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:12px 22px;font-weight:900;font-size:14px;cursor:pointer;transition:background .18s ease,color .18s ease,transform .12s ease;margin:0}
.file-picker-btn .file-picker-icon{font-size:16px;line-height:1}
.file-picker-btn:hover{background:var(--ink);color:#fff}
.file-picker-btn:active{transform:scale(.97)}
.file-picker-input:focus-visible+.file-picker-btn{outline:2px solid var(--red);outline-offset:2px}
.file-picker-name{font-size:13px;color:var(--muted);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
body.dark-mode .file-picker-btn{border-color:#aaa;background:#111;color:#fff}
body.dark-mode .file-picker-btn:hover{background:#f4eee8;color:#111}
body.dark-mode .file-picker-name{color:#c8beb6}
@media(max-width:700px){.file-picker-name{max-width:100%}}
/* =============================================================================
AJUSTES RESPONSIVE Y DE ACCESIBILIDAD
-----------------------------------------------------------------------------
Este bloque va al final del archivo a proposito: al compartir especificidad
con las reglas anteriores, gana por orden de cascada y corrige sin tener que
editar las lineas minificadas de arriba.
Mientras el CSS no se divida en parciales (tarea A-02 de AGENTS.md),
toda regla responsive nueva se escribe AQUI, legible y comentada.
Breakpoints del proyecto:
<= 1100px escritorio angosto / tablet horizontal
<= 980px tablet vertical -> el menu pasa a hamburguesa
<= 700px movil grande
<= 460px movil pequeno (360-390px reales)
========================================================================== */
/* -----------------------------------------------------------------------------
1. Sin scroll horizontal en ningun ancho
Se usa `clip` en lugar de `hidden` porque `hidden` en rompe el
position:sticky de .site-header en Safari y Chrome.
-------------------------------------------------------------------------- */
html,
body {
max-width: 100%;
overflow-x: clip;
}
/* Todo lo que puede desbordar por contenido largo (URLs, palabras sin espacio) */
.card-body h2,
.card-body h3,
.card-body p,
.article-body,
.article h1,
.list-card h2,
.memory-card h2,
.workshop-card h2,
.profile-panel-head strong,
.profile-panel-head small,
.table-wrap td,
.stat strong {
overflow-wrap: anywhere;
word-break: normal;
}
.article-body img,
.article-body iframe,
.article-body table {
max-width: 100%;
}
/* Tablas del panel: scroll tactil suave y contenedor que no empuja el layout */
.table-wrap {
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
max-width: 100%;
}
/* -----------------------------------------------------------------------------
2. Tipografia fluida
Varios titulos tenian tamano fijo (44-45px) y se salian del ancho en
pantallas de 320-360px.
-------------------------------------------------------------------------- */
.section-head h2,
.split-copy h2 {
font-size: clamp(28px, 5.2vw, 44px);
}
.join-inner h2 {
font-size: clamp(28px, 5.4vw, 45px);
}
.card-body h2,
.card-body h3 {
font-size: clamp(21px, 3.4vw, 28px);
}
/* -----------------------------------------------------------------------------
3. Objetivos tactiles de 44x44px como minimo (WCAG 2.5.8)
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
.navlinks a,
.menu-dropdown-title,
.menu-column a,
.profile-panel > a,
.admin-nav a,
.btn,
.see-all {
min-height: 44px;
display: flex;
align-items: center;
}
.btn,
.menu-dropdown-title {
justify-content: center;
}
.menu-toggle {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* -----------------------------------------------------------------------------
4. Menu hamburguesa desde 980px, no desde 700px
Entre 701px y 980px la barra tenia que acomodar: marca + Inicio + Novedades
+ Menu + tema + Donar + perfil. Se apretaba y se partia en dos filas.
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
.nav {
min-height: 74px;
gap: 12px;
}
.menu-toggle {
display: flex;
}
.navlinks {
display: none;
position: absolute;
top: 100%;
left: 16px;
right: 16px;
margin-top: 8px;
/* var(--paper) y var(--line) en lugar de #fff: el panel tambien
tiene que verse bien en modo oscuro. */
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
padding: 10px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
/* Con el mega-menu abierto el panel puede superar la altura de la
pantalla; se hace desplazable en vez de quedar cortado. */
max-height: calc(100vh - 90px);
max-height: calc(100dvh - 90px);
overflow-y: auto;
overscroll-behavior: contain;
}
.navlinks.show {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.navlinks a {
text-align: center;
justify-content: center;
}
.navlinks .login-nav {
margin-left: 0;
}
/* El mega-menu deja de ser una capa flotante y se despliega en linea */
.menu-dropdown {
display: block;
width: 100%;
}
.menu-dropdown-title {
width: 100%;
}
.menu-panel {
position: static;
width: 100%;
margin-top: 8px;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: none;
transform: none;
display: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.menu-dropdown.open .menu-panel {
display: block;
transform: none;
}
.menu-panel-inner {
width: 100%;
grid-template-columns: 1fr;
gap: 18px;
padding: 18px;
}
.menu-column a {
text-align: center;
}
/* Perfil y tema, a ancho completo dentro del panel */
.profile-menu {
width: 100%;
margin-left: 0;
}
.profile-trigger {
width: 100%;
justify-content: center;
}
.profile-panel {
position: static;
width: auto;
margin-top: 8px;
box-shadow: none;
}
.profile-name {
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* En escritorio el mega-menu no debe superar la altura visible */
@media (min-width: 981px) {
.menu-panel {
max-height: calc(100vh - 95px);
overflow-y: auto;
}
}
/* -----------------------------------------------------------------------------
5. Hero: la sombra dura de 20px desbordaba el viewport en movil y provocaba
scroll horizontal en toda la pagina.
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
.hero-art {
box-shadow: 10px 10px 0 #111;
margin-right: 10px;
}
}
@media (max-width: 700px) {
.hero-art {
box-shadow: 6px 6px 0 #111;
margin-right: 6px;
border-radius: 18px;
}
.hero-art img {
height: clamp(200px, 46vw, 300px);
}
}
/* -----------------------------------------------------------------------------
6. Formularios en movil
-------------------------------------------------------------------------- */
@media (max-width: 700px) {
/* iOS hace zoom al enfocar un campo con letra menor a 16px */
input,
textarea,
select {
font-size: 16px;
}
.form-card,
.wide-form {
padding-left: 18px;
padding-right: 18px;
}
.file-picker {
gap: 10px;
}
.file-picker-btn {
width: 100%;
}
/* Los botones de accion principal ocupan el ancho: mas faciles de tocar */
.auth-card .btn,
.form-card .btn,
.login-btn {
width: 100%;
}
}
/* -----------------------------------------------------------------------------
7. Donaciones: la reticula de 1fr 360px se apretaba antes de los 980px
-------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.donation-hero {
grid-template-columns: 1fr minmax(0, 320px);
padding: 34px;
}
}
@media (max-width: 980px) {
.donation-hero {
grid-template-columns: 1fr;
padding: 28px;
}
.donation-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 460px) {
.qr-image {
width: 100%;
max-width: 220px;
height: auto;
aspect-ratio: 1 / 1;
}
}
/* -----------------------------------------------------------------------------
8. Movil pequeno (360-390px reales)
-------------------------------------------------------------------------- */
@media (max-width: 460px) {
.wrap {
width: min(var(--max), calc(100% - 20px));
}
.hero-copy h1,
.page-intro h1,
.about-hero h1,
.donation-hero h1,
.article h1,
.auth-card h1 {
font-size: clamp(34px, 11vw, 44px);
}
.brand img {
width: 44px;
height: 44px;
}
.brand span {
font-size: 12px;
}
.brand b {
font-size: 17px;
}
/* La imagen de 120px dejaba el texto en una columna inservible */
.memory-card {
grid-template-columns: 1fr;
}
.memory-img img {
width: 100%;
height: 180px;
object-fit: cover;
}
.article-cover {
border-radius: 14px;
max-height: 320px;
}
.article-body {
font-size: 17px;
}
.section {
padding: 46px 0;
}
.main {
padding: 24px 0 56px;
}
.card-body,
.stat,
.admin-box {
padding: 16px;
}
.actions {
gap: 10px;
}
.actions .btn {
width: 100%;
}
.footer-grid {
gap: 26px;
}
}
/* -----------------------------------------------------------------------------
9. Foco visible para navegacion por teclado
Solo existia en .file-picker-input; el resto del sitio quedaba sin
indicador al tabular.
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--red);
outline-offset: 2px;
border-radius: 6px;
}
body.dark-mode a:focus-visible,
body.dark-mode button:focus-visible,
body.dark-mode input:focus-visible,
body.dark-mode textarea:focus-visible,
body.dark-mode select:focus-visible {
outline-color: #ff6a70;
}
/* Enlace para saltar al contenido (lo usa includes/header.php) */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 12px 18px;
background: var(--red);
color: #fff;
font-weight: 900;
border-radius: 0 0 12px 0;
}
.skip-link:focus {
left: 0;
}
/* -----------------------------------------------------------------------------
10. Respeta la preferencia de menos animacion del sistema
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.opinion-card:hover {
transform: none;
}
}
/* -----------------------------------------------------------------------------
11. Impresion: una columna legible, sin cromo de navegacion.
Util para columnas y fichas de investigacion.
-------------------------------------------------------------------------- */
@media print {
.site-header,
.footer,
.join-band,
.menu-toggle,
.theme-toggle,
.donate-nav,
.profile-menu,
.skip-link,
.admin-side {
display: none !important;
}
body {
background: #fff;
color: #000;
}
.wrap,
.article {
width: 100%;
max-width: none;
}
}
/* =============================================================================
BANNER HORIZONTAL Y REVISION TIPOGRAFICA
-----------------------------------------------------------------------------
Va despues del bloque de ajustes responsive, asi que gana por cascada.
========================================================================== */
/* -----------------------------------------------------------------------------
1. BANNER HORIZONTAL
-----------------------------------------------------------------------------
Antes el banner era la columna derecha del hero (.hero-art) con
height:520px y object-fit:cover. Como la imagen es 1983x793 (2.5:1) y el
contenedor quedaba en ~1.1:1, se recortaba mas de la mitad de la imagen a
los lados: no se veia el banner, se veia un trozo central de el.
Ahora es una banda propia, a todo el ancho del contenedor, con la
proporcion real de la imagen, y colocada justo debajo del navbar.
-------------------------------------------------------------------------- */
/* NOTA DE MANTENIMIENTO
.hero-art ya no existe en el HTML: era el contenedor del banner cuando el
hero tenia dos columnas. Sus reglas (incluidas las del punto 5 del bloque
responsive de arriba) quedan como CSS muerto. No se borran aqui porque
viven en las lineas minificadas del principio del archivo; se limpian
cuando se haga la tarea A-02 (dividir el CSS). */
.hero-banner {
/* Separacion respecto al navbar. .main ya aporta 34px arriba; esto lo
deja en un aire deliberado sin despegarlo del encabezado. */
margin: 6px 0 0;
border: 1px solid #111;
border-radius: 20px;
overflow: hidden;
background: #000;
/* Sombra dura hacia abajo, no hacia el lado: a ancho completo una sombra
lateral desbordaria el viewport y generaria scroll horizontal. */
box-shadow: 0 14px 0 #111;
/* La sombra ocupa espacio visual: se reserva para que no pise el texto. */
margin-bottom: 14px;
}
.hero-banner img {
display: block;
width: 100%;
height: auto;
/* Proporcion real del archivo: la imagen se ve completa, sin recorte. */
aspect-ratio: 1983 / 793;
object-fit: cover;
}
/* El hero deja de ser de dos columnas: el texto va debajo del banner,
en una sola columna legible. */
.hero.hero-stacked {
display: block;
padding: 30px 0 56px;
}
.hero-stacked .hero-copy {
/* Ancho de lectura comodo para el titular y la entradilla. */
max-width: 900px;
}
.hero-stacked .hero-copy h1 {
margin: 8px 0 20px;
/* El clamp original (44-88px) estaba calculado para el titular metido en
una columna estrecha al lado del banner. Ahora que ocupa todo el ancho,
88px lo partia en tres lineas y empujaba parrafo y botones fuera de la
primera pantalla. Esta escala lo deja en dos lineas comodas. */
font-size: clamp(36px, 5.2vw, 64px);
}
/* El salto de linea manual del titular se quito del HTML: ahora el titular
se reparte solo segun el ancho disponible. */
.hero-stacked .hero-copy h1 span {
display: inline;
}
.hero-lead {
max-width: 680px;
}
/* Móvil: banda mas compacta y esquinas mas suaves */
@media (max-width: 700px) {
.hero-banner {
border-radius: 14px;
box-shadow: 0 8px 0 #111;
margin-bottom: 8px;
}
.hero.hero-stacked {
padding: 22px 0 40px;
}
}
@media (max-width: 460px) {
.hero-banner {
border-radius: 12px;
box-shadow: 0 6px 0 #111;
}
.hero-stacked .hero-copy h1 {
margin: 6px 0 16px;
}
}
/* En modo oscuro el borde negro sobre fondo negro desaparece: se aclara. */
body.dark-mode .hero-banner {
border-color: #37312c;
box-shadow: 0 14px 0 #2a2522;
}
@media (max-width: 700px) {
body.dark-mode .hero-banner {
box-shadow: 0 8px 0 #2a2522;
}
}
/* -----------------------------------------------------------------------------
2. TIPOGRAFIA
-----------------------------------------------------------------------------
Problema encontrado: el body pedia `Inter, Arial, sans-serif` pero Inter
NUNCA se cargaba (no hay @font-face, ni @import, ni a Google Fonts).
Resultado: todo el sitio se renderizaba en Arial, que no tiene los pesos
800/900 que el CSS pide, asi que el navegador los falsificaba engrosando
los trazos. De ahi el aspecto pastoso de la navegacion y los botones.
Solucion sin dependencias externas (el proyecto no usa CDN a proposito):
pila de fuentes del sistema, que en Windows da Segoe UI, en macOS/iOS
San Francisco y en Android Roboto. Todas tienen pesos reales.
Si mas adelante se quiere Inter de verdad, hay que auto-alojarla en
assets/fonts/ con @font-face y font-display:swap; NO por CDN, porque
rompe la politica CSP prevista en .htaccess.
-------------------------------------------------------------------------- */
:root {
--font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-serif: Georgia, "Iowan Old Style", "Palatino Linotype",
"Times New Roman", serif;
/* Escala tipografica: razon 1.25 sobre una base de 16px. Sustituye a los
tamanos sueltos que habia repartidos por el archivo. */
--step--1: 0.8125rem; /* 13px etiquetas, metadatos */
--step-0: 1rem; /* 16px texto base */
--step-1: 1.125rem; /* 18px entradillas */
--step-2: 1.1875rem; /* 19px cuerpo de articulo */
}
body {
font-family: var(--font-sans);
font-size: var(--step-0);
/* 1.6 era correcto para parrafos pero muy suelto para titulares; los
titulares fijan el suyo mas abajo. */
line-height: 1.65;
/* Suaviza el trazo en pantallas de alta densidad. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Ligaduras y kerning tipograficos activos. */
font-kerning: normal;
text-rendering: optimizeLegibility;
}
/* Los titulares siguen en serif: es la identidad del sitio. Solo se
centraliza la familia y se corrige el reparto de lineas. */
.hero-copy h1,
.page-intro h1,
.about-hero h1,
.donation-hero h1,
.article h1,
.auth-card h1,
.section-head h2,
.split-copy h2,
.card-body h2,
.card-body h3,
.list-card h2,
.workshop-card h2,
.join-inner h2,
.memory-home-card h3,
.content-admin-head h2,
.content-admin-card h3,
.companion-permission-card strong,
.quote-grid p,
.three-cols span {
font-family: var(--font-serif);
/* Reparte las lineas de forma equilibrada en vez de dejar una palabra
huerfana en la ultima. Los navegadores que no lo soportan lo ignoran. */
text-wrap: balance;
}
/* Los titulares grandes con letra serif necesitan interlineado mas corto
y kerning negativo; ya estaban asi, pero el ajuste optico faltaba. */
.hero-copy h1,
.page-intro h1,
.about-hero h1,
.donation-hero h1,
.article h1,
.auth-card h1 {
line-height: 1.02;
letter-spacing: -0.03em;
}
.section-head h2,
.split-copy h2,
.join-inner h2 {
line-height: 1.08;
letter-spacing: -0.02em;
}
.card-body h2,
.card-body h3,
.list-card h2,
.workshop-card h2,
.memory-home-card h3 {
line-height: 1.18;
letter-spacing: -0.01em;
}
/* -----------------------------------------------------------------------------
3. PESOS REALES EN LUGAR DE NEGRITA FALSIFICADA
-----------------------------------------------------------------------------
El CSS pedia font-weight:900 en botones, nav y etiquetas. Ni Segoe UI ni
Arial ni Roboto tienen un corte 900, asi que el navegador lo sintetizaba
(synthetic bold): engrosa el trazo de forma sucia y come contraste. 700 es
un peso que existe de verdad en todas las pilas del sistema.
-------------------------------------------------------------------------- */
.btn,
.navlinks a,
.menu-dropdown-title,
.menu-column a,
.see-all,
.profile-trigger,
.brand,
.footer-grid h4,
.field-label,
.file-picker-btn {
font-weight: 700;
}
/* La marca y el titulo del footer si aceptan un peso mas alto: son cortos
y funcionan como logotipo. */
.brand b {
font-weight: 800;
}
/* Las etiquetas en mayusculas necesitan menos peso y mas espaciado: en
mayusculas el 900 se lee como un bloque macizo. */
.eyebrow,
.tag {
font-weight: 700;
font-size: var(--step--1);
letter-spacing: .12em;
}
.tag {
font-size: 0.75rem;
}
/* -----------------------------------------------------------------------------
4. CUERPO DE TEXTO: MEDIDA Y LEGIBILIDAD
-------------------------------------------------------------------------- */
.hero-copy p,
.hero-lead {
font-size: var(--step-1);
line-height: 1.6;
}
/* El articulo es lo que la gente viene a leer: medida de linea acotada a
~70 caracteres, que es el rango comodo de lectura continua. */
.article-body {
font-size: var(--step-2);
line-height: 1.75;
max-width: 68ch;
}
.article-body p {
margin: 0 0 1.2em;
}
/* Cifras alineadas en tablas y contadores del panel: evita que los digitos
bailen de ancho. */
.table-wrap td,
.table-wrap th,
.stat strong,
.article-meta {
font-variant-numeric: tabular-nums;
}
/* Comillas tipograficas reales en las citas */
.quote-grid p {
quotes: "\201C" "\201D";
}
@media (max-width: 460px) {
.hero-copy p,
.hero-lead {
font-size: var(--step-0);
}
}
/* =============================================================================
ESCALA VISUAL — TITULARES, CUERPO, IMAGENES Y ESPACIADO
-----------------------------------------------------------------------------
Ultimo bloque del archivo: gana por cascada sobre todo lo anterior,
incluidas las media queries de los bloques previos.
Motivo: titulares e imagenes estaban calibrados muy grandes (h1 hasta 88px,
banner de 488px de alto, seccion partida de ~640px, secciones con 74px de
aire arriba y abajo). El inicio medía mas de 3.500px de alto y cada bloque
ocupaba una pantalla completa, asi que apenas se veian dos secciones a la
vez y el contenido real quedaba muy abajo.
Criterio: una escala tipografica de razon ~1.2 sobre base de 15px, imagenes
con proporcion acotada en vez de altura libre, y espaciado vertical
reducido a dos tercios. Los limites de 44px de zona tactil y la medida de
lectura del articulo se conservan.
========================================================================== */
/* -----------------------------------------------------------------------------
1. ESCALA TIPOGRAFICA
-------------------------------------------------------------------------- */
:root {
--step--2: 0.719rem; /* 11.5px etiquetas .tag */
--step--1: 0.75rem; /* 12px .eyebrow, metadatos */
--step-0: 0.9375rem; /* 15px cuerpo de interfaz y tarjetas */
--step-1: 1rem; /* 16px entradillas */
--step-2: 1.0625rem; /* 17px cuerpo de articulo */
}
body {
font-size: var(--step-0);
line-height: 1.6;
}
/* -----------------------------------------------------------------------------
2. TITULARES
-----------------------------------------------------------------------------
Antes: un unico clamp(44px, 7vw, 88px) para h1 del hero, de las paginas
internas, del articulo y de las tarjetas de acceso. 88px es tamaño de
cartel, no de encabezado de pagina.
-------------------------------------------------------------------------- */
/* h1 del inicio: el mas grande del sitio, pero sin ocupar media pantalla */
.hero-stacked .hero-copy h1 {
font-size: clamp(27px, 3.1vw, 40px);
margin: 4px 0 12px;
}
/* h1 de paginas internas, articulo y tarjetas de acceso */
.page-intro h1,
.about-hero h1,
.donation-hero h1,
.article h1,
.auth-card h1 {
font-size: clamp(26px, 3vw, 38px);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 6px 0 14px;
}
/* h2 de cabecera de seccion */
.section-head h2,
.split-copy h2 {
font-size: clamp(21px, 2.3vw, 29px);
line-height: 1.12;
}
.join-inner h2 {
font-size: clamp(21px, 2.5vw, 31px);
line-height: 1.12;
}
/* Titulos de tarjeta: eran clamp(21px, 3.4vw, 28px) */
.card-body h2,
.card-body h3 {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.25;
}
.list-card h2,
.workshop-card h2,
.memory-card h2,
.memory-home-card h3,
.content-admin-card h3 {
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.25;
}
.content-admin-head h2,
.admin-main h1 {
font-size: clamp(20px, 2.1vw, 26px);
line-height: 1.15;
}
.three-cols h3,
.footer-grid h4 {
font-size: 1rem;
}
/* Numeracion decorativa de "Quienes somos": era tamaño de titular */
.three-cols span {
font-size: 26px;
}
/* -----------------------------------------------------------------------------
3. CUERPO DE TEXTO Y ETIQUETAS
-------------------------------------------------------------------------- */
.eyebrow {
font-size: var(--step--1);
letter-spacing: .13em;
}
.tag {
font-size: var(--step--2);
letter-spacing: .1em;
}
.hero-copy p,
.hero-lead {
font-size: var(--step-1);
line-height: 1.58;
max-width: 620px;
}
/* CORRECCION DE ESPECIFICIDAD
.hero-copy p y .page-intro p (0,1,1) son mas especificos que .eyebrow
(0,1,0), asi que se estaban tragando el tamaño de la etiqueta: el eyebrow
del hero se renderizaba a 16px en vez de 12px, y a 390px ocupaba dos
lineas. p.eyebrow empata en especificidad y gana por ir despues. */
p.eyebrow,
.eyebrow {
font-size: var(--step--1);
line-height: 1.5;
letter-spacing: .13em;
margin-bottom: 2px;
}
.card-body p,
.page-intro p,
.split-copy p,
.workshop-card p,
.memory-card p,
.memory-home-card p,
.about-hero p {
font-size: var(--step-0);
}
.article-body {
font-size: var(--step-2);
line-height: 1.72;
max-width: 66ch;
}
.article-meta,
.card-body small,
.list-card small,
.note {
font-size: var(--step--1);
}
/* Botones y navegacion: 14px de peso 900 era el elemento mas pesado de la
interfaz. La zona tactil de 44px en movil se mantiene por el bloque de
accesibilidad de arriba. */
.btn {
font-size: 0.8125rem;
padding: 10px 17px;
}
.navlinks a,
.menu-dropdown-title {
font-size: 0.8125rem;
padding: 8px 11px;
}
.menu-column a {
font-size: var(--step-0);
}
.see-all {
font-size: 0.8125rem;
}
/* -----------------------------------------------------------------------------
4. IMAGENES — PROPORCION ACOTADA EN LUGAR DE ALTURA LIBRE
-----------------------------------------------------------------------------
Este era el problema mas visible. Cada imagen crecia con su contenedor sin
techo, asi que en pantallas grandes el banner llegaba a 488px y la seccion
partida a ~640px de alto.
-------------------------------------------------------------------------- */
/* Banner del inicio: la proporcion natural (2.5:1) da 488px de alto a
1220px de ancho. Se recorta a una banda mas apaisada, que además es lo que
se pidio: mas horizontal. El logotipo y la onda estan centrados, asi que
el recorte vertical no pierde nada. */
.hero-banner img {
aspect-ratio: 3.6 / 1;
object-fit: cover;
}
.hero-banner {
border-radius: 16px;
box-shadow: 0 10px 0 #111;
margin-bottom: 10px;
}
body.dark-mode .hero-banner {
box-shadow: 0 10px 0 #2a2522;
}
/* Tarjetas de listado: 16/10 daba 244px de alto por tarjeta */
.card-media {
aspect-ratio: 16 / 9;
}
/* Seccion partida (Pre-ICFES + Talleres). La altura la imponia
.split-copy{padding:54px}; la imagen cuadrada de 1254px la seguia con
height:100%. Se acota la altura del bloque y se reduce el relleno. */
.split-section {
border-radius: 18px;
margin: 16px 0;
}
.split-copy {
padding: 32px;
}
@media (min-width: 981px) {
.split-section {
max-height: 340px;
}
}
/* Portada de articulo: 600px de alto era casi una pantalla */
.article-cover {
max-height: 300px;
border-radius: 14px;
margin: 14px 0 22px;
}
/* Retrato de "Quienes somos" */
.about-hero img {
max-height: 300px;
border-radius: 18px;
}
/* Fichas horizontales de entrevistas: la columna de imagen era de 280px */
.list-card {
grid-template-columns: 190px 1fr;
gap: 18px;
padding: 12px;
border-radius: 16px;
}
.list-card img {
aspect-ratio: 3 / 2;
border-radius: 11px;
}
/* Fichas de memoria */
.memory-card {
grid-template-columns: 140px 1fr;
border-radius: 14px;
}
.memory-card > div:last-child {
padding: 16px;
}
/* Logotipos */
.brand img {
width: 44px;
height: 44px;
}
.footer-logo {
width: 56px;
height: 56px;
}
.qr-image {
width: 180px;
height: 180px;
}
/* -----------------------------------------------------------------------------
5. ESPACIADO VERTICAL
-----------------------------------------------------------------------------
Con 74px de relleno por seccion mas 50px de margen entre bloques, entre el
hero y "Novedades" habia ~130px de blanco. Se reduce a dos tercios.
-------------------------------------------------------------------------- */
.main {
padding: 18px 0 48px;
}
.section {
padding: 42px 0;
}
.section-head {
margin-bottom: 18px;
}
.hero.hero-stacked {
padding: 18px 0 26px;
}
.page-intro {
padding: 20px 0 24px;
}
.dark-section {
padding: 32px;
margin-top: 26px;
border-radius: 18px;
}
.join-band {
padding: 30px 0;
}
.footer {
padding: 34px 0 16px;
}
.card-body {
padding: 15px 17px 17px;
}
.workshop-card,
.memory-home-card {
padding: 18px;
border-radius: 14px;
}
.three-cols {
gap: 20px;
}
.about-hero {
padding: 28px 0;
gap: 28px;
}
.donation-hero {
padding: 30px;
border-radius: 18px;
}
.opinion-card,
.library-card {
border-radius: 14px;
}
.actions {
margin-top: 18px;
gap: 10px;
}
/* -----------------------------------------------------------------------------
6. AJUSTES DE LA NUEVA ESCALA EN PANTALLAS PEQUENAS
-----------------------------------------------------------------------------
Sustituye a los tamaños que fijaban los bloques responsive anteriores, que
ahora resultarian mayores que los de escritorio.
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
/* El banner recupera altura al estrecharse: con 3.6:1 a 700px de ancho
quedaria en 194px y el logotipo se apretaria. */
.hero-banner img {
aspect-ratio: 3 / 1;
}
/* La seccion partida pasa a una columna y la imagen (epic.png, cuadrada
de 1254px) tomaba su proporcion 1:1: 350px de alto solo de imagen, que
con el texto dejaba el bloque en 700px. */
.split-media img {
height: 200px;
object-fit: cover;
}
.section {
padding: 34px 0;
}
.split-copy {
padding: 26px;
}
.dark-section {
padding: 26px;
}
}
@media (max-width: 700px) {
/* Proporcion natural de la imagen: es el ancho donde el recorte
empezaria a comerse el logotipo. */
.hero-banner img {
aspect-ratio: 2.5 / 1;
}
.hero-banner {
border-radius: 12px;
box-shadow: 0 7px 0 #111;
}
body.dark-mode .hero-banner {
box-shadow: 0 7px 0 #2a2522;
}
.hero.hero-stacked {
padding: 14px 0 22px;
}
.split-media img {
height: 165px;
}
.section {
padding: 30px 0;
}
.main {
padding: 14px 0 40px;
}
.list-card h2 {
font-size: 18px;
}
.article-cover {
max-height: 220px;
}
.about-hero img {
max-height: 240px;
}
}
@media (max-width: 460px) {
/* Estos selectores repiten los del bloque responsive anterior a proposito:
alli fijaban clamp(34px, 11vw, 44px), que con la escala nueva seria
mayor que el tamaño de escritorio. */
.hero-copy h1,
.page-intro h1,
.about-hero h1,
.donation-hero h1,
.article h1,
.auth-card h1 {
font-size: clamp(25px, 7.4vw, 31px);
}
.hero-stacked .hero-copy h1 {
font-size: clamp(26px, 7.8vw, 33px);
}
.section {
padding: 26px 0;
}
.card-body {
padding: 14px;
}
.split-copy,
.dark-section,
.donation-hero {
padding: 20px;
}
.memory-img img {
height: 150px;
}
.footer-logo {
width: 48px;
height: 48px;
}
}
/* =============================================================================
MENUS, PERFIL, FOOTER Y PANEL
-----------------------------------------------------------------------------
Ultimo bloque del archivo: gana por cascada.
========================================================================== */
/* -----------------------------------------------------------------------------
1. MENU DESPLEGABLE PRINCIPAL (mega-menu)
-----------------------------------------------------------------------------
Antes: panel a todo el ancho de la ventana, tres columnas separadas por 45px
y 34px de relleno inferior. Ocupaba una banda enorme y las columnas quedaban
flotando sin relacion visual entre si.
Ahora: tarjeta acotada y alineada al boton que la abre, columnas separadas
por una linea, y estados de hover/foco claros.
-------------------------------------------------------------------------- */
@media (min-width: 981px) {
.menu-dropdown {
position: relative;
}
.menu-panel {
/* Tarjeta anclada al boton, no banda de ancho completo */
left: 50%;
right: auto;
transform: translateX(-50%) translateY(-6px);
width: min(680px, calc(100vw - 40px));
top: calc(100% + 10px);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 18px 44px rgba(24, 15, 8, .16);
overflow: hidden;
}
.menu-dropdown.open .menu-panel {
transform: translateX(-50%) translateY(0);
}
.menu-panel-inner {
width: 100%;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: 6px;
}
/* Separadores finos entre columnas, en lugar de 45px de hueco */
.menu-column {
padding: 14px 16px;
position: relative;
}
.menu-column + .menu-column::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 1px;
background: var(--line);
}
}
/* Encabezado de columna: mas discreto, sin la linea inferior a todo lo ancho */
.menu-column h3 {
font-size: 10.5px;
letter-spacing: .16em;
color: var(--muted);
border-bottom: 0;
padding-bottom: 0;
margin: 0 0 8px;
}
/* Los enlaces pasan a ser filas con area de pulsacion propia */
.menu-column a {
padding: 8px 10px;
margin: 0 -10px;
border-radius: 9px;
font-weight: 600;
color: var(--ink);
transition: background .14s ease, color .14s ease;
}
/* El translateX del hover original desplazaba el texto y se sentia inestable */
.menu-column a:hover,
.menu-column a:focus-visible,
.menu-column a.active {
background: var(--cream) !important;
color: var(--red) !important;
transform: none;
}
.menu-column a.active {
font-weight: 800;
}
body.dark-mode .menu-column a {
color: #efe7df;
}
body.dark-mode .menu-column a:hover,
body.dark-mode .menu-column a:focus-visible,
body.dark-mode .menu-column a.active {
background: #262220 !important;
}
body.dark-mode .menu-panel {
box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
@media (min-width: 981px) {
body.dark-mode .menu-column + .menu-column::before {
background: #37312c;
}
}
/* La flecha gira, y el boton se marca como activo mientras el panel esta abierto */
.menu-arrow {
font-size: 13px;
opacity: .7;
}
/* En movil el mega-menu es una lista plegada: los titulos de columna
necesitan separacion propia porque no hay columnas que los distingan. */
@media (max-width: 980px) {
.menu-panel-inner {
gap: 4px;
padding: 10px;
}
.menu-column {
padding: 8px 0;
}
.menu-column + .menu-column {
border-top: 1px solid var(--line);
}
body.dark-mode .menu-column + .menu-column {
border-top-color: #37312c;
}
.menu-column h3 {
margin-bottom: 4px;
}
.menu-column a {
margin: 0;
padding: 10px;
}
}
/* -----------------------------------------------------------------------------
2. MENU DE PERFIL
-----------------------------------------------------------------------------
Antes: panel de 250px con los enlaces sin area propia y el "Cerrar sesion"
pegado con un borde suelto.
-------------------------------------------------------------------------- */
.profile-panel {
width: 236px;
border-radius: 14px;
padding: 6px;
box-shadow: 0 16px 40px rgba(24, 15, 8, .18);
}
.profile-panel-head {
padding: 9px 10px 11px;
margin-bottom: 4px;
gap: 10px;
}
.profile-panel-head strong {
display: block;
font-size: var(--step-0);
line-height: 1.25;
}
.profile-panel-head small {
display: block;
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 700;
margin-top: 1px;
}
.profile-panel > a {
display: block;
padding: 9px 10px;
border-radius: 9px;
font-size: var(--step-0);
font-weight: 600;
transition: background .14s ease, color .14s ease;
}
.profile-panel > a:hover,
.profile-panel > a:focus-visible {
background: var(--cream);
color: var(--red);
}
/* Separador propio en lugar de un borde sobre el enlace */
.profile-panel .profile-logout {
margin-top: 5px;
padding-top: 10px;
border-top: 1px solid var(--line);
border-radius: 0 0 9px 9px;
font-weight: 700;
}
.profile-panel .profile-logout:hover {
background: rgba(179, 32, 32, .08);
color: #b32020;
}
body.dark-mode .profile-panel > a:hover,
body.dark-mode .profile-panel > a:focus-visible {
background: #262220;
color: #ff8a8f;
}
body.dark-mode .profile-panel .profile-logout:hover {
background: rgba(255, 119, 119, .12);
color: #ff8a8f;
}
.profile-avatar {
width: 30px;
height: 30px;
font-size: 13px;
font-weight: 800;
}
.profile-avatar-panel {
width: 38px;
height: 38px;
}
.profile-trigger {
padding: 4px 9px 4px 5px;
font-weight: 700;
font-size: 0.8125rem;
}
.profile-arrow {
font-size: 13px;
opacity: .7;
}
/* -----------------------------------------------------------------------------
3. PAGINA DE PERFIL
-----------------------------------------------------------------------------
Antes: la tarjeta usaba width:fit-content (ancho impredecible), el avatar
estaba centrado pero el texto alineado a la izquierda, el boton "Guardar
foto" caia suelto bajo el selector de archivo y las acciones quedaban
pegadas al margen izquierdo. Ahora todo va en un eje central.
-------------------------------------------------------------------------- */
.profile-card {
width: 100%;
min-width: 0;
max-width: 440px;
margin: 34px auto;
padding: 30px 28px 26px;
border-radius: 20px;
text-align: center;
box-shadow: 0 16px 44px rgba(28, 20, 12, .09);
}
.profile-card .eyebrow {
margin: 0 0 4px;
}
.profile-card h1 {
font-size: clamp(21px, 2.4vw, 27px);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.profile-email {
color: var(--muted);
font-size: var(--step-0);
margin: 0 0 12px;
overflow-wrap: anywhere;
}
/* El rol pasa de "Bienvenido: Admin" a una etiqueta */
.profile-role-chip {
display: inline-block;
margin: 0;
padding: 4px 12px;
border-radius: 999px;
background: var(--cream);
border: 1px solid var(--line);
color: var(--ink);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .11em;
}
.profile-photo-wrap {
display: flex;
justify-content: center;
margin: 0 0 16px;
}
.profile-avatar-large,
.profile-photo-large {
width: 96px;
height: 96px;
font-size: 34px;
margin: 0;
}
/* Bloque de cambio de foto: una columna centrada, no elementos sueltos */
.profile-photo-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px;
margin: 20px 0 18px;
}
.profile-photo-form .field-label {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .11em;
color: var(--muted);
}
.profile-photo-form .file-picker {
flex-direction: column;
align-items: center;
gap: 7px;
margin: 0;
width: 100%;
}
.profile-photo-form .file-picker-btn {
width: 100%;
max-width: 230px;
}
.profile-photo-form .file-picker-name {
max-width: 100%;
font-size: 12px;
color: var(--muted);
text-align: center;
overflow-wrap: anywhere;
}
.profile-save-btn {
width: 100%;
max-width: 230px;
}
.profile-photo-hint {
margin: 0;
font-size: 11px;
color: var(--muted);
}
/* Acciones: apiladas y a la misma anchura, no una fila desalineada */
.profile-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.profile-actions .btn {
width: 100%;
max-width: 230px;
}
/* Cerrar sesion no es una accion equivalente a las otras: pierde el marco */
.btn-plain {
background: transparent;
border: 0;
color: var(--muted);
font-weight: 700;
}
.profile-logout-link {
color: #b32020;
}
.profile-logout-link:hover {
background: rgba(179, 32, 32, .08);
}
body.dark-mode .profile-role-chip {
background: #221e1c;
border-color: #37312c;
color: #efe7df;
}
body.dark-mode .profile-photo-form {
background: #1f1c1a;
border-color: #37312c;
}
body.dark-mode .profile-logout-link {
color: #ff8a8f;
}
.profile-card .alert {
text-align: left;
}
@media (max-width: 460px) {
.profile-card {
max-width: none;
margin: 18px auto;
padding: 24px 18px 22px;
}
.profile-avatar-large,
.profile-photo-large {
width: 84px;
height: 84px;
font-size: 30px;
}
}
/* -----------------------------------------------------------------------------
4. SELECTOR DE ARCHIVO — CORRECCION
-----------------------------------------------------------------------------
.file-picker es flex y el label podia encogerse, asi que el contenido
envolvia: el icono quedaba en una linea y "Elegir imagen" en la siguiente,
dentro de la capsula. Afectaba tambien al formulario de contenidos.
-------------------------------------------------------------------------- */
/* El label del selector computaba display:grid, no inline-flex: reglas como
`.auth-card label{display:grid}` (0,1,1) ganaban a `.file-picker-btn`
(0,1,0), asi que el icono y el texto se apilaban en dos filas dentro de la
capsula. Con `label.file-picker-btn` sube la especificidad y gana. */
label.file-picker-btn,
.file-picker label.file-picker-btn {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
flex-shrink: 0;
white-space: nowrap;
margin: 0;
}
.file-picker-icon {
display: inline-block;
width: auto;
}
.file-picker-name {
min-width: 0;
}
.file-picker-name {
min-width: 0;
}
/* -----------------------------------------------------------------------------
5. FOOTER
-----------------------------------------------------------------------------
Antes: 48px de relleno superior, columnas con 40px de separacion, logo de
80px, enlaces con 8px de margen vertical y 36px de margen sobre la linea
inferior. En total mas de 300px de alto en escritorio.
-------------------------------------------------------------------------- */
.footer {
padding: 26px 0 12px;
font-size: var(--step-0);
}
.footer-grid {
grid-template-columns: 1.6fr 1fr 1fr;
gap: 24px;
}
.footer-grid h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .12em;
margin: 0 0 8px;
color: #fff;
}
.footer-grid a {
margin: 5px 0;
font-size: 13px;
color: #b6b0aa;
}
.footer-grid a:hover {
color: #fff;
}
.footer-grid p {
margin: 8px 0 0;
font-size: 13px;
max-width: 42ch;
color: #a8a29c;
}
.footer-logo {
width: 40px;
height: 40px;
}
.footer-bottom {
margin-top: 18px;
padding-top: 12px;
font-size: 12px;
}
@media (max-width: 700px) {
.footer {
padding: 22px 0 12px;
}
.footer-grid {
gap: 18px;
}
.footer-bottom {
margin-top: 14px;
}
}
/* -----------------------------------------------------------------------------
6. PANEL DE ADMINISTRACION — VISTA MAS COMPACTA
-----------------------------------------------------------------------------
Antes: barra lateral de 270px con enlaces de 15px muy espaciados, contenido
con 42px de relleno y sin ancho maximo (se estiraba en pantallas anchas), y
contadores con cifras de 42px. Se lee mejor con mas densidad y el contenido
contenido en una columna de trabajo.
-------------------------------------------------------------------------- */
@media (min-width: 981px) {
.admin-layout {
--sidebar-width: 216px;
}
.admin-layout.sidebar-collapsed {
--sidebar-width: 64px;
}
.admin-main {
padding: 24px 28px 40px;
}
/* Columna de trabajo: en un monitor ancho el contenido dejaba de ser
legible porque las tarjetas se estiraban de extremo a extremo. */
.admin-main > * {
max-width: 1180px;
}
}
.admin-side {
padding: 16px 12px;
gap: 12px;
}
.admin-brand {
padding: 2px 6px 14px;
gap: 9px;
}
.admin-brand img {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.admin-brand strong {
display: block;
font-size: 13px;
line-height: 1.2;
}
.admin-brand span {
display: block;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .1em;
color: #9a938c;
margin-top: 2px;
}
.admin-nav {
gap: 2px;
}
.admin-nav a {
padding: 8px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #ddd7d1;
transition: background .14s ease, color .14s ease;
}
.admin-nav a:hover,
.admin-nav a:focus-visible {
background: #1d1a18;
color: #fff;
}
.admin-side-bottom {
padding-top: 10px;
font-size: 13px;
}
.admin-home-link,
.admin-logout {
display: block;
padding: 7px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
}
.admin-home-link:hover,
.admin-logout:hover {
background: #1d1a18;
}
/* El boton de contraer flotaba solo sobre la barra; se integra en la esquina */
.sidebar-toggle {
width: 26px;
height: 26px;
display: grid;
place-items: center;
font-size: 12px;
border-radius: 7px;
}
/* Cabecera de las paginas del panel */
.admin-main .page-intro {
padding: 0 0 18px;
max-width: none;
}
.admin-main .page-intro h1 {
font-size: clamp(19px, 1.9vw, 24px);
margin: 2px 0 6px;
}
.admin-main .page-intro p {
font-size: var(--step-0);
margin: 0;
}
.admin-box {
padding: 20px;
border-radius: 14px;
}
/* Contadores: 42px de cifra era mas grande que los titulares de la pagina */
.stats-grid {
gap: 12px;
margin: 0 0 18px;
}
.stat {
padding: 14px 16px;
border-radius: 12px;
}
.stat span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 700;
}
.stat strong {
display: block;
font-size: 28px;
line-height: 1.1;
margin: 2px 0;
}
.stat small {
font-size: 12px;
margin-top: 0;
}
@media (min-width: 981px) {
.stats-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.admin-actions {
gap: 8px;
}
/* Selector de apartado: el boton "+ Agregar" caia debajo del titulo porque
el contenedor flex no separaba los dos grupos. */
.content-selector-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
}
.content-selector-head > div {
min-width: 0;
}
.content-selector-head h2 {
font-size: clamp(16px, 1.6vw, 19px);
margin: 2px 0 0;
}
.content-selector-box {
padding: 18px;
}
.content-selector-form {
margin: 0;
}
.content-selector-form label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
font-weight: 800;
}
.content-selector-form select {
max-width: 340px;
font-size: var(--step-0);
padding: 9px 11px;
}
/* Fichas de la lista de contenidos */
.content-admin-section {
margin: 0 0 18px;
}
.content-admin-head {
margin-bottom: 10px;
}
.content-admin-card {
padding: 14px 16px;
border-radius: 12px;
gap: 16px;
}
.content-admin-card h3 {
margin: 4px 0 3px;
}
.content-admin-card p {
font-size: var(--step-0);
margin: 0 0 4px;
}
.content-admin-card small {
font-size: 11.5px;
color: var(--muted);
}
.content-admin-actions .btn {
padding: 7px 14px;
font-size: 12.5px;
}
.empty-content {
padding: 16px;
border-radius: 12px;
font-size: var(--step-0);
}
/* Tablas del panel: mas densas para ver mas filas de un vistazo */
.table-wrap th,
.table-wrap td {
padding: 9px 12px;
font-size: 13px;
}
.table-wrap th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
}
/* Espacio Compañero */
.companion-permission-card {
padding: 14px;
border-radius: 12px;
}
.companion-permission-card strong {
font-size: var(--step-1);
}
.companion-permission-card small {
font-size: 12px;
}
/* =============================================================================
MENSAJES DE VALIDACION DE FORMULARIOS
========================================================================== */
.alert {
padding: 12px 14px;
border-radius: 11px;
margin: 0 0 16px;
font-size: var(--step-0);
border: 1px solid transparent;
}
.alert.success {
background: #e8f6ec;
border-color: #b9e2c4;
color: #17603a;
}
.alert.error {
background: #fdecec;
border-color: #f3c4c4;
color: #8d1c1c;
}
/* Lista de campos con problemas: se pinta sobre el formulario */
.form-errores strong {
display: block;
margin-bottom: 5px;
}
.form-errores ul {
margin: 0;
padding-left: 18px;
}
.form-errores li {
margin: 3px 0;
}
/* Texto de ayuda debajo de un campo */
.field-hint {
display: block;
margin-top: 5px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.45;
color: var(--muted);
}
/* El navegador marca en rojo el campo que no cumple el patron, pero solo
despues del primer intento de envio: :user-invalid evita teñir de rojo un
campo que la persona todavia esta escribiendo. */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
border-color: #d05a5a;
background: #fffafa;
}
body.dark-mode .alert.success {
background: #14301f;
border-color: #245c39;
color: #a8e6bf;
}
body.dark-mode .alert.error {
background: #331617;
border-color: #6b2a2c;
color: #ffb3b6;
}
body.dark-mode input:user-invalid,
body.dark-mode textarea:user-invalid,
body.dark-mode select:user-invalid {
border-color: #a94f52;
background: #1a1111;
}
/* Formulario en linea: para que un boton de accion dentro de una fila no
rompa la maquetacion al pasar de a