:root{
  --bg:#FFFFFF; --ink:#201E1D; --green:#518253; --green-bright:#3E6B41;
  --hair: rgba(32,30,29,.12); --hair-strong: rgba(32,30,29,.24); --muted: rgba(32,30,29,.58);
  --red:#B4463B; --red-wash:#FBEBE9; --green-wash:#E7F3ED;
}
*{box-sizing:border-box;}
body{ font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); margin:0; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
h1,h2{ font-family:'Fraunces',serif; font-weight:600; }

/* ===== login / registro / recuperar ===== */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:380px; text-align:center; }
.logo{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px; text-decoration:none; }
.mark{ width:24px; height:24px; position:relative; flex-shrink:0; }
.mark span{ position:absolute; width:7px; height:7px; background:var(--ink); }
.mark span:nth-child(1){ top:0; left:8.5px; }
.mark span:nth-child(2){ top:8.5px; left:0; }
.mark span:nth-child(3){ top:8.5px; left:8.5px; background:var(--green); }
.mark span:nth-child(4){ top:8.5px; left:17px; }
.mark span:nth-child(5){ top:17px; left:8.5px; }
.wordmark{ font-weight:700; font-size:19px; letter-spacing:-.01em; }
.wordmark .n{ color:var(--green); }
.auth-card h1{ font-size:22px; margin:0 0 6px; }
.auth-card .sub{ font-size:13.5px; color:var(--muted); margin-bottom:26px; }

.box{ background:#fff; padding:30px; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.06); border:1px solid #EBEBEB; text-align:left; }
.field{ margin-bottom:6px; }
label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted); display:block; margin:14px 0 6px; }
label:first-of-type{ margin-top:0; }
input{ width:100%; padding:11px 12px; border:1px solid var(--hair-strong); border-radius:4px; font-size:14px; font-family:'Inter',sans-serif; }
input:focus{ outline:none; border-color:var(--green); }

.btn{ display:block; width:100%; padding:12px; border:none; border-radius:4px; font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; cursor:pointer; text-align:center; text-decoration:none; transition:.2s; }
.btn-dark{ background:var(--ink); color:#fff; margin-top:20px; }
.btn-dark:hover{ background:var(--green); }
.btn-google{ background:#fff; color:var(--ink); border:1px solid var(--hair-strong); display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; }
.btn-google:hover{ background:#F7F7F5; }

.divider{ display:flex; align-items:center; gap:10px; margin:20px 0 6px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--hair); }

.flash-error{ background:var(--red-wash); color:var(--red); padding:9px 12px; border-radius:4px; font-size:13px; margin-top:14px; }
.flash-ok{ background:var(--green-wash); color:var(--green-bright); padding:9px 12px; border-radius:4px; font-size:13px; margin-top:14px; }
.link-row{ text-align:center; margin-top:16px; font-size:13px; color:var(--muted); }
.link-row a{ color:var(--green-bright); text-decoration:none; font-weight:600; }
.copyright{ text-align:center; font-size:11.5px; color:#AAA; margin-top:22px; }

/* ===== portal ===== */
.portal-header{ display:flex; align-items:center; justify-content:space-between; padding:22px 40px; border-bottom:1px solid var(--hair); }
.portal-wrap{ max-width:900px; margin:0 auto; padding:60px 24px; }
.portal-wrap h1{ font-size:clamp(26px,4vw,38px); margin-bottom:8px; }
.portal-wrap .sub{ color:var(--muted); margin-bottom:40px; }
.apps-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.app-card{ border:1px solid var(--hair); border-radius:8px; padding:24px; text-decoration:none; color:var(--ink); transition:.2s; position:relative; }
.app-card.enabled:hover{ border-color:var(--green); background:var(--green-wash); }
.app-card.disabled{ opacity:.45; pointer-events:none; }
.app-card h3{ font-family:'Fraunces',serif; font-size:19px; margin:0 0 6px; }
.app-status{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-block; margin-bottom:12px; }
.app-status.on{ background:var(--green-wash); color:var(--green-bright); }
.app-status.off{ background:rgba(32,30,29,.06); color:var(--muted); }

/* ===== dropdown de perfil (referencia para las otras apps) ===== */
.profile-dd{ position:relative; }
.profile-btn{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; border:none; font-size:13px; font-weight:600; cursor:pointer; }
.profile-menu{ position:absolute; right:0; top:44px; background:#fff; border:1px solid var(--hair); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); min-width:220px; display:none; z-index:50; overflow:hidden; }
.profile-menu.show{ display:block; }
.profile-menu .who{ padding:14px 16px; border-bottom:1px solid var(--hair); }
.profile-menu .who .name{ font-weight:600; font-size:13.5px; }
.profile-menu .who .email{ font-size:12px; color:var(--muted); }
.profile-menu a{ display:block; padding:11px 16px; font-size:13px; text-decoration:none; color:var(--ink); }
.profile-menu a:hover{ background:var(--green-wash); }
.profile-menu a.danger:hover{ background:var(--red-wash); color:var(--red); }

/* ===== admin ===== */
.admin-wrap{ max-width:1000px; margin:0 auto; padding:40px 24px; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{ text-align:left; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--hair); padding:10px 12px; }
tbody tr{ border-bottom:1px solid var(--hair); }
td{ padding:11px 12px; }
.chk-toggle{ width:36px; height:20px; border-radius:10px; background:var(--hair-strong); position:relative; display:inline-block; cursor:pointer; border:none; padding:0; }
.chk-toggle.on{ background:var(--green); }
.chk-toggle::after{ content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.2s; }
.chk-toggle.on::after{ left:18px; }