/* ============================================================
   TEGA PWA — Estilos principales
   Colores: #0F4585 Azul TEGA | #06275A Navy | #E87722 Naranja | #C3DDFE Azul claro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --blue:       #0F4585;
  --navy:       #06275A;
  --orange:     #E87722;
  --blue-light: #C3DDFE;
  --blue-bg:    #EAF1FE;
  --red:        #B52020;
  --red-bg:     #FDECEA;
  --orange-bg:  #FDF0E6;
  --green:      #2E6B36;
  --green-bg:   #E6F4EA;
  --gray-1:     #1A1A1A;
  --gray-2:     #4A4A4A;
  --gray-3:     #8C8C8C;
  --gray-4:     #D9D9D9;
  --gray-5:     #F0F2F5;
  --white:      #FFFFFF;
  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(6,39,90,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 16px;
  color: var(--gray-1);
  background: var(--navy);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* ── App shell ───────────────────────────────────────────── */
#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--gray-5);
  position: relative;
  overflow: hidden;
}

/* ── Screens ─────────────────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}

/* ── Status bar simulado ─────────────────────────────────── */
.status-bar {
  display: none; /* Hide fake status bar - use safe area instead */
}
.status-bar span { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 500; }

/* ── Top bar ─────────────────────────────────────────────── */
.top-bar {
  background: var(--navy);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.top-bar-left { display: flex; align-items: center; gap: 8px; }
.top-bar .logo { height: 28px; width: 28px; object-fit: contain; border-radius: 4px; }
.top-bar-title { color: white; font-size: 15px; font-weight: 600; }
.top-bar-right { display: flex; align-items: center; gap: 10px; }

/* ── Mobile banner (logo centrado) ───────────────────────── */
#mobile-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--navy);
  padding: 8px 16px;
  padding-top: calc(env(safe-area-inset-top, 8px) + 8px);
  flex-shrink: 0;
}
#mobile-banner img {
  height: 36px;
  object-fit: contain;
}
#app.login-mode #mobile-banner { display: none !important; }

/* ── Bottom Nav ──────────────────────────────────────────── */
#bottom-nav {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--gray-4);
  height: auto;
  min-height: 56px;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 50;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s;
}
.nav-icon { font-size: 20px; }
.nav-label { font-size: 10px; font-weight: 500; color: var(--gray-3); }
.nav-item.active .nav-label { color: var(--blue); }

/* ── Scroll content ──────────────────────────────────────── */
.scroll-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}
.scroll-content::-webkit-scrollbar { display: none; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  margin: 8px 12px;
  padding: 12px 14px;
  border: 1px solid rgba(15,69,133,0.08);
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}

/* ── Pills / Badges ──────────────────────────────────────── */
.pill {
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.pill-red     { background: var(--red-bg);    color: var(--red); }
.pill-orange  { background: var(--orange-bg); color: #9E4A08; }
.pill-blue    { background: var(--blue-bg);   color: var(--blue); }
.pill-green   { background: var(--green-bg);  color: var(--green); }
.pill-gray    { background: var(--gray-5);    color: var(--gray-2); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  background: var(--blue);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: #0d3a6e; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-orange {
  background: var(--orange);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.btn-orange:hover { background: #c4621a; }
.btn-orange:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-back {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.btn-icon {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  position: relative;
}

.btn-pdf {
  display: block;
  background: var(--blue-bg);
  color: var(--blue);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  margin-top: 8px;
}

/* ── Notification badge ──────────────────────────────────── */
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--orange);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Section labels ──────────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px 4px;
}

/* ── KPI row ─────────────────────────────────────────────── */
.kpi-row {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  margin-top: -6px;
  margin-bottom: 4px;
}
.kpi-card {
  flex: 1;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  border: 1px solid rgba(15,69,133,0.08);
  box-shadow: var(--shadow);
}
.kpi-num  { font-size: 22px; font-weight: 700; }
.kpi-lbl  { font-size: 10px; color: var(--gray-3); margin-top: 1px; }

/* ── Greeting bar ────────────────────────────────────────── */
.greeting {
  background: var(--navy);
  padding: 10px 16px 16px;
  flex-shrink: 0;
}
.greeting-hi   { font-size: 12px; color: rgba(255,255,255,0.5); }
.greeting-name { font-size: 18px; font-weight: 700; color: white; }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  background: var(--white);
  border-bottom: 1px solid var(--gray-4);
  flex-shrink: 0;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.tab.active {
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  font-weight: 600;
}

/* ── Form inputs ─────────────────────────────────────────── */
.form-group { margin-bottom: 12px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--gray-2); margin-bottom: 4px; display: block; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--gray-1);
  outline: none;
  background: white;
  transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--blue);
}
.form-textarea { min-height: 80px; resize: vertical; }

