/* =====================================================
   CAI v2 — style.css — Portal Docentes
   ===================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --cream:#F7F3EC; --warm:#EDE5D6;
  --teal:#2A6B5E; --teal-lt:#3D8A7A; --teal-dk:#1A4A40;
  --ink:#1E1B16; --ink-60:#5A5548; --ink-30:#A09880;
  --white:#FFFFFF; --danger:#8B2020; --radius:12px;
  /* Role colors */
  --c-admin:#6D28D9; --c-dir:#1A4A40; --c-ped:#1D6FA4;
  --c-tec:#B45309; --c-esp:#065F46; --c-doc:#2A6B5E;
  --c-asi:#6B7280; --c-coc:#92400E;
}

body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh}

/* ── LOGIN ── */
#login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--teal-dk);
  background-image:radial-gradient(circle at 20% 30%,rgba(184,134,11,.18) 0%,transparent 50%),
                   radial-gradient(circle at 80% 70%,rgba(61,138,122,.25) 0%,transparent 50%);
  padding:1.5rem;
}
.login-card{background:var(--white);border-radius:20px;padding:2.5rem 2.5rem 2rem;width:100%;max-width:400px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.login-logo{display:flex;align-items:center;gap:14px;margin-bottom:1.8rem}
.login-emblem{width:56px;height:56px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.login-emblem svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.6}
.login-logo-text h1{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--teal-dk);line-height:1.25}
.login-logo-text p{font-size:11px;color:var(--ink-60);margin-top:2px}
.login-tagline{font-size:13px;color:var(--ink-60);margin-bottom:1.6rem;padding-bottom:1.6rem;border-bottom:1px solid var(--warm)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-60);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.field input{width:100%;padding:11px 14px;border:1.5px solid var(--warm);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);background:var(--cream);outline:none;transition:border-color .2s}
.field input:focus{border-color:var(--teal);background:var(--white)}
.form-error{display:none;background:#FEF2F2;border:1px solid #FCA5A5;color:var(--danger);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:1rem}
.btn-primary{width:100%;padding:12px;background:var(--teal);color:var(--white);border:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s;margin-top:.4rem}
.btn-primary:hover{background:var(--teal-lt)}
.btn-primary:active{transform:scale(.98)}
.login-footer{text-align:center;font-size:11.5px;color:var(--ink-30);margin-top:1.4rem}

/* ── TOPBAR ── */
#portal{display:none;min-height:100vh}
.topbar{background:var(--teal-dk);padding:0 2rem;height:62px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.topbar-brand{display:flex;align-items:center;gap:12px}
.topbar-emblem{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.topbar-emblem svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8}
.topbar-title{font-family:'Playfair Display',serif;font-size:15px;color:#fff;font-weight:600}
.topbar-subtitle{font-size:11px;color:rgba(255,255,255,.55);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topbar-user{display:flex;align-items:center;gap:8px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:#B8860B;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.user-name{font-size:13px;color:rgba(255,255,255,.85)}
.role-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);letter-spacing:.04em}
.btn-logout{padding:6px 14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);border-radius:6px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .2s}
.btn-logout:hover{background:rgba(255,255,255,.18)}

/* ── NAV ── */
.nav-tabs{background:var(--white);border-bottom:1.5px solid var(--warm);padding:0 2rem;display:flex;overflow-x:auto}
.nav-tab{padding:14px 18px;font-size:13px;font-weight:500;color:var(--ink-60);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s;display:flex;align-items:center;gap:6px;user-select:none}
.nav-tab:hover{color:var(--teal)}
.nav-tab.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:600}

/* ── BOTTOM NAV MÓVIL ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--warm);z-index:99}
.bottom-nav-inner{display:grid;grid-template-columns:repeat(4,1fr)}
.bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px 11px;cursor:pointer;user-select:none;border:none;background:none;font-family:'DM Sans',sans-serif}
.bnav-icon{font-size:19px;line-height:1}
.bnav-label{font-size:10px;font-weight:500;color:var(--ink-60)}
.bnav-item.active .bnav-label{color:var(--teal);font-weight:700}

/* ── MAIN ── */
.main-wrap{max-width:900px;margin:0 auto;padding:2rem 1.5rem 4rem}
.section{display:none}
.section.active{display:block}

/* ── WELCOME BANNER ── */
.welcome-banner{background:linear-gradient(135deg,var(--teal-dk) 0%,var(--teal) 100%);border-radius:var(--radius);padding:2rem 2rem 1.8rem;margin-bottom:1.8rem;position:relative;overflow:hidden}
.welcome-banner::after{content:'';position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05)}
.welcome-banner h2{font-family:'Playfair Display',serif;font-size:22px;color:#fff;margin-bottom:6px}
.welcome-banner p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.6}
.welcome-info{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.badge-date,.badge-role-display{display:inline-block;background:rgba(255,255,255,.12);color:rgba(255,255,255,.9);font-size:12px;padding:4px 12px;border-radius:20px}

/* ── SECTION HEADER ── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem;flex-wrap:wrap;gap:.8rem}
.section-header h2{font-family:'Playfair Display',serif;font-size:21px;color:var(--ink)}
.badge-count{background:var(--teal);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}

/* ── MENSAJE CARD ── */
.message-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--warm);padding:1.2rem 1.4rem;margin-bottom:1rem;transition:box-shadow .2s}
.message-card:hover{box-shadow:0 4px 20px rgba(42,107,94,.1)}
.msg-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:10px;flex-wrap:wrap}
.msg-priority{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;flex-shrink:0}
.msg-priority.urgente{background:#FEF2F2;color:var(--danger)}
.msg-priority.importante{background:#FFFBEB;color:#92400E}
.msg-priority.general{background:#F0FDF4;color:#166534}
.msg-title{font-weight:600;font-size:15px;color:var(--ink);line-height:1.4}
.msg-body{font-size:14px;color:var(--ink-60);line-height:1.65}
.msg-footer{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--warm);font-size:12px;color:var(--ink-30);flex-wrap:wrap}
.msg-dest{font-size:11px;padding:2px 8px;border-radius:12px;background:var(--warm);color:var(--ink-60)}

/* ── MATERIALES ── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.4rem}
.filter-btn{padding:7px 16px;border-radius:20px;border:1.5px solid var(--warm);background:var(--white);font-size:13px;font-weight:500;color:var(--ink-60);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .18s}
.filter-btn:hover{border-color:var(--teal);color:var(--teal)}
.filter-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
.materials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.material-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--warm);padding:1.2rem;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .15s}
.material-card:hover{box-shadow:0 6px 24px rgba(42,107,94,.13);transform:translateY(-2px)}
.mat-icon-wrap{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.mat-icon-wrap.video{background:#FEF2F2} .mat-icon-wrap.pdf{background:#FFF7ED}
.mat-icon-wrap.audio{background:#F0FDF4} .mat-icon-wrap.imagen{background:#EFF6FF}
.mat-icon-wrap.ebook{background:#F5F3FF} .mat-icon-wrap.otro{background:#F9FAFB}
.mat-type{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mat-type.video{color:var(--danger)} .mat-type.pdf{color:#C05621}
.mat-type.audio{color:#166534}       .mat-type.imagen{color:#1D4ED8}
.mat-type.ebook{color:#5B21B6}       .mat-type.otro{color:#374151}
.mat-title{font-weight:600;font-size:14px;color:var(--ink);line-height:1.4}
.mat-desc{font-size:13px;color:var(--ink-60);line-height:1.5}
.mat-actions{display:flex;gap:8px;margin-top:auto}
.btn-mat{flex:1;padding:8px 10px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;font-family:'DM Sans',sans-serif;transition:opacity .2s;border:none}
.btn-mat:hover{opacity:.82}
.btn-ver{background:var(--teal);color:#fff}
.btn-dl{background:var(--warm);color:var(--teal-dk)}

/* ── INFO ── */
.info-section{background:var(--white);border-radius:var(--radius);border:1px solid var(--warm);padding:1.6rem;margin-bottom:1.2rem}
.info-section h3{font-family:'Playfair Display',serif;font-size:17px;color:var(--teal-dk);margin-bottom:10px}
.info-section p,.info-section li{font-size:14px;color:var(--ink-60);line-height:1.7}
.info-section ul{padding-left:1.2rem}

/* ── VIEWER MODAL ── */
#viewer-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:200;align-items:center;justify-content:center;padding:1rem}
#viewer-modal.open{display:flex}
.viewer-box{background:var(--white);border-radius:16px;width:100%;max-width:800px;overflow:hidden}
.viewer-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-bottom:1px solid var(--warm)}
.viewer-head h3{font-size:15px;font-weight:600;color:var(--ink)}
.btn-close-viewer{width:32px;height:32px;border-radius:50%;background:var(--warm);border:none;cursor:pointer;font-size:18px;color:var(--ink-60);display:flex;align-items:center;justify-content:center}
.btn-close-viewer:hover{background:#ddd}
#viewer-content{padding:1rem}
#viewer-content iframe{width:100%;height:480px;border:none;border-radius:8px}
#viewer-content video{width:100%;max-height:420px;border-radius:8px}
#viewer-content audio{width:100%;margin-top:1rem}
#viewer-content img{width:100%;max-height:80vh;object-fit:contain;border-radius:8px}
.loading-indicator{text-align:center;padding:2rem;color:var(--ink-30);font-size:14px}

/* ── RESPONSIVE ── */
@media(min-width:1024px){.main-wrap{max-width:960px;padding:2.5rem 2rem 5rem}.materials-grid{grid-template-columns:repeat(3,1fr)}.welcome-banner h2{font-size:26px}}
@media(min-width:600px)and(max-width:1023px){.main-wrap{padding:1.8rem 1.5rem 4rem}.materials-grid{grid-template-columns:repeat(2,1fr)}.topbar{padding:0 1.4rem}}
@media(max-width:599px){
  .topbar{padding:0 1rem;height:54px}.topbar-subtitle,.user-name,.role-chip{display:none}
  .topbar-title{font-size:13.5px}.btn-logout{padding:5px 10px;font-size:11px}
  .nav-tabs{display:none}.bottom-nav{display:block}
  .main-wrap{padding:1.2rem .9rem 5.5rem}
  .login-card{border-radius:16px;padding:1.8rem 1.4rem 1.4rem}
  .welcome-banner{padding:1.4rem 1.2rem;border-radius:10px}.welcome-banner h2{font-size:18px}
  .section-header h2{font-size:18px}.materials-grid{grid-template-columns:1fr}
  .material-card{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:8px}
  .mat-icon-wrap{width:40px;height:40px;font-size:18px;flex-shrink:0}
  .material-card>div:nth-child(2){flex:1;min-width:0}
  .mat-desc,.mat-actions{flex-basis:100%}
  .msg-header{flex-direction:column;gap:6px;align-items:flex-start}
  #viewer-modal{align-items:flex-end;padding:0}.viewer-box{border-radius:12px 12px 0 0}
  #viewer-content iframe{height:260px}
}
@media(max-width:359px){.topbar-title{font-size:12px}.bnav-label{font-size:9px}}

/* ──────── MATERIALES — VISTA LISTA ──────── */
.mat-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.mat-list-item {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--warm);
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: box-shadow .15s, border-color .15s;
}

.mat-list-item:hover {
  box-shadow: 0 3px 14px rgba(42,107,94,.09);
  border-color: #d4c9b5;
}

.mat-list-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 17px !important;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-list-info {
  flex: 1;
  min-width: 0;
}

.mat-list-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2px;
  line-height: 1;
}

