/* Base: tokens, reset, shell (header / 3 columns / footer), buttons, inputs, boxes, modal, toasts.
   Values measured from the 2010 look. Feature styles live in their own css files. */
:root {
  --link: #33669a; --link-dark: #24527f;
  --green: #4b8b1d; --green-ico: #69ae3a;
  --text: #333; --muted: #999; --muted-2: #777;
  --line: #e3e3e3; --line-2: #d6d6d6; --soft: #f5f5f5; --soft-blue: #eef3f8;
  --hdr-top: #5285bb; --hdr-bottom: #3c6da2; --hdr-line: #2c5682;
  --wrap: 980px;
}
@font-face { font-family: Nunito; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-latin-800.woff2) format('woff2'); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 12px/1.42 Arial, Helvetica, sans-serif; color: var(--text); background: #fff; -webkit-text-size-adjust: 100%; }
a { color: var(--link); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
img { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
form.inline { display: inline; margin: 0; }
.ico { display: inline-block; vertical-align: -2px; flex: none; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.green { color: var(--green); }
.b { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- logo (speech-bubble mark + wordmark) ---------- */
.logo { display: inline-flex; align-items: center; gap: 5px; font-family: Nunito, "Arial Rounded MT Bold", Arial, sans-serif; user-select: none; }
.logo-link:hover { text-decoration: none; }
.logo-mark { display: block; flex: none; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.lm-bubble { fill: #fff; }
.lm-face { fill: #3c6da2; stroke: #3c6da2; stroke-width: 3.7; stroke-linecap: round; }
.lm-face circle { stroke: none; }
.lm-face path { fill: none; }
.logo-word { color: #fff; font-weight: 800; letter-spacing: -1px; }
.logo-sm .logo-mark { width: 27px; height: 27px; }
.logo-sm .logo-word { font-size: 27px; line-height: 1; margin-top: -3px; text-shadow: 0 -1px rgba(0,0,0,.2); }
.logo-lg { gap: 10px; }
.logo-lg .logo-mark { width: 78px; height: 78px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.logo-lg .logo-word { font-size: 82px; line-height: .9; margin-top: -10px; color: transparent; background: linear-gradient(#fff 45%, #dbe6f0); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: linear-gradient(var(--hdr-top), var(--hdr-bottom)); border-bottom: 1px solid var(--hdr-line); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.hdr-in { width: var(--wrap); height: 40px; margin: 0 auto; padding: 0 10px; display: flex; align-items: center; }
.hdr .logo-link { display: flex; margin-right: 14px; }
.nav { display: flex; height: 40px; }
.nav a { display: flex; align-items: center; gap: 5px; padding: 0 11px; color: #fff; font-weight: 700; white-space: nowrap; text-shadow: 0 -1px rgba(0,0,0,.25); }
.nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.nav a.on { background: linear-gradient(#2e5f95, #2a5686); box-shadow: inset 0 1px 4px rgba(0,0,0,.35); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; color: #fff; text-shadow: 0 -1px rgba(0,0,0,.2); background: linear-gradient(#93cc63, #66a637); box-shadow: 0 1px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.3); }
.hdr-search { position: relative; margin: 0 0 0 12px; }
.hdr-search input { width: 150px; height: 22px; padding: 2px 22px 2px 6px; font-size: 11px; background: #fff; border: 1px solid #2c5a8a; border-radius: 3px; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.hdr-search .ico { position: absolute; top: 5px; right: 6px; color: #6d8db0; }
.search-pop { position: absolute; top: 26px; left: 0; z-index: 60; width: 240px; background: #fff; border: 1px solid #9fb6cf; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.search-pop a, .search-pop .none { display: flex; align-items: center; gap: 8px; padding: 5px 8px; color: var(--text); }
.search-pop a:hover, .search-pop a.sel { background: var(--soft-blue); text-decoration: none; }
.search-pop img { width: 28px; height: 28px; object-fit: cover; }
.search-pop .all { border-top: 1px solid var(--line); color: var(--link); font-weight: 700; }
.btn-upload { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 4px 10px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; background: linear-gradient(#2e5f94, #244e7c); border: 1px solid #1d4168; border-radius: 3px; box-shadow: inset 0 1px rgba(255,255,255,.18); }
.btn-upload:hover { background: linear-gradient(#336aa3, #285789); text-decoration: none; }
.hdr-right { margin-left: auto; height: 40px; display: flex; align-items: center; }
.hdr-right > a, .hdr-right .menu > button, .hdr-link { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; font-size: 12px; color: #fff; background: none; border: 0; text-shadow: 0 -1px rgba(0,0,0,.25); }
.hdr-right > a:hover, .hdr-right .menu > button:hover, .hdr-link:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.menu { position: relative; }
.menu-pop { position: absolute; top: 40px; right: 0; z-index: 60; min-width: 190px; padding: 4px 0; background: #fff; border: 1px solid #9fb6cf; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.menu-pop a, .menu-pop button { display: block; width: 100%; padding: 6px 12px; text-align: left; color: var(--link); background: none; border: 0; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--soft-blue); text-decoration: none; }
.menu-pop hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }

/* ---------- page shell & columns ---------- */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.shell-main { flex: 1 0 auto; }
.page { width: var(--wrap); margin: 0 auto; padding: 14px 10px 30px; display: flex; align-items: flex-start; gap: 18px; }
.col-l { flex: none; width: 200px; }
.col-c { flex: 1; min-width: 0; }
.col-r { flex: none; width: 202px; }
.lbox { margin-bottom: 16px; padding: 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 3px; }
.box { margin-bottom: 18px; }
.sec-t { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0 0 8px; padding: 0 0 5px; font-size: 13px; font-weight: 700; color: #333; border-bottom: 1px solid var(--line); }
.sec-t a, .sec-t button { font-size: 11px; font-weight: 400; }
.h-big { font-size: 18px; font-weight: 400; color: #333; }
.empty { padding: 10px 0; color: var(--muted); }

/* ---------- buttons & inputs ---------- */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 4px; padding: 5px 12px; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; border: 1px solid; border-radius: 3px; }
.btn:hover { text-decoration: none; }
.btn:disabled { cursor: default; }
.btn-blue { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.2); background: linear-gradient(#6c9cd1, #4a7db5); border-color: #3e6ea3; box-shadow: inset 0 1px rgba(255,255,255,.25); }
.btn-blue:hover:not(:disabled) { background: linear-gradient(#77a6da, #5185be); }
.btn-blue:disabled { text-shadow: none; box-shadow: none; background: #a9c3e0; border-color: #9fb9d6; }
.btn-gray { color: #444; background: linear-gradient(#fff, #e7e7e7); border-color: #c6c6c6; box-shadow: 0 1px rgba(0,0,0,.05); }
.btn-gray:hover:not(:disabled) { background: linear-gradient(#fff, #efefef); border-color: #b5b5b5; }
.btn-gray.on { color: #222; background: linear-gradient(#e2e2e2, #f3f3f3); box-shadow: inset 0 1px 3px rgba(0,0,0,.15); }
.btn-orange { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.18); background: linear-gradient(#fcc362, #f29c21); border-color: #d98a17; box-shadow: inset 0 1px rgba(255,255,255,.3); }
.btn-green { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.18); background: linear-gradient(#90cb62, #64a336); border-color: #589330; box-shadow: inset 0 1px rgba(255,255,255,.3); }
.linkbtn { padding: 0; font-size: inherit; color: var(--link); background: none; border: 0; }
.linkbtn:hover { text-decoration: underline; }
.inp, .ta { width: 100%; padding: 5px 6px; font-size: 12px; background: #fff; border: 1px solid #c4c4c4; border-top-color: #a9a9a9; border-radius: 2px; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.inp:focus, .ta:focus { border-color: #7aa6d6; box-shadow: 0 0 0 2px rgba(80,140,210,.18); }
.ta { min-height: 52px; line-height: 1.4; resize: vertical; }
.row { display: flex; align-items: center; gap: 6px; }
.err { color: #c0392b; }

/* ---------- avatars & presence ---------- */
.av { flex: none; object-fit: cover; background: #ddd; }
.av-frame { padding: 1px; background: #fff; border: 1px solid #ccc; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(#a6d67c, #6aab36); box-shadow: inset 0 -1px rgba(0,0,0,.15); }
.dot.away { background: linear-gradient(#ffd27a, #f2a52a); }
.dot.off { background: #ccc; }

/* ---------- footer ---------- */
.ftr { width: var(--wrap); margin: 0 auto; padding: 12px 10px 36px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }
.ftr-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 12px; }
.ftr-links a { color: var(--muted-2); }
.ftr-copy { font-weight: 700; color: #666; }
.ftr-left { display: flex; align-items: center; gap: 12px; }
.ftr-lang { position: relative; }
.ftr-lang-btn { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px; font-size: 11px; color: var(--muted-2); background: #fff; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; }
.ftr-lang-pop { position: absolute; bottom: 100%; left: 0; margin: 0 0 2px; padding: 2px 0; list-style: none; min-width: 100%; background: #fff; border: 1px solid #bbb; box-shadow: 0 1px 3px rgba(0,0,0,.2); z-index: 20; }
.ftr-lang-pop li { padding: 2px 8px; white-space: nowrap; }
.ftr-lang-pop a { color: var(--muted-2); cursor: pointer; }
.ftr-lang-pop li.cur { color: #aaa; }
.ftr-note { margin-top: 10px; font-size: 10.5px; color: #aaa; }

/* ---------- toasts & modal ---------- */
.toasts { position: fixed; left: 14px; bottom: 14px; z-index: 70; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 28px); }
.toast { position: relative; display: flex; align-items: center; gap: 8px; width: 280px; max-width: 100%; padding: 8px 26px 8px 8px; color: var(--text); background: #fff; border: 1px solid #9fb6cf; border-left: 4px solid #5285bb; border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.2); animation: toast-in .25s ease-out; }
.toast:hover { background: #fafcff; text-decoration: none; }
.toast img { width: 32px; height: 32px; object-fit: cover; }
.toast .x { position: absolute; top: 4px; right: 4px; padding: 2px; color: #999; background: none; border: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.modal-bg { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 70px 16px 16px; overflow-y: auto; background: rgba(20,35,55,.45); }
.modal { position: relative; width: 480px; max-width: 100%; color: var(--text); background: #fff; border-radius: 4px; box-shadow: 0 0 0 8px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.3); }
.modal-h { padding: 12px 40px 10px 16px; font-size: 16px; font-weight: 700; color: #333; border-bottom: 1px solid var(--line); }
.modal-b { padding: 14px 16px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; background: #fafafa; border-top: 1px solid var(--line); border-radius: 0 0 4px 4px; }
.modal-x { position: absolute; top: -12px; right: -12px; display: grid; place-items: center; width: 26px; height: 26px; color: #fff; background: linear-gradient(#5c8fc5, #3a6aa0); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* ---------- 404 ---------- */
.nf { width: var(--wrap); margin: 0 auto; padding: 60px 10px; text-align: center; }
.nf h1 { margin-bottom: 10px; font-size: 20px; font-weight: 400; }

/* ---------- small screens: stack columns ---------- */
@media (max-width: 1000px) {
  :root { --wrap: 100%; }
  .page { flex-direction: column; padding: 10px 16px 24px; }
  .col-l, .col-r, .col-c { width: 100%; }
  .hdr-in { overflow-x: auto; }
}
/* phones: header in three rows (logo + Mi cuenta/Salir · sections · search and upload) instead of hiding half of it */
@media (max-width: 760px) {
  .hdr-in { flex-wrap: wrap; height: auto; overflow: visible; padding: 0 6px; }
  .hdr .logo-link { height: 36px; align-items: center; }
  .hdr-right { order: 1; height: 36px; }
  .hdr-right > a, .hdr-right .menu > button, .hdr-link { height: 36px; padding: 0 8px; }
  .hdr-right .menu-pop { top: 36px; }
  .nav { order: 2; flex: 1 0 100%; height: 34px; }
  .nav a { padding: 0 8px; }
  .hdr-search { order: 3; flex: 1; margin: 6px 0; }
  .hdr-search input { width: 100%; }
  .btn-upload { order: 4; margin: 6px 0 6px 8px; }
}