/* ═══════════════════════════════════════════════════════════════════
   CCC · MENÚ COMÚN (ver ccc-menu.js). Usa los colores del tema N.3.
   ═══════════════════════════════════════════════════════════════════ */
.cm-ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;}

/* ── Botones en la barra de arriba ── */
.cm-acciones{display:flex;align-items:center;gap:8px;margin-left:auto;}
.cm-acciones + .ccc-tema-btn,.cm-acciones ~ .ccc-tema-btn{margin-left:8px;}
.cm-busca-btn,.cm-menu-btn{
  font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  height:40px;border-radius:999px;border:1px solid var(--hair);
  background:var(--campo,var(--panel));color:var(--cuerpo);padding:0 14px;
  transition:border-color .2s,background .2s,color .2s;
}
.cm-busca-btn{min-width:240px;justify-content:flex-start;}
.cm-busca-btn span{flex:1;text-align:left;font-weight:500;}
.cm-busca-btn kbd{font:600 11px/1 var(--body);border:1px solid var(--hair);border-radius:6px;padding:3px 6px;color:var(--cuerpo);}
.cm-busca-btn:hover{border-color:var(--oro);color:var(--tinta);}
.cm-menu-btn{background:var(--oro);color:var(--sobre-oro,#fff);border-color:var(--oro);}
.cm-menu-btn:hover{filter:brightness(1.07);}
.cm-busca-btn:focus-visible,.cm-menu-btn:focus-visible{outline:2px solid var(--oro);outline-offset:2px;}
/* En la barra de Inicio, los botones son redondos como la campana */
.barra-der .cm-acciones{margin-left:0;}
.barra-der .cm-busca-btn{min-width:0;width:38px;height:38px;padding:0;justify-content:center;}
.barra-der .cm-busca-btn span,.barra-der .cm-busca-btn kbd{display:none;}
.barra-der .cm-menu-btn{height:38px;padding:0 12px;}
@media (max-width:900px){
  .cm-busca-btn{min-width:0;width:40px;padding:0;justify-content:center;}
  .cm-busca-btn span,.cm-busca-btn kbd{display:none;}
}
@media (max-width:420px){
  .cm-menu-btn span{display:none;}
  .cm-menu-btn{width:40px;padding:0;justify-content:center;}
  .barra-der .cm-menu-btn{width:38px;}
}
/* Inicio en el celular: la etiqueta del rol cede su lugar al menú */
@media (max-width:460px){ .barra-der:has(.cm-acciones) .rol{display:none;} }
.cm-flotante{position:fixed!important;right:16px;bottom:16px;z-index:60!important;}
a.cm-volver{white-space:nowrap;margin-left:18px;}
@media (max-width:600px){a.cm-volver{display:none!important;}}

/* ── Cajón ── */
/* !important: algunas páginas (inicio) tienen «body > *:not(#enjambre){position:relative}», que pesa como un id */
.cm-tapa{position:fixed!important;inset:0;background:rgba(4,14,18,.42);z-index:900!important;opacity:0;pointer-events:none;transition:opacity .2s;}
.cm-tapa.cm-abierto{opacity:1;pointer-events:auto;}
.cm-cajon{
  position:fixed!important;top:0;right:0;bottom:0;z-index:901!important;width:min(380px,100vw);
  background:var(--panel);border-left:1px solid var(--hair);box-shadow:-18px 0 44px rgba(0,0,0,.18);
  display:flex;flex-direction:column;transform:translateX(102%);visibility:hidden;transition:transform .24s ease,visibility 0s linear .24s;
  font-family:var(--body);color:var(--cuerpo);
}
.cm-cajon.cm-abierto{transform:none;visibility:visible;transition:transform .24s ease,visibility 0s;}
html.cm-sin-scroll{overflow:hidden;}
@media (prefers-reduced-motion:reduce){.cm-cajon,.cm-tapa{transition:none;}}

.cm-cab{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;}
.cm-ava{width:38px;height:38px;flex:0 0 38px;border-radius:999px;background:var(--oro);color:var(--sobre-oro,#fff);font:800 15px/1 var(--serif);display:flex;align-items:center;justify-content:center;}
.cm-quien{flex:1;min-width:0;display:flex;flex-direction:column;}
.cm-quien b{color:var(--tinta);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-quien small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);}
.cm-x{width:38px;height:38px;border-radius:999px;border:1px solid var(--hair);background:transparent;color:var(--tinta);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cm-x:hover{background:var(--elevado,rgba(0,0,0,.05));}

.cm-buscador{display:flex;align-items:center;gap:10px;margin:0 16px 8px;padding:0 14px;height:46px;border-radius:999px;border:1px solid var(--hair);background:var(--campo,var(--papel));color:var(--cuerpo);}
.cm-buscador:focus-within{border-color:var(--oro);box-shadow:0 0 0 3px color-mix(in srgb,var(--oro) 20%,transparent);}
.cm-buscador input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;outline:none;font:500 15px var(--body);color:var(--tinta)!important;padding:0!important;min-height:0;}

.cm-cuerpo{flex:1;overflow-y:auto;padding:4px 10px 14px;overscroll-behavior:contain;}
.cm-grupo ul,#cmRes ul{list-style:none;margin:0;padding:0;}
.cm-gtit{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);padding:14px 10px 4px;margin:0;}
.cm-link{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;text-decoration:none;color:var(--tinta);font-size:15px;line-height:1.25;}
.cm-link .cm-ic{color:var(--oro);}
.cm-link:hover,.cm-link:focus-visible{background:var(--elevado,rgba(0,0,0,.05));outline:none;}
.cm-link.cm-on{background:color-mix(in srgb,var(--oro) 14%,transparent);font-weight:700;box-shadow:inset 3px 0 0 var(--oro);}
.cm-res span{display:flex;flex-direction:column;}
.cm-res b{font-weight:700;color:var(--tinta);}
.cm-res small{font-size:12.5px;color:var(--cuerpo);}
.cm-res.cm-primero{background:color-mix(in srgb,var(--oro) 10%,transparent);}
.cm-vacio{font-size:14px;padding:14px 10px;margin:0;}

.cm-pie{border-top:1px solid var(--hair);padding:10px 12px 14px;display:flex;flex-direction:column;gap:2px;}
.cm-pie a,.cm-pie button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font:600 14px var(--body);color:var(--cuerpo);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left;}
.cm-pie a:hover,.cm-pie button:hover{background:var(--elevado,rgba(0,0,0,.05));color:var(--tinta);}