/* ══════════════════════════════════════════════════════════════
   MAIL AGENTE — Campus Unida
   Estilos compartidos de la sección de mail (usados por
   crm_burmin.html, crm-alumno.html y crm-profesor.html).
   ══════════════════════════════════════════════════════════════ */

/* ─── GMAIL SECTION ─── */
.gmail-section { margin-bottom: 1rem; }
.gmail-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gmail-section-title { font-size: 11px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.gmail-refresh-btn { background: none; border: none; font-size: 12px; color: var(--text3); cursor: pointer; padding: 2px 6px; border-radius: 5px; font-family: var(--font); }
.gmail-refresh-btn:hover { background: var(--surface2); color: var(--text); }
.gmail-mail-item { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 6px; }
.gmail-mail-item.unread { border-left: 3px solid var(--blue); background: var(--blue-bg); }
.gmail-mail-subject { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmail-mail-meta { font-size: 11px; color: var(--text3); margin-bottom: 6px; font-family: var(--mono); }
.gmail-mail-summary { font-size: 12px; color: var(--text2); line-height: 1.5; margin-bottom: 8px; }
.gmail-mail-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gmail-attach-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--amber); background: var(--amber-bg); border: 1px solid rgba(180,83,9,.2); border-radius: 5px; padding: 2px 7px; }
.gmail-open-btn { font-size: 11px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border2); background: none; color: var(--blue); cursor: pointer; font-family: var(--font); text-decoration: none; display: inline-block; }
.gmail-open-btn:hover { background: var(--blue-bg); }
.gmail-save-btn { font-size: 11px; padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(21,128,61,.25); background: var(--green-bg); color: var(--green); cursor: pointer; font-family: var(--font); }
.gmail-save-btn:hover { background: #dcfce7; }
.gmail-empty { font-size: 12px; color: var(--text3); text-align: center; padding: 16px 0; }
.gmail-loading { font-size: 12px; color: var(--text3); text-align: center; padding: 12px 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gmail-integrante-input { width: 100%; padding: 6px 9px; border: 1px solid var(--border2); border-radius: 7px; font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--surface); outline: none; margin-bottom: 8px; }
.gmail-integrante-input:focus { border-color: var(--blue); }
.gmail-no-email { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface2); border-radius: var(--radius); border: 1px dashed var(--border2); margin-bottom: 8px; }
.gmail-no-email p { font-size: 12px; color: var(--text3); }
.gmail-banner { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; flex-wrap: wrap; }
.gmail-banner a { font-size: 12px; font-weight: 500; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid rgba(37,99,235,.25); border-radius: 6px; background: var(--blue-bg); }
.gmail-banner a:hover { background: #dbeafe; }
.gmail-banner span { font-size: 11px; color: var(--text3); flex: 1; font-family: var(--mono); }
.mail-add-form { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; display: none; }
.mail-add-form.open { display: block; }
.mail-add-form label { font-size: 10px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 3px; margin-top: 8px; }
.mail-add-form label:first-child { margin-top: 0; }
.mail-add-form input, .mail-add-form textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--border2); border-radius: 7px; font-family: var(--font); font-size: 12px; color: var(--text); background: var(--surface); outline: none; }
.mail-add-form input:focus, .mail-add-form textarea:focus { border-color: var(--blue); }
.mail-add-form textarea { resize: vertical; min-height: 60px; }
.mail-del-btn { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 14px; padding: 0 3px; float: right; }
.mail-del-btn:hover { color: var(--red); }