.mat-list-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.mat-list-desc {
  font-size: 12px;
  color: var(--ink-60);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.mat-list-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.mat-list-actions .btn-mat {
  padding: 7px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Colores de tipo en lista */
.mat-list-type.video { color: var(--danger); }
.mat-list-type.pdf   { color: #C05621; }
.mat-list-type.audio { color: #166534; }
.mat-list-type.imagen{ color: #1D4ED8; }
.mat-list-type.ebook { color: #5B21B6; }
.mat-list-type.office{ color: #1E40AF; }
.mat-list-type.otro  { color: #374151; }

/* ──────── ENLACES EN COMUNICADOS ──────── */
.msg-body a.msg-link {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: rgba(42,107,94,.35);
  text-underline-offset: 2px;
  word-break: break-all;
  transition: color .15s;
}
.msg-body a.msg-link:hover {
  color: var(--teal-dk);
  text-decoration-color: var(--teal-dk);
}

@media (max-width: 599px) {
  .mat-list-item { gap: .7rem; padding: .75rem .9rem; }
  .mat-list-title { font-size: 13px; }
  .mat-list-desc  { display: none; }
  .mat-list-icon  { width: 32px !important; height: 32px !important; font-size: 15px !important; }
  .mat-list-actions .btn-mat { padding: 6px 9px; font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════
   MURO
   ══════════════════════════════════════════════════════ */

/* ── Compositor de nuevo post ── */
.muro-composer {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--warm);
  padding: 1rem 1.2rem 1rem;
  margin-bottom: 1.2rem;
}

.composer-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.composer-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
  margin-top: 2px;
}

.composer-input {
  flex: 1;
  min-height: 44px;
  max-height: 200px;
  padding: 10px 14px;
  border: 1.5px solid var(--warm);
  border-radius: 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  outline: none;
  resize: none;
  overflow: hidden;
  transition: border-color .2s, min-height .2s;
  line-height: 1.5;
}

.composer-input:focus {
  border-color: var(--teal);
  background: var(--white);
  min-height: 80px;
  overflow: auto;
}

.composer-input::placeholder { color: var(--ink-30); }

/* Panel de opciones expandido */
.composer-options {
  display: none;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--warm);
  gap: .7rem;
  flex-direction: column;
}

.composer-options.open { display: flex; }

.composer-row {
  display: flex;
  gap: .7rem;
  align-items: center;
  flex-wrap: wrap;
}

.composer-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-60);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.composer-vis-select {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1.5px solid var(--warm);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--cream);
  outline: none;
}

.composer-vis-select:focus { border-color: var(--teal); }

/* Chips de roles para visibilidad */
.vis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.vis-chip {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1.5px solid var(--warm);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
  background: var(--white);
  color: var(--ink-60);
}

.vis-chip:hover { border-color: var(--teal); color: var(--teal); }
.vis-chip.selected { background: var(--teal); border-color: var(--teal); color: var(--white); }
.vis-chip.chip-todos { border-color: var(--teal-dk); }
.vis-chip.chip-todos.selected { background: var(--teal-dk); border-color: var(--teal-dk); }

/* Previsualización de imagen */
.composer-preview {
  position: relative;
  display: inline-block;
  margin-top: .4rem;
}

.composer-preview img {
  max-height: 160px;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--warm);
  display: block;
}

.composer-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Barra inferior del compositor */
.composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .8rem;
  flex-wrap: wrap;
  gap: .5rem;
}

.composer-actions {
  display: flex;
  gap: 4px;
}

.composer-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--warm);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  color: var(--ink-60);
}

.composer-btn:hover {
  background: var(--cream);
  border-color: var(--teal);
}

.composer-btn.active {
  background: rgba(42,107,94,.1);
  border-color: var(--teal);
  color: var(--teal);
}

.btn-publicar {
  padding: 8px 20px;
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}

.btn-publicar:hover   { background: var(--teal-lt); }
.btn-publicar:disabled{ opacity: .5; cursor: not-allowed; }

/* Archivo seleccionado en compositor */
.composer-file-info {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1px solid var(--warm);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--ink-60);
  margin-top: .4rem;
}