/* ── Login screen ────────────────────────────────────────── */
#screen-login {
  background: var(--navy);
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 32px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
  flex: 1;
  min-height: 100%;
}
.login-logo { width: 80px; height: 88px; object-fit: contain; margin-bottom: 8px; }
.login-line { width: 40px; height: 2px; background: var(--orange); margin: 10px auto; }
.login-brand { color: white; font-size: 18px; font-weight: 700; text-align: center; }
.login-sub { color: rgba(255,255,255,0.4); font-size: 12px; text-align: center; margin-bottom: 28px; }
.login-field {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(195,221,254,0.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: white;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 10px;
  outline: none;
}
.login-field::placeholder { color: rgba(255,255,255,0.35); }
.login-field:focus { border-color: rgba(195,221,254,0.7); }
.login-hint { color: rgba(195,221,254,0.35); font-size: 11px; text-align: center; margin-top: 16px; }
.login-form-wrap { width: 100%; max-width: 340px; }

/* Select en login tiene mismo estilo */
#login-usuario-sel {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff80'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
#login-usuario-sel option { background: var(--navy); color: white; }

/* ── Comunicados v2 (grid 2col desktop, 1col mobile) ────── */
.com-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;background:#fff;border:1px solid #E5E7EB;border-radius:0 0 10px 10px}
.com-section-label{grid-column:1/-1;font-size:10px;font-weight:700;color:#8E9BB0;text-transform:uppercase;letter-spacing:.06em;padding:6px 2px 2px}
.com-card{background:#fff;border:1px solid #E5E7EB;border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.com-card:hover{border-color:#C9A84C}
.com-accent{height:3px}.com-accent.urgent{background:#D94040}.com-accent.normal{background:#2E6FD4}.com-accent.info{background:#1D9E87}.com-accent.read{background:#DCE1E9}
.com-inner{padding:11px 13px}
.com-row1{display:flex;align-items:flex-start;gap:6px;margin-bottom:5px}
.com-titulo{font-size:13px;font-weight:600;color:#002848;flex:1;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.com-titulo.read-title{color:#5A6577;font-weight:500}
.com-preview{font-size:11.5px;color:#6B7788;line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.com-meta-row{display:flex;align-items:center;gap:6px;font-size:11px;color:#8E9BB0;margin-bottom:7px}
.com-avatar{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700;flex-shrink:0}
.com-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:7px;border-top:1px solid #F0F2F5}
.com-tracker{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.com-tracker-bar{flex:1;height:3px;background:#EDF0F4;border-radius:2px;overflow:hidden;max-width:70px}
.com-tracker-fill{height:100%;border-radius:2px}
.com-tracker-fill.low{background:#D94040}.com-tracker-fill.mid{background:#D48A17}.com-tracker-fill.full{background:#1D9E6A}
.com-tracker-text{font-size:10px;color:#8E9BB0;white-space:nowrap}
.com-names{font-size:10px;color:#D48A17;margin-top:5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.com-hist-date{font-size:10px;color:#1D9E6A;white-space:nowrap}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;font-size:10px;font-weight:700;padding:0 5px;margin-left:4px;color:#fff}
.tab-badge.pending{background:#D94040}.tab-badge.done{background:#1D9E6A}
.com-page-header{display:flex;align-items:center;justify-content:space-between;margin:0 12px 12px}
.com-page-header .pg-title{font-size:17px;font-weight:700;color:#002848}
.com-page-header .pg-sub{font-size:11px;color:#8E9BB0;margin-top:2px}
.btn-new-comunicado{background:linear-gradient(180deg,#193b76 0%,#062659 100%);color:#fff;border:none;border-radius:7px;padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap}
.btn-new-comunicado:hover{background:linear-gradient(180deg,#062659 0%,#193b76 100%)}
#screen-comunicados .tabs{background:#fff;border:1px solid #E5E7EB;border-bottom:none;border-radius:10px 10px 0 0;margin:0 12px}
#screen-comunicados .tab{border-bottom:2px solid transparent}
#screen-comunicados .tab.active{border-bottom-color:#C9A84C}
#screen-comunicados .scroll-content > div{margin:0 12px}
.com-img{width:100%;border-radius:var(--radius-sm);margin-top:8px;cursor:zoom-in}

/* Detalle comunicado */
.com-det-body {
  font-size: 15px;
  color: var(--gray-1);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ── Tareas ──────────────────────────────────────────────── */
.tarea-card {
  background: var(--white);
  border-radius: var(--radius);
  margin: 8px 12px;
  padding: 12px 14px;
  border: 1px solid rgba(15,69,133,0.08);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.tarea-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 8px; }
.tarea-title  { font-size: 14px; font-weight: 600; color: var(--gray-1); }
.tarea-meta   { font-size: 12px; color: var(--gray-3); margin-top: 2px; }

/* Estado selector */
.estado-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.estado-row label { font-size: 13px; font-weight: 600; color: var(--gray-2); white-space: nowrap; }
.estado-sel {
  flex: 1;
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--gray-1);
  outline: none;
}
.estado-sel:focus { border-color: var(--blue); }

/* ── Chat / Comentarios ──────────────────────────────────── */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
  max-height: 220px;
}
.chat-area::-webkit-scrollbar { display: none; }

.burbuja-wrap { display: flex; flex-direction: column; }
.burbuja-wrap.out { align-items: flex-end; }
.burbuja-wrap.in  { align-items: flex-start; }

.burbuja {
  max-width: 78%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.burbuja-in  { background: var(--blue-bg); color: var(--gray-1); border-bottom-left-radius: 3px; }
.burbuja-out { background: var(--blue);    color: white;         border-bottom-right-radius: 3px; }
.burbuja-autor { font-size: 11px; font-weight: 600; color: var(--gray-3); margin-bottom: 2px; }
.burbuja-time  { font-size: 10px; color: var(--gray-3); margin-top: 2px; }

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border-top: 1px solid var(--gray-4);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  border: 1px solid var(--gray-4);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.chat-input:focus { border-color: var(--blue); }
.chat-send {
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Dashboard items ─────────────────────────────────────── */
.dash-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-5);
  cursor: pointer;
}
.dash-item:last-child { border: none; }
.dash-item-title { font-size: 13px; font-weight: 600; color: var(--gray-1); }
.dash-item-meta  { font-size: 11px; color: var(--gray-3); margin-top: 2px; }

/* ── Config / Permisos ───────────────────────────────────── */
.config-user-card {
  background: var(--blue);
  margin: 10px 12px;
  border-radius: var(--radius);
  padding: 14px 16px;
  color: white;
}
.config-user-name { font-size: 16px; font-weight: 700; }
.config-user-rol  { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }

.perm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-5);
}
.perm-row:last-child { border: none; }
.perm-nombre { font-size: 13px; font-weight: 500; color: var(--gray-1); }
.perm-rol    { font-size: 11px; color: var(--gray-3); }

/* Toggle switch */
.toggle-wrap { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-wrap input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--gray-4);
  border-radius: 24px;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-wrap input:checked + .toggle-slider { background: var(--blue); }
.toggle-wrap input:checked + .toggle-slider:before { transform: translateX(20px); }

.sec-hd {
  font-size: 13px; font-weight: 700;
  color: var(--navy); margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--orange);
}

/* ── Toast ───────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--gray-1);
  color: white;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  pointer-events: none;
  max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.success { background: var(--green); }
#toast.error   { background: var(--red); }
#toast.warning { background: var(--orange); }

/* ── Empty messages ──────────────────────────────────────── */
.empty-msg {
  text-align: center;
  color: var(--gray-3);
  font-size: 13px;
  padding: 20px;
}

/* ── Fab button ──────────────────────────────────────────── */
.fab {
  position: fixed;
  right: 20px;
  bottom: 72px;
  width: 52px;
  height: 52px;
  background: var(--orange);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(232,119,34,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: transform 0.15s;
}
.fab:active { transform: scale(0.93); }

/* ── Divider ─────────────────────────────────────────────── */
.divider { height: 1px; background: var(--gray-4); margin: 4px 12px; }

/* ── Safe area iOS ───────────────────────────────────────── */



/* ============================================================
   RESPONSIVE — Desktop (768px+)
   ============================================================ */
@media (min-width: 768px) {

  body { background: #f0f2f5; }

  #app {
    max-width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
      "topbar topbar"
      "sidebar main";
  }

  /* Login ocupa toda la pantalla en PC */
  #app.login-mode {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--navy) !important;
  }
  #app.login-mode #pc-topbar,
  #app.login-mode #pc-sidebar { display: none !important; }
  #app.login-mode #pc-main { display: contents; }
  #app.login-mode #screen-login {
    display: flex !important;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  /* ── Topbar horizontal en PC ─────────────────────────────── */
  #pc-topbar {
    display: flex;
    grid-area: topbar;
    background: var(--navy);
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: 0 2px 8px rgba(6,39,90,0.2);
    z-index: 10;
  }
  #pc-topbar .pc-logo-wrap { display: flex; align-items: center; gap: 10px; }
  #pc-topbar .pc-logo      { height: 32px; width: 32px; object-fit: contain; }
  #pc-topbar .pc-brand     { color: white; font-size: 16px; font-weight: 700; }
  #pc-topbar .pc-user      { display: flex; align-items: center; gap: 12px; }
  #pc-topbar .topbar-center-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 44px;
    object-fit: contain;
    pointer-events: none;
  }
  #pc-topbar { position: relative; }
  #pc-topbar .pc-user-name { color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 500; }
  #pc-topbar .pc-logout    {
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }
  #pc-topbar .pc-logout:hover { background: rgba(255,255,255,0.2); }

  /* ── Sidebar ─────────────────────────────────────────────── */
  #pc-sidebar {
    display: flex;
    flex-direction: column;
    grid-area: sidebar;
    background: white;
    border-right: 1px solid var(--gray-4);
    padding: 16px 0;
    overflow-y: auto;
  }
  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-2);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
    margin: 1px 0;
  }
  .sidebar-item:hover { background: var(--gray-5); color: var(--gray-1); }
  .sidebar-item.active {
    background: var(--blue-bg);
    color: var(--blue);
    border-left-color: var(--blue);
    font-weight: 600;
  }
  .sidebar-icon { font-size: 18px; width: 24px; text-align: center; }
  .sidebar-label { flex: 1; }
  .sidebar-badge {
    background: var(--orange);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  .sidebar-divider {
    height: 1px;
    background: var(--gray-4);
    margin: 8px 16px;
  }
  .sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--gray-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 20px 4px;
  }

  /* ── Main content area ───────────────────────────────────── */
  #pc-main {
    grid-area: main;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--gray-5);
    min-width: 0;
    min-height: 0;
  }

  /* ── Screens en PC ───────────────────────────────────────── */
  .screen {
    height: 100%;
  }

  /* Ocultar elementos mobile en PC */
  #mobile-banner { display: none !important; }
  #bottom-nav  { display: none !important; }
  .status-bar  { display: none !important; }
  .top-bar     { display: none !important; }

  /* ── Login PC ────────────────────────────────────────────── */
  #screen-login {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    background: var(--navy);
  }
  .login-form-wrap { max-width: 380px; }
  .login-logo { width: 100px; height: 110px; }

  /* ── Dashboard PC ────────────────────────────────────────── */
  #screen-dashboard {
    padding: 0;
  }
  .greeting {
    padding: 20px 28px 24px;
  }
  .greeting-name { font-size: 22px; }

  .kpi-row {
    padding: 0 24px;
    gap: 16px;
    margin-bottom: 8px;
  }
  .kpi-card { padding: 14px 18px; }
  .kpi-num  { font-size: 28px; }
  .kpi-lbl  { font-size: 12px; }

  /* Dashboard 2 columnas */
  #dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    padding: 0 24px 24px;
  }
  #dash-grid .card { margin: 8px 0; }

  /* ── Cards PC ────────────────────────────────────────────── */
  .card {
    margin: 8px 24px;
    padding: 16px 18px;
    border-radius: 14px;
  }

  /* ── Comunicados PC — lista + detalle lado a lado ─────────── */
  #screen-comunicados .pc-split,
  #screen-tareas .pc-split {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: 100%;
    overflow: hidden;
  }
  .pc-split-list {
    border-right: 1px solid var(--gray-4);
    overflow-y: auto;
    background: white;
  }
  .pc-split-list::-webkit-scrollbar { width: 4px; }
  .pc-split-list::-webkit-scrollbar-thumb { background: var(--gray-4); border-radius: 2px; }
  .pc-split-detail {
    overflow-y: auto;
    padding: 24px 28px;
    background: var(--gray-5);
  }
  .pc-split-detail::-webkit-scrollbar { width: 4px; }
  .pc-split-detail::-webkit-scrollbar-thumb { background: var(--gray-4); border-radius: 2px; }

  /* Items en lista split */
  .tarea-card {
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--gray-5);
    box-shadow: none;
  }
  .tarea-card:hover { background: var(--blue-bg); }
  .tarea-card.selected { background: var(--blue-bg); border-left: 3px solid var(--blue); }

  /* Tabs en PC */
  .tabs { padding: 0 4px; }
  .tab { padding: 12px 8px; font-size: 13px; }

  /* Detalle PC */
  #com-det-titulo { font-size: 22px; }
  #tarea-det-titulo { font-size: 20px; }

  /* Botón marcar leído PC */
  #btn-marcar-leido {
    width: auto;
    padding: 10px 24px;
  }

  /* ── Tarea detalle PC ────────────────────────────────────── */
  #screen-tarea-detalle .pc-tarea-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    height: 100%;
    overflow: hidden;
  }
  .pc-tarea-info {
    padding: 24px 28px;
    overflow-y: auto;
    border-right: 1px solid var(--gray-4);
  }
  .pc-tarea-chat {
    display: flex;
    flex-direction: column;
    background: white;
  }
  .pc-tarea-chat-header {
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--gray-4);
  }
  .chat-area { max-height: none; flex: 1; }

  /* ── Config PC ───────────────────────────────────────────── */
  #screen-config .scroll-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
  }
  .config-user-card { margin: 0 0 16px; }

  /* ── Forms PC ────────────────────────────────────────────── */
  #screen-comunicado-nuevo .scroll-content,
  #screen-tarea-nueva .scroll-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
  }
  #screen-comunicado-nuevo .top-bar,
  #screen-tarea-nueva .top-bar,
  #screen-comunicado-detalle .top-bar,
  #screen-tarea-detalle .top-bar { display: none !important; }

  /* Scroll del content area */
  .scroll-content { padding-bottom: 24px; }

  /* Section labels PC */
  .section-label { padding: 12px 24px 6px; font-size: 12px; }
}