/* ─── WEBMAIL DE DOMINIO PROPIO ─── */
.webmail-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #fff8dd, #fdefd0); border: 1px solid rgba(219,73,29,.18); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.webmail-banner-text { display: flex; flex-direction: column; gap: 2px; }
.webmail-banner-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b45309; }
.webmail-banner-email { font-size: 14px; font-weight: 600; color: #2a1608; font-family: var(--mono); }
.webmail-banner-btn { flex-shrink: 0; padding: 9px 16px; border-radius: 9px; background: linear-gradient(135deg, #db491d, #c53d16); color: #fff8dd; font-weight: 700; font-size: 13px; text-decoration: none; box-shadow: 0 8px 18px rgba(219,73,29,.28); }
.webmail-banner-btn:hover { opacity: .92; }

/* ═══════════════════════════════════════════════════════════
   CORREO REAL DEL CAMPUS — calcado 1:1 del panel de correo de
   Burmin Arga (mail-panel/index.html): mismas proporciones,
   tipografía, bordes, fondos y comportamiento. Adaptado para
   vivir DENTRO del área de contenido del Campus (no a pantalla
   completa) y con una sola casilla por sesión, sin selector de
   cuentas. Prefijo "campus-mail-" para no chocar con clases
   generales del Campus (.sidebar, .modal, .field, .btn, etc).
   ═══════════════════════════════════════════════════════════ */

.campus-mail-shell {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: var(--surface);
  height: min(76vh, 760px);
  min-height: 460px;
}

/* ── Columna 1: cuenta + navegación de carpetas ── */
.campus-mail-account-pane {
  width: 215px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1rem .85rem;
  overflow-y: auto;
}
.campus-mail-brand { font-size: 14px; font-weight: 500; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: .75rem; }
.campus-mail-account-card { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: var(--radius); margin-bottom: 2px; }
.campus-mail-account-card.active { background: var(--text); color: #fff; }
.campus-mail-account-label { font-size: 13px; font-weight: 500; }
.campus-mail-account-email { font-size: 10.5px; color: rgba(255,255,255,.62); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campus-mail-compose-btn { width: 100%; padding: 9px; border-radius: var(--radius); border: none; background: var(--blue); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; margin-bottom: 1rem; }
.campus-mail-compose-btn:hover { opacity: .9; }
.campus-mail-folder-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.campus-mail-nav-item { padding: 5px 10px; border-radius: var(--radius); cursor: pointer; font-size: 11px; color: var(--text2); border: 1px solid var(--border2); background: var(--surface); font-family: var(--font); }
.campus-mail-nav-item:hover { background: var(--surface2); }
.campus-mail-nav-item.active { background: var(--text); color: #fff; }

/* ── Columna 2: lista de mensajes ── */
.campus-mail-list-pane { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.campus-mail-list-header { padding: .85rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.campus-mail-list-header .campus-mail-search-box { width: 100%; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--border2); font-family: var(--font); font-size: 13px; outline: none; background: var(--surface); color: var(--text); box-sizing: border-box; }
.campus-mail-list-header .campus-mail-search-box:focus { border-color: var(--blue); }
.campus-mail-list-body { flex: 1; overflow-y: auto; }

.campus-mail-row { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; }
.campus-mail-row:hover { background: var(--surface2); }
.campus-mail-row.selected { background: var(--blue-bg); }
.campus-mail-row.unread .campus-mail-subject { font-weight: 600; }
.campus-mail-row.unread::before { content: "●"; color: var(--blue); font-size: 8px; margin-right: 4px; }
.campus-mail-from { font-size: 12px; color: var(--text2); padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campus-mail-subject { font-size: 13px; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 20px; }
.campus-mail-meta { font-size: 11px; color: var(--text3); display: flex; justify-content: space-between; }
.campus-mail-row-delete { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; font-size: 13px; opacity: 0; color: var(--text3); }
.campus-mail-row:hover .campus-mail-row-delete { opacity: .7; }
.campus-mail-row-delete:hover { opacity: 1 !important; color: var(--red); }
.campus-mail-empty { padding: 2rem 1rem; color: var(--text3); font-size: 13px; text-align: center; }
.campus-mail-loading { padding: 2rem 1rem; text-align: center; color: var(--text3); font-size: 13px; }

/* ── Columna 3: lector ── */
.campus-mail-reader-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 1.5rem 1.75rem; }
.campus-mail-reader-subject { font-size: 19px; font-weight: 500; margin-bottom: .7rem; color: var(--text); }
.campus-mail-reader-meta { font-size: 12px; color: var(--text2); margin-bottom: .2rem; }
.campus-mail-reader-actions { margin: 1.1rem 0; display: flex; gap: 8px; }
.campus-mail-reader-body { border-top: 1px solid var(--border); padding-top: 1.1rem; font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.campus-mail-reader-body iframe { width: 100%; min-height: 340px; border: none; }
.campus-mail-attach-list { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 8px; }
.campus-mail-attach-badge { font-size: 12px; padding: 6px 10px; border-radius: var(--radius); background: var(--surface2); text-decoration: none; color: var(--text); border: 1px solid var(--border); }
.campus-mail-reader-empty { padding: 2rem; color: var(--text3); font-size: 13px; text-align: center; }

.campus-mail-btn { padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--border2); background: var(--surface); font-family: var(--font); font-size: 12px; cursor: pointer; color: var(--text); }
.campus-mail-btn:hover { background: var(--surface2); }
.campus-mail-btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.campus-mail-btn-primary:hover { background: var(--blue); opacity: .9; }
.campus-mail-btn-red { color: var(--red); border-color: rgba(220,38,38,.3); }
.campus-mail-btn-red:hover { background: var(--red-bg); }

/* ── Modal de redactar/responder (superpuesto, NO embebido en el lector) ── */
.campus-mail-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); align-items: center; justify-content: center; z-index: 90; }
.campus-mail-modal-overlay.open { display: flex; }
.campus-mail-modal { background: var(--surface); border-radius: var(--radius-lg); width: 560px; max-width: 92vw; max-height: 88vh; overflow-y: auto; padding: 1.5rem; }
.campus-mail-modal h2 { font-size: 16px; margin-bottom: 1rem; color: var(--text); font-weight: 600; }
.campus-mail-field { margin-bottom: 10px; }
.campus-mail-field label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 4px; }
.campus-mail-field input, .campus-mail-field textarea { width: 100%; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border2); font-family: var(--font); font-size: 13px; outline: none; background: var(--surface); color: var(--text); box-sizing: border-box; }
.campus-mail-field input:focus, .campus-mail-field textarea:focus { border-color: var(--blue); }
.campus-mail-field input:disabled { color: var(--text3); background: var(--surface2); }
.campus-mail-field textarea { min-height: 160px; resize: vertical; font-family: var(--font); }
.campus-mail-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1rem; }
.campus-mail-modal-error { font-size: 12px; color: var(--red); margin-top: 6px; }

/* Bandeja 2026: cuenta, mensajes y lectura con desplazamientos independientes. */
.campus-mail-shell {
  --surface:#fff; --surface2:#f6f8fa; --text:#182b3b; --text2:#546b7c;
  --text3:#627789; --border:#e1e7ed; --border2:#cbd5df;
  --blue:#245deb; --blue-bg:#eef3ff; --radius:10px;
  display:grid; grid-template-columns:190px minmax(245px, .85fr) minmax(280px,1.4fr);
  height:calc(100dvh - 165px); min-height:540px; max-height:950px;
  border:1px solid var(--border); border-radius:16px; color:var(--text);
}
.campus-mail-shell * {box-sizing:border-box;}
.campus-mail-shell .campus-mail-account-pane {width:auto;padding:18px 12px;}
.campus-mail-shell .campus-mail-list-pane {width:auto;min-height:0;}
.campus-mail-shell .campus-mail-account-card {border-radius:10px;padding:12px;margin:12px 0 8px;background:#172f3f;}
.campus-mail-shell .campus-mail-account-email {font-family:inherit;font-size:11px;white-space:normal;overflow-wrap:anywhere;color:#d8e5ed;}
.campus-mail-shell .campus-mail-brand {font-size:16px;font-weight:600;}
.campus-mail-shell .campus-mail-compose-btn {border-radius:10px;margin-bottom:16px;font-size:14px;min-height:40px;}
.campus-mail-shell button:disabled,.cmg-dialog button:disabled {opacity:.45;cursor:not-allowed;}
.campus-mail-shell .campus-mail-nav-item {font-size:12px;}
.campus-mail-searchbar {display:flex;gap:5px;}
.campus-mail-searchbar input {min-width:0;}
.campus-mail-searchbar button {padding:6px 10px;}
.campus-mail-shell .campus-mail-row {padding:16px;min-height:92px;}
.campus-mail-shell .campus-mail-from {font-size:12px;line-height:1.5;}
.campus-mail-shell .campus-mail-subject {font-size:14px;margin:3px 0 6px;}
.campus-mail-shell .campus-mail-reader-pane {padding:24px;min-height:0;background:#fcfcfb;}
.campus-mail-shell .campus-mail-reader-subject {font-size:22px;line-height:1.35;overflow-wrap:anywhere;}
.campus-mail-shell .campus-mail-reader-meta {overflow-wrap:anywhere;line-height:1.5;}
.campus-mail-shell .campus-mail-reader-body iframe {height:45vh;min-height:320px;background:white;}
.campus-mail-shell .campus-mail-row-delete:focus {opacity:1;}
.campus-mail-shell :focus-visible,.cmg-dialog :focus-visible {outline:3px solid #98bbff;outline-offset:2px;}
.cmg-wide {display:block;width:100%;margin:8px 0;text-align:center;text-decoration:none;line-height:1.4;}
.cmg-help {font-size:12px;line-height:1.6;color:#617383;margin:14px 0 0;}
.cmg-status {font-size:12px;padding:9px 0;color:#896520;}
.cmg-ok {color:#167451;}
.cmg-dialog {box-sizing:border-box;width:min(720px,94vw);max-height:88dvh;padding:24px;border:1px solid #d8e1e9;border-radius:18px;color:#1c3140;background:#fff;box-shadow:0 24px 80px #15273738;font:14px/1.55 var(--font,system-ui,sans-serif);}
.cmg-dialog::backdrop {background:#172b4059;}
.cmg-dialog * {box-sizing:border-box;}
.cmg-title {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;}
.cmg-title h2 {font-size:21px;margin:0;}
.cmg-dialog h3 {font-size:16px;margin:0 0 8px;}
.cmg-dialog a {color:#215bc0;}
.cmg-dialog .campus-mail-btn {border-radius:9px;background:#fff;color:#203b50;border:1px solid #cad5df;font:inherit;padding:9px 14px;}
.cmg-dialog .campus-mail-btn-primary {background:#245deb;border-color:#245deb;color:white;}
.cmg-field {display:block;margin:16px 0;font-weight:500;}
.cmg-field input {display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid #cbd5df;border-radius:9px;background:#fff;color:#172f3f;font:inherit;}
.cmg-check {display:flex;align-items:flex-start;gap:8px;margin:16px 0;}
.cmg-check input {margin-top:5px;}
.cmg-note,.cmg-server {background:#f3f6f9;border:1px solid #e1e7ee;border-radius:10px;padding:12px 14px;color:#4c6172;overflow-wrap:anywhere;}
.cmg-steps {padding-left:24px;line-height:1.9;}
.cmg-result {padding:12px 14px;background:#ecf8f2;color:#165d44;border:1px solid #bce4d2;border-radius:10px;margin-bottom:16px;}
.cmg-result.cmg-error {background:#fff1f1;color:#a42d35;border-color:#f0c3c3;}
.cmg-result[hidden] {display:none;}
.cmg-users {border:1px solid #dde5ec;border-radius:10px;max-height:235px;overflow:auto;}
.cmg-user {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px;text-align:left;border:0;border-bottom:1px solid #e5ebf0;background:#fff;cursor:pointer;color:#223a4b;font:inherit;}
.cmg-user.selected {background:#eaf4f5;box-shadow:inset 3px 0 #166469;}
.cmg-user small {display:block;color:#5d7383;overflow-wrap:anywhere;}
.cmg-pill {font-size:11px;border-radius:20px;background:#eff3f7;padding:4px 8px;flex-shrink:0;}
.cmg-detail {border-top:1px solid #e0e7ed;margin-top:20px;padding-top:18px;}
.campus-password-wrap {position:relative;display:block;width:100%;}
.campus-password-wrap > input {width:100%;padding-right:44px !important;}
.campus-password-eye {
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:0;background:transparent;color:#3f4c55;cursor:pointer;border-radius:7px;
}
.campus-password-eye:hover {background:rgba(0,0,0,.045);}
.campus-password-eye svg {display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;}
.campus-password-eye:focus-visible {outline:2px solid currentColor;outline-offset:1px;}
@media(max-width:1150px) {
  .campus-mail-shell {grid-template-columns:minmax(245px,.85fr) minmax(280px,1.4fr);grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - 150px);}
  .campus-mail-shell .campus-mail-account-pane {grid-column:1/-1;display:flex;align-items:center;gap:12px;border-right:0;border-bottom:1px solid #e1e7ed;padding:10px 14px;overflow:visible;flex-wrap:wrap;}
  .campus-mail-shell .campus-mail-brand {display:none;}
  .campus-mail-shell .campus-mail-account-card {margin:0;max-width:240px;}
  .campus-mail-shell .campus-mail-compose-btn {width:auto;margin:0;padding:10px 18px;}
  #campus-mail-gestion-controles {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  #campus-mail-gestion-controles .cmg-wide {width:auto;margin:0;}
  #campus-mail-gestion-controles .cmg-help {display:none;}
}
@media(max-width:700px) {
  .campus-mail-shell {display:flex;flex-direction:column;height:auto;max-height:none;min-height:0;}
  .campus-mail-shell .campus-mail-account-pane {width:100%;}
  .campus-mail-shell .campus-mail-list-pane {width:100%;height:360px;max-height:none;flex:auto;border-right:0;}
  .campus-mail-shell .campus-mail-reader-pane {width:100%;min-height:380px;padding:18px;border-top:1px solid #e1e7ed;}
  .cmg-dialog {padding:18px;}
  .cmg-user {align-items:flex-start;flex-direction:column;gap:5px;}
}

.campus-mail-login { max-width: 360px; padding: 1.5rem; margin: auto; }
.campus-mail-login-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.campus-mail-login-sub { font-size: 12px; color: var(--text3); line-height: 1.5; }

/* ── Responsive: recién en mobile se apila (nunca en desktop/tablet) ── */
@media (max-width: 980px) {
  .campus-mail-account-pane { width: 170px; }
  .campus-mail-list-pane { width: 260px; }
}
@media (max-width: 700px) {
  .campus-mail-shell { flex-wrap: wrap; height: auto; max-height: none; }
  .campus-mail-account-pane { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .campus-mail-list-pane { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .campus-mail-list-body { max-height: 280px; }
  .campus-mail-reader-pane { max-height: 420px; }
}