.composer-file-info.show { display: flex; }

.composer-file-remove {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--danger);
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

/* Campo de enlace */
.composer-link-row {
  display: none;
  gap: 6px;
  align-items: center;
  margin-top: .4rem;
}

.composer-link-row.show { display: flex; }

.composer-link-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--warm);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--cream);
  outline: none;
}

.composer-link-input:focus { border-color: var(--teal); }

/* ── Feed de posts ── */
.muro-feed { display: flex; flex-direction: column; gap: 1rem; }

.muro-post {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--warm);
  overflow: hidden;
  transition: box-shadow .2s;
}

.muro-post:hover { box-shadow: 0 3px 18px rgba(42,107,94,.08); }

.post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.1rem .6rem;
  gap: .8rem;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.post-author-info .author-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
}

.post-author-info .author-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.author-role-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  color: var(--white);
}

.post-time {
  font-size: 11px;
  color: var(--ink-30);
}

.post-vis-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--warm);
  color: var(--ink-60);
  font-weight: 600;
  white-space: nowrap;
}

.post-menu {
  position: relative;
  flex-shrink: 0;
}

.post-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-30);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.post-menu-btn:hover { background: var(--cream); color: var(--ink-60); }

.post-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 32px;
  background: var(--white);
  border: 1px solid var(--warm);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 10;
  min-width: 140px;
  overflow: hidden;
}