/* ── Desktop grande (1200px+) ─────────────────────────────── */
@media (min-width: 1200px) {
  #app { grid-template-columns: 260px 1fr; }
  .sidebar-item { padding: 13px 24px; font-size: 15px; }
  .card { margin: 10px 28px; }
  #dash-grid { padding: 0 28px 28px; gap: 0 20px; }
  .kpi-row { padding: 0 28px; }
}

/* ── Config tabs & user management ──────────────────────────── */
.cfg-tab { display: block; }

.btn-cfg-add {
  background: var(--orange);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Screen usuario edit */
#screen-config-usuario .scroll-content {
  background: var(--gray-5);
}




/* ── Botón Enterado en lista de comunicados ───────────────── */
.btn-enterado{background:#092f6c;color:#fff;border:none;border-radius:6px;padding:5px 11px;font-size:10.5px;font-weight:600;cursor:pointer;flex-shrink:0;display:flex;align-items:center;gap:3px;white-space:nowrap;transition:background .15s}
.btn-enterado:hover{background:#0a1e3d}.btn-enterado:disabled{opacity:.5}


/* ── Mobile (max-width: 767px) ───────────────────────────── */
@media (max-width: 767px) {
  html, body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #app {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  #pc-topbar { display: none !important; }
  #pc-sidebar { display: none !important; }

  #pc-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .screen {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .scroll-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #bottom-nav {
    flex-shrink: 0 !important;
    width: 100% !important;
    min-height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .top-bar {
    flex-shrink: 0;
  }

  .greeting {
    flex-shrink: 0;
  }

  #screen-login {
    padding-top: calc(env(safe-area-inset-top, 0px) + 40px);
    flex: 1 !important;
  }

  .tabs { flex-shrink: 0; }

  .chat-input-row {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    flex-shrink: 0;
  }

  .nav-item { padding: 8px 0; }
  .nav-icon { font-size: 22px; }
  .nav-label { font-size: 10px; }
}

/* ── Comunicados mobile override ────────────────────────────── */
@media (max-width: 767px) {
  .com-grid{grid-template-columns:1fr;gap:8px;padding:8px 0;background:transparent;border:none;border-radius:0}
  .com-card{border-radius:10px;margin:0 4px}
  .com-page-header{display:none}
  #screen-comunicados .tabs{margin:0;border-radius:0;border-left:none;border-right:none}
  #screen-comunicados .scroll-content > div{margin:0}
}

/* ── Back button mobile-only ────────────────────────────────── */
.mobile-only { display: inline-flex; }
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

/* ── Comunicado Detalle v2 ──────────────────────────────────── */
.cdet-wrap{display:flex;gap:16px;padding:16px;min-height:100%}
.cdet-main{flex:1;min-width:0}
.cdet-sidebar{width:280px;flex-shrink:0;background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:16px;align-self:flex-start;position:sticky;top:16px}
.cdet-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:14px 16px;background:#fff;border:1px solid #E5E7EB;border-radius:10px}
.cdet-avatar{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}
.cdet-header-info{flex:1;min-width:0}
.cdet-author{font-size:14px;font-weight:700;color:#002848}
.cdet-date{font-size:12px;color:#8E9BB0;margin-top:2px}
.cdet-titulo{font-size:20px;font-weight:700;color:#002848;margin:0 0 12px;line-height:1.3}
.cdet-body{font-size:14px;color:#3D4A5C;line-height:1.65;background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:16px 18px}
.cdet-attach{margin-top:12px}
.cdet-attach-link{display:inline-flex;align-items:center;gap:6px;background:#EAF1FB;color:#0C447C;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none}
.cdet-attach-link:hover{background:#B5D4F4}
.cdet-leido-ok{margin-top:16px;padding:12px 16px;background:#E0F5EC;color:#085041;border-radius:8px;font-size:13px;font-weight:600;text-align:center}
.cdet-panel-title{font-size:14px;font-weight:700;color:#002848;margin-bottom:12px}
.cdet-panel-loading{font-size:12px;color:#8E9BB0;padding:20px 0;text-align:center}
.cdet-progress-nums{display:flex;align-items:baseline;justify-content:space-between}
.cdet-progress-big{font-size:22px;font-weight:700;color:#002848}
.cdet-progress-pct{font-size:14px;font-weight:700}
.cdet-progress-pct.full{color:#1D9E6A}.cdet-progress-pct.mid{color:#D48A17}.cdet-progress-pct.low{color:#D94040}
.cdet-section-hd{font-size:11px;font-weight:700;margin:14px 0 6px;padding-top:10px;border-top:1px solid #F0F2F5}
.cdet-section-hd.cdet-green{color:#1D9E6A}.cdet-section-hd.cdet-red{color:#D94040}
.cdet-user-row{display:flex;align-items:center;gap:8px;padding:6px 0}
.cdet-user-av{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;flex-shrink:0}
.cdet-user-info{flex:1;min-width:0}
.cdet-user-name{font-size:12px;font-weight:600;color:#002848}
.cdet-user-time{font-size:10.5px;color:#8E9BB0}
@media(max-width:767px){
.cdet-wrap{flex-direction:column;padding:12px}
.cdet-sidebar{width:100%;position:static}
.cdet-header{padding:12px}
.cdet-titulo{font-size:17px}
.cdet-body{padding:12px 14px;font-size:13px}
}

/* ── Tareas v2 ──────────────────────────────────────────────── */
.com-accent.tar-urg{background:#D94040}.com-accent.tar-alt{background:#D48A17}.com-accent.tar-nor{background:#2E6FD4}.com-accent.tar-baj{background:#1D9E87}
.pill.p-r{background:#FDECEC;color:#791F1F}.pill.p-o{background:#FEF3E0;color:#633806}.pill.p-b{background:#EAF1FB;color:#0C447C}.pill.p-t{background:#E1F5EE;color:#04342C}
.tar-footer{display:flex;align-items:center;justify-content:space-between;padding-top:5px;border-top:1px solid #F0F2F5;font-size:9.5px;color:#8E9BB0;gap:6px}
.tar-cat{font-size:9px;font-weight:600;color:#6B4DBF;background:#F0EBFF;padding:2px 6px;border-radius:4px}
.tar-page-header{display:flex;align-items:center;justify-content:space-between;margin:0 12px 12px}
.tar-page-header .pg-title{font-size:17px;font-weight:700;color:#002848}
.tar-page-header .pg-sub{font-size:11px;color:#8E9BB0;margin-top:2px}
#screen-tareas .tabs{background:#fff;border:1px solid #E5E7EB;border-bottom:none;border-radius:10px 10px 0 0;margin:0 12px}
#screen-tareas .tab{border-bottom:2px solid transparent}
#screen-tareas .tab.active{border-bottom-color:#C9A84C}
#screen-tareas .scroll-content > div{margin:0 12px}

/* ── Tarea Detalle v2 ───────────────────────────────────────── */
.tdet-wrap{display:flex;gap:14px;padding:14px;min-height:100%}
.tdet-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.tdet-right{width:280px;flex-shrink:0;display:flex;flex-direction:column;background:#fff;border:1px solid #E5E7EB;border-radius:10px;overflow:hidden;align-self:flex-start;max-height:calc(100vh - 120px)}
.tdet-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tdet-info-item{background:#F5F7FA;border-radius:8px;padding:10px 12px}
.tdet-info-label{font-size:9px;font-weight:700;color:#8E9BB0;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.tdet-info-val{font-size:12px;font-weight:600;color:#002848}
.tdet-estado-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;padding:10px 14px}
.tdet-estado-sel{border:none;background:transparent;font-size:13px;font-weight:600;color:#002848;flex:1;outline:none;cursor:pointer}
.tdet-chat-hd{padding:10px 14px;font-size:12px;font-weight:700;color:#002848;border-bottom:1px solid #E5E7EB;background:#F9FAFB;flex-shrink:0}
.tdet-chat{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:120px;max-height:400px}
.tdet-bub{max-width:85%;padding:8px 12px;border-radius:10px;font-size:12px;line-height:1.45}
.tdet-bub-in{background:#F0F2F5;color:#3D4A5C;align-self:flex-start;border-bottom-left-radius:2px}
.tdet-bub-out{background:#092f6c;color:#fff;align-self:flex-end;border-bottom-right-radius:2px}
.tdet-bub-nm{font-size:10px;font-weight:600;color:#8E9BB0;margin-bottom:2px}
.tdet-bub-tm{font-size:9px;color:#8E9BB0;margin-top:2px}
.tdet-chat-input{display:flex;gap:6px;padding:8px 12px;border-top:1px solid #E5E7EB;flex-shrink:0}
.tdet-chat-input input{flex:1;border:1px solid #E5E7EB;border-radius:8px;padding:8px 12px;font-size:12px;outline:none}
.tdet-chat-input input:focus{border-color:#C9A84C}
.tdet-chat-input button{background:#092f6c;color:#fff;border:none;border-radius:8px;width:34px;height:34px;font-size:16px;cursor:pointer;flex-shrink:0}
@media(max-width:767px){
.tdet-wrap{flex-direction:column;padding:10px}
.tdet-right{width:100%;max-height:none}
.tdet-chat{max-height:300px}
.tar-page-header{display:none}
#screen-tareas .tabs{margin:0;border-radius:0;border-left:none;border-right:none}
#screen-tareas .scroll-content > div{margin:0}
}

/* ── Delete buttons ─────────────────────────────────────────── */
.btn-del-card{background:none;border:none;cursor:pointer;font-size:13px;opacity:.3;padding:2px 4px;flex-shrink:0;transition:opacity .15s}
.btn-del-card:hover{opacity:.8}
.btn-del-detail{background:none;border:1px solid #D94040;color:#D94040;border-radius:8px;padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;margin-top:12px;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.btn-del-detail:hover{background:#D94040;color:#fff}

/* ── Searchable Select (Dirigido a) ─────────────────────────── */
/* ── Search-select "Dirigido a" ─────────────────────────── */
.ss-wrap{position:relative}
.ss-field{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border:1.5px solid #dde1e9;border-radius:8px;
  background:#eff1f6;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
  user-select:none;
}
.ss-field:hover{border-color:#C9A84C}
.ss-wrap.open .ss-field{
  border-color:#C9A84C;
  box-shadow:0 0 0 3px rgba(201,168,76,.12);
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.ss-icon{font-size:13px;flex-shrink:0;color:#8E9BB0}
.ss-label{flex:1;font-size:14px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-label.selected{color:#002848;font-weight:500}
.ss-clear{
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex-shrink:0;
  background:rgba(0,0,0,.08);border:none;border-radius:50%;
  color:#6b7280;font-size:10px;cursor:pointer;line-height:1;
  transition:background .15s,color .15s;
}
.ss-clear:hover{background:#D94040;color:#fff}
.ss-caret{font-size:11px;color:#8E9BB0;flex-shrink:0;transition:transform .2s}
.ss-wrap.open .ss-caret{transform:rotate(180deg)}

/* Panel de búsqueda */
.ss-panel{
  position:absolute;left:0;right:0;z-index:60;
  background:#fff;
  border:1.5px solid #C9A84C;border-top:none;
  border-bottom-left-radius:8px;border-bottom-right-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  overflow:hidden;
}
.ss-search{
  display:block;width:100%;box-sizing:border-box;
  padding:10px 14px;
  border:none;border-bottom:1px solid #E5E7EB;
  background:#FAFAFA;
  font-size:13px;color:#374151;outline:none;
  font-family:inherit;
}
.ss-search::placeholder{color:#9ca3af}
.ss-list{max-height:220px;overflow-y:auto}
.ss-group{font-size:9px;font-weight:700;color:#8E9BB0;text-transform:uppercase;letter-spacing:.08em;padding:10px 14px 4px}
.ss-option{
  padding:9px 14px;font-size:13px;color:#3D4A5C;cursor:pointer;
  transition:background .1s;display:flex;align-items:center;gap:8px;
}
.ss-option:hover{background:#F5F7FA;color:#002848}
.ss-option.active{background:rgba(201,168,76,.08);color:#002848;font-weight:600}
.ss-option.active::after{content:"✓";margin-left:auto;color:#C9A84C;font-size:11px}
.ss-empty{padding:16px;text-align:center;font-size:12px;color:#8E9BB0}
/* Legacy (no usados, por si acaso) */
.search-select,.ss-selected,.ss-dropdown{}

/* ── Modal Obligatorio (blocking) ───────────────────────────── */
#modal-obligatorio{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.mo-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mo-card{position:relative;background:#fff;border-radius:16px;padding:32px 28px;max-width:380px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:moSlide .3s ease}
@keyframes moSlide{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.mo-icon{font-size:40px;margin-bottom:8px}
.mo-label{font-size:10px;font-weight:700;color:#D94040;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.mo-titulo{font-size:18px;font-weight:700;color:#002848;margin-bottom:12px;line-height:1.3}
.mo-cuerpo{font-size:13px;color:#3D4A5C;line-height:1.6;margin-bottom:12px;max-height:200px;overflow-y:auto;text-align:left;padding:12px 16px;background:#F5F7FA;border-radius:10px}
.mo-adjunto{margin-bottom:16px}
.mo-adjunto a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#EAF1FB;color:#2E6FD4;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;transition:background .15s}
.mo-adjunto a:hover{background:#d6e5f9}
.mo-adjunto img{max-width:100%;max-height:150px;border-radius:8px;cursor:pointer}
.mo-meta{font-size:11px;color:#8E9BB0;margin-bottom:20px}
.mo-btn{width:100%;padding:14px;background:linear-gradient(180deg,#193b76,#062659);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .1s}
.mo-btn:active{transform:scale(.97)}
.mo-btn:disabled{opacity:.5}
.mo-counter{margin-top:12px;font-size:11px;color:#8E9BB0}