.post-menu-dropdown.open { display: block; }

.post-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-60);
  transition: background .12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
}

.post-menu-item:hover { background: var(--cream); color: var(--ink); }
.post-menu-item.danger { color: var(--danger); }
.post-menu-item.danger:hover { background: #FEF2F2; }

/* Cuerpo del post */
.post-body {
  padding: 0 1.1rem .7rem;
}

.post-text {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.post-text a.msg-link {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: rgba(42,107,94,.3);
  text-underline-offset: 2px;
}

/* Imagen del post */
.post-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity .15s;
}

.post-image:hover { opacity: .95; }

/* Enlace externo en post */
.post-link-card {
  margin: .7rem 1.1rem;
  border: 1px solid var(--warm);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  transition: box-shadow .15s;
  background: var(--cream);
}

.post-link-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }

.post-link-accent {
  width: 5px;
  min-height: 56px;
  background: var(--teal);
  flex-shrink: 0;
  align-self: stretch;
}

.post-link-info {
  padding: .65rem .9rem;
  min-width: 0;
}

.post-link-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-link-url {
  font-size: 11px;
  color: var(--ink-30);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Archivo adjunto en post */
.post-file {
  margin: .5rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1px solid var(--warm);
  border-radius: 8px;
  padding: .7rem .9rem;
  text-decoration: none;
  transition: box-shadow .15s;
}

.post-file:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }

.post-file-icon { font-size: 22px; flex-shrink: 0; }

.post-file-info { min-width: 0; }

.post-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-file-meta { font-size: 11px; color: var(--ink-30); margin-top: 1px; }

/* Barra de acciones del post */
.post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .4rem 1.1rem .7rem;
  border-top: 1px solid var(--warm);
  margin-top: .4rem;
}

.post-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-60);
  font-family: 'DM Sans', sans-serif;
  transition: background .15s, color .15s;
  font-weight: 500;
}

.post-action-btn:hover { background: var(--cream); color: var(--ink); }
.post-action-btn.liked { color: var(--danger); font-weight: 700; }
.post-action-btn.liked:hover { background: #FEF2F2; }

/* Sección de comentarios */
.post-comments {
  display: none;
  border-top: 1px solid var(--warm);
  background: var(--cream);
  padding: .8rem 1.1rem;
}

.post-comments.open { display: block; }

.comment-item {
  display: flex;
  gap: 8px;
  margin-bottom: .7rem;
  align-items: flex-start;
}

.comment-item:last-child { margin-bottom: 0; }

.comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
  margin-top: 1px;
}

.comment-bubble {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--warm);
  border-radius: 12px 12px 12px 3px;
  padding: .5rem .8rem;
  position: relative;
}

.comment-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.comment-text {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-time {
  font-size: 10.5px;
  color: var(--ink-30);
  margin-top: 3px;
}

.comment-delete {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-30);
  opacity: 0;
  transition: opacity .15s;
  padding: 0;
}

.comment-bubble:hover .comment-delete { opacity: 1; }
.comment-delete:hover { color: var(--danger); }

/* Caja para escribir comentario */
.comment-input-row {
  display: flex;
  gap: 7px;
  margin-top: .7rem;
  align-items: flex-end;
}

.comment-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--warm);
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--white);
  outline: none;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  overflow: auto;
  transition: border-color .2s;
  line-height: 1.4;
}

.comment-input:focus { border-color: var(--teal); }
.comment-input::placeholder { color: var(--ink-30); }

.comment-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal);
  border: none;
  cursor: pointer;
  color: var(--white);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}

.comment-send:hover    { background: var(--teal-lt); }
.comment-send:disabled { opacity: .4; cursor: not-allowed; }

/* Estado vacío del muro */
.muro-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-30);
}

.muro-empty-icon { font-size: 40px; margin-bottom: .8rem; }
.muro-empty p    { font-size: 14px; }

/* Botón cargar más */
.btn-load-more {
  width: 100%;
  padding: 10px;
  background: var(--white);
  border: 1.5px solid var(--warm);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-60);
  cursor: pointer;
  transition: background .15s, color .15s;
  margin-top: .5rem;
}

.btn-load-more:hover { background: var(--cream); color: var(--teal); }

/* Responsive */
@media (max-width: 599px) {
  .composer-vis-select { font-size: 12px; }
  .vis-chip { font-size: 11px; padding: 3px 9px; }
  .post-header { padding: .8rem .9rem .5rem; }
  .post-body  { padding: 0 .9rem .6rem; }
  .post-text  { font-size: 14px; }
  .post-actions { padding: .3rem .9rem .6rem; }
  .post-comments { padding: .7rem .9rem; }
  .post-link-card,.post-file { margin-left: .9rem; margin-right: .9rem; }
  .muro-composer { padding: .9rem .9rem .9rem; }
}