/* LVE CRM — estilos. Colores de la identidad en variables para cambiarlos en un solo lugar. */
:root {
  --fondo: #0A0908;
  --sup-1: #151310;
  --sup-2: #1E1B16;
  --sup-3: #27231c;
  --borde: #2e2920;
  --texto: #F3EDE2;
  --suave: #a89f90;
  --oro: #F2B01E;
  --oro-osc: #B97A12;
  --sobre-oro: #1a1406;
  --sobre-oro-osc: #1a1406;
  --verde: #3fbf7f;
  --rojo: #e2685f;
  --radio: 12px;
  --titulos: "Anton", Impact, "Arial Narrow", sans-serif;
  --cuerpo: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow-x: hidden; }
body { background: var(--fondo); color: var(--texto); font: 15px/1.45 var(--cuerpo); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--titulos); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* ---------- Estructura ---------- */
.marco { display: grid; grid-template-columns: 236px 1fr; height: 100vh; }
.lateral { background: var(--sup-1); border-right: 1px solid var(--borde); display: flex; flex-direction: column; padding: 22px 14px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 10px 26px; }
.corona { width: 30px; color: var(--oro); display: inline-flex; }
.corona svg, .proximamente-corona svg { width: 100%; height: auto; }
.logo-texto { font-family: var(--titulos); font-size: 26px; letter-spacing: .04em; }
.logo-texto b { color: var(--oro); font-weight: 400; }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--suave); font-weight: 500; transition: background .15s, color .15s; }
.menu-item:hover { background: var(--sup-2); color: var(--texto); }
.menu-item.activo { background: linear-gradient(90deg, rgba(242,176,30,.16), rgba(242,176,30,.03)); color: var(--oro); box-shadow: inset 3px 0 0 var(--oro); }
.ico { display: inline-flex; width: 20px; height: 20px; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pronto { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--oro-osc); border: 1px solid var(--borde); border-radius: 99px; padding: 1px 7px; }
.lateral-pie { margin-top: auto; font-size: 12px; color: var(--suave); padding: 0 10px; }

.principal { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.superior { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--borde); background: rgba(10,9,8,.85); }
.buscador { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; background: var(--sup-1); border: 1px solid var(--borde); border-radius: 10px; padding: 0 12px; }
.buscador svg { width: 18px; color: var(--suave); flex: none; }
.buscador input { flex: 1; min-width: 0; background: none; border: 0; padding: 10px 0; outline: none; }
.crear { position: relative; margin-left: auto; }
.crear-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--sup-2); border: 1px solid var(--borde); border-radius: 10px; padding: 6px; min-width: 170px; z-index: 30; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.crear-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.crear-menu button:hover { background: var(--sup-3); color: var(--oro); }
.vista { flex: 1; overflow: auto; padding: 24px; }

/* ---------- Botones y campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--borde); background: var(--sup-2); cursor: pointer; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: var(--oro-osc); }
.btn-oro { background: var(--oro); border-color: var(--oro); color: var(--sobre-oro); }
.btn-oro:hover { background: #ffc23a; }
.btn-peligro { background: var(--rojo); border-color: var(--rojo); color: #1a0806; }
.btn-ganado { border-color: rgba(63,191,127,.5); color: var(--verde); background: rgba(63,191,127,.08); }
.btn-perdido { border-color: rgba(226,104,95,.5); color: var(--rojo); background: rgba(226,104,95,.08); }
.btn-texto-peligro { background: none; border-color: transparent; color: var(--rojo); margin-right: auto; }
.campo { width: 100%; background: var(--sup-1); border: 1px solid var(--borde); border-radius: 9px; padding: 9px 11px; }
.campo:focus { outline: none; border-color: var(--oro); }
.campo-chico { width: auto; padding: 7px 10px; }
select.campo { cursor: pointer; }
input[type="date"] { color-scheme: dark; }
.etiqueta-oro { color: var(--oro); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 4px; }

/* ---------- Negocios: cabecera ---------- */
.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecera h1 { font-size: 40px; line-height: 1; }
.sub { color: var(--suave); margin: 6px 0 0; }
.kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi { background: var(--sup-1); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 16px; min-width: 160px; }
.kpi span { display: block; font-size: 12px; color: var(--suave); }
.kpi strong { font-size: 22px; color: var(--oro); }
.herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.herramientas .btn-oro { margin-left: auto; }
.segmentos { display: inline-flex; background: var(--sup-1); border: 1px solid var(--borde); border-radius: 10px; padding: 3px; }
.seg { background: none; border: 0; padding: 6px 14px; border-radius: 8px; cursor: pointer; color: var(--suave); font-weight: 600; }
.seg.activo { background: var(--sup-3); color: var(--oro); }

/* ---------- Tablero ---------- */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: stretch; }
.columna { background: var(--sup-1); border: 1px solid var(--borde); border-radius: var(--radio); display: flex; flex-direction: column; min-height: 220px; transition: border-color .15s, background .15s; }
.columna.destino { border-color: var(--oro); background: #1b1810; }
.columna-cab { padding: 12px 14px; border-bottom: 1px solid var(--borde); border-top: 3px solid var(--oro-osc); border-radius: var(--radio) var(--radio) 0 0; }
.col-ganado .columna-cab { border-top-color: var(--verde); }
.col-perdido .columna-cab { border-top-color: var(--rojo); }
.columna-titulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.columna-titulo h2 { font-size: 17px; }
.contador { background: var(--sup-3); border-radius: 99px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.columna-datos { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; color: var(--suave); }
.columna-datos strong { color: var(--texto); }
.col-ganado .columna-datos strong { color: var(--verde); }
.columna-cuerpo { padding: 10px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vacio { color: var(--suave); text-align: center; font-size: 13px; border: 1px dashed var(--borde); border-radius: 10px; padding: 18px 8px; margin: 0; }

.tarjeta { background: var(--sup-2); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: border-color .15s, transform .15s, opacity .15s; }
.tarjeta:hover { border-color: var(--oro-osc); }
.tarjeta h3 { font-size: 15px; margin: 0 0 2px; }
.tarjeta p { margin: 0; }
.tarjeta-empresa { color: var(--suave); font-size: 13px; }
.tarjeta-monto { font-weight: 700; font-size: 17px; color: var(--oro); margin: 8px 0 !important; }
.col-ganado .tarjeta-monto { color: var(--verde); }
.col-perdido .tarjeta-monto { color: var(--suave); text-decoration: line-through; }
.tarjeta-pie { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); }
.tarjeta-resp { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-fecha.vencida { color: var(--rojo); font-weight: 600; }
.tarjeta-motivo { font-size: 12px; color: var(--rojo); margin-top: 8px !important; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--oro-osc); color: var(--sobre-oro-osc); display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.tarjeta.origen { opacity: .35; }
.tarjeta.levantada { transform: scale(1.03); border-color: var(--oro); }
.fantasma { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; box-shadow: 0 18px 40px rgba(0,0,0,.6); border-color: var(--oro); cursor: grabbing; }
.mover { display: none; margin-top: 10px; font-size: 12px; color: var(--suave); align-items: center; gap: 8px; }
.mover select { flex: 1; }

/* ---------- Lista ---------- */
.tabla-envoltura { background: var(--sup-1); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: 12px 14px; border-bottom: 1px solid var(--borde); font-weight: 600; }
.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--borde); }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--sup-2); }
.tabla .num { font-weight: 700; color: var(--oro); white-space: nowrap; }

/* ---------- Panel lateral y confirmación ---------- */
.fondo { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; display: flex; justify-content: flex-end; animation: aparece .15s ease; }
.fondo-confirma { z-index: 60; justify-content: center; align-items: center; padding: 16px; }
.panel { width: min(460px, 100%); height: 100%; background: var(--sup-1); border-left: 1px solid var(--borde); overflow-y: auto; padding: 22px; animation: entra .2s ease; }
.panel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.panel-cab h2 { font-size: 26px; }
.cerrar { background: var(--sup-2); border: 1px solid var(--borde); border-radius: 50%; width: 34px; height: 34px; font-size: 20px; cursor: pointer; flex: none; }
.cierre-rapido { display: flex; gap: 8px; margin-bottom: 16px; }
.cierre-rapido .btn { flex: 1; }
.formulario { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--suave); }
.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meta { font-size: 12px; color: var(--suave); margin: 0; }
.acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.confirma { background: var(--sup-2); border: 1px solid var(--borde); border-radius: 14px; padding: 22px; width: min(420px, 100%); animation: aparece .15s ease; }
.confirma h3 { margin: 0 0 6px; font-size: 18px; }
.confirma p { color: var(--suave); margin: 0 0 12px; }
.error-texto { color: var(--rojo) !important; font-size: 13px; min-height: 1em; }
@keyframes aparece { from { opacity: 0; } }
@keyframes entra { from { transform: translateX(30px); opacity: 0; } }

/* ---------- Próximamente ---------- */
.proximamente { max-width: 520px; margin: 8vh auto; text-align: center; padding: 40px 24px; border: 1px solid var(--borde); border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(242,176,30,.12), transparent 60%), var(--sup-1); }
.proximamente-corona { width: 64px; margin: 0 auto 16px; color: var(--oro); }
.proximamente h1 { font-size: 46px; margin-bottom: 10px; }
.proximamente p { color: var(--suave); }
.proximamente .btn { margin-top: 14px; }

/* ---------- Aviso ---------- */
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--sup-3); border: 1px solid var(--oro-osc); padding: 10px 18px; border-radius: 10px; z-index: 200; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .4s; max-width: calc(100% - 32px); }
.aviso.sale { opacity: 0; }

/* ---------- Móvil: menú inferior, selector de etapa visible ---------- */
@media (max-width: 800px) {
  .marco { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: row; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--borde); }
  .lateral .logo, .lateral-pie, .lateral .espacio-nombre, .lateral .sesion { display: none; }
  .logo-movil { display: block; }
  .menu { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
  .menu-item { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 10px; flex: 1; text-align: center; }
  .menu-item.activo { box-shadow: inset 0 2px 0 var(--oro); }
  .principal { height: auto; min-height: 100vh; padding-bottom: 70px; }
  .superior { padding: 10px 16px; position: sticky; top: 0; z-index: 20; }
  .vista { padding: 16px; overflow: visible; }
  .cabecera h1 { font-size: 32px; }
  .kpi { min-width: 0; flex: 1; }
  .kpi strong { font-size: 18px; }
  .herramientas .btn-oro { margin-left: 0; width: 100%; }
  .tablero { grid-auto-columns: 84%; scroll-snap-type: x mandatory; }
  .columna { scroll-snap-align: start; }
  .mover { display: flex; }
  .tabla thead { display: none; }
  .tabla tr { display: block; border-bottom: 1px solid var(--borde); padding: 8px 0; }
  .tabla td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 14px; }
  .tabla td::before { content: attr(data-t); color: var(--suave); font-size: 12px; }
  .doble { grid-template-columns: 1fr; }
  .aviso { bottom: 84px; }
}

/* ---------- Etapa 2: contactos, empresas, fichas, buscador ---------- */
.buscador { position: relative; }
.resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--sup-1); border: 1px solid var(--borde); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.resultados .meta { padding: 8px; }
.resultado { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: inherit; }
.resultado:hover, .resultado:focus { background: var(--sup-2); }
.resultado small { color: var(--oro); font-size: 11px; text-transform: uppercase; min-width: 62px; }
.resultado span { color: var(--suave); font-size: 12px; margin-left: auto; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--borde); font-size: 12px; }
.migas { margin: 0 0 8px; font-size: 13px; }
.migas a, .enlaces-ficha a { color: var(--oro); }
.enlaces-ficha { display: flex; gap: 16px; font-size: 13px; margin: 0; }
.ficha { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.3fr) minmax(240px, 1fr); gap: 16px; align-items: start; }
.bloque { background: var(--sup-1); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.bloque h3 { font-size: 16px; margin: 0; }
.asociado { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px; border-radius: 10px; border: 1px solid var(--borde); background: var(--sup-2); color: inherit; text-decoration: none; cursor: pointer; margin: 0; font: inherit; }
a.asociado:hover, button.asociado:hover { border-color: var(--oro-osc); }
.asociado small { color: var(--suave); font-size: 12px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--borde); display: flex; flex-direction: column; gap: 12px; }
.linea-tiempo li p { margin: 0; }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.casilla small { color: var(--suave); }
.selector-registro { display: flex; flex-direction: column; gap: 6px; }
.panel-ancho { width: min(760px, 100%); }
.asignar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.tabla-previa td { white-space: nowrap; font-size: 13px; }
@media (max-width: 1000px) { .ficha { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .asignar { grid-template-columns: 1fr 1fr; } }
.logo-img { width: 34px; height: 34px; object-fit: contain; display: block; }

/* ---------- Etapa 3: tareas, actividad, inicio, ajustes, marca ---------- */
/* Tonos del acento derivados de --oro (así la marca del espacio los cambia todos). */
.menu-item.activo { background: linear-gradient(90deg, color-mix(in srgb, var(--oro) 16%, transparent), transparent); }
.btn-oro:hover { background: var(--oro); filter: brightness(1.1); }
.logo-movil { display: none; flex: none; }
.logo-movil .logo-img { width: 30px; height: 30px; }
.espacio-nombre { margin: -18px 10px 22px; font-size: 12px; color: var(--suave); }
.lateral-pie { opacity: .7; }
.registrar-act { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tarea { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--sup-2); }
.tarea input { margin-top: 4px; accent-color: var(--oro); width: 18px; height: 18px; }
.tarea-titulo { flex: 1; display: flex; flex-direction: column; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.tarea-titulo small, .tarea-reg { color: var(--suave); font-size: 12px; }
a.tarea-reg { color: var(--oro); }
.tarea.hecha strong { text-decoration: line-through; color: var(--suave); }
.rojo { color: var(--rojo) !important; }
.lista-tareas { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.pestanas { margin-bottom: 16px; display: inline-flex; flex-wrap: wrap; }
.kpis-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-enlace:hover { border-color: var(--oro); }
.inicio-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.barras { display: flex; flex-direction: column; gap: 10px; }
.barra-fila { display: grid; grid-template-columns: 130px 1fr 110px; gap: 10px; align-items: center; font-size: 13px; }
.barra-fila strong { text-align: right; }
.barra-pista { background: var(--sup-2); border-radius: 6px; height: 14px; overflow: hidden; }
.barra { height: 100%; background: var(--oro); border-radius: 6px; }
.barra.ganado { background: var(--verde); }
.barra.perdido { background: var(--rojo); }
.ajustes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.ajustes-grid .bloque { margin: 0; }
.fila-etapa { display: grid; grid-template-columns: 1fr 70px 80px; gap: 8px; }
.fila-ajuste { display: flex; gap: 8px; align-items: center; }
.fila-ajuste .fila { flex: 1; }
.color { width: 64px; height: 38px; border: 1px solid var(--borde); border-radius: 8px; background: none; cursor: pointer; }
.logo-previa { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--borde); border-radius: 10px; background: var(--sup-2); }
@media (max-width: 900px) { .inicio-grid { grid-template-columns: 1fr; } .barra-fila { grid-template-columns: 90px 1fr 90px; } }

/* ---------- Etapa final: validación y ajustes móviles ---------- */
.campo:user-invalid { border-color: var(--rojo); }
.ajustes-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.ficha > *, .inicio-grid > *, .ajustes-grid > * { min-width: 0; }
.kpi small { display: block; margin-top: 2px; }
@media (max-width: 800px) {
  .superior { gap: 8px; }
  .crear-menu { max-width: calc(100vw - 32px); }
  .fondo-confirma .confirma { max-height: calc(100vh - 32px); overflow-y: auto; }
  .panel { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .fila-etapa { grid-template-columns: 1fr 60px 70px; }
  .barra-fila { grid-template-columns: 80px 1fr 84px; font-size: 12px; }
  .cabecera > * { min-width: 0; }
}

/* v2: inicio de sesión y pie de sesión */
.acceso { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--fondo); }
.acceso-caja { width: min(380px, 100%); display: grid; gap: 14px; background: var(--sup-1); border: 1px solid var(--borde); border-radius: 14px; padding: 26px; }
.acceso-caja h1 { font-size: 28px; }
.acceso-logo { display: flex; align-items: center; gap: 10px; }
.acceso-error { color: #e07a6a; min-height: 1em; font-size: 13px; }
.sesion { display: grid; gap: 4px; padding: 10px; margin-top: auto; border-top: 1px solid var(--borde); font-size: 12px; }
.sesion + .lateral-pie { margin-top: 8px; }
.sesion-nombre { color: var(--texto); font-weight: 600; }
.sesion-email { color: var(--suave); overflow-wrap: anywhere; }
.sesion-espacio { width: 100%; background: var(--sup-2); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; padding: 6px; }
.sesion-link { justify-self: start; background: none; border: 0; padding: 2px 0; color: var(--oro); font: inherit; cursor: pointer; }
.sesion-movil { display: none; flex: none; background: none; border: 1px solid var(--borde); border-radius: 8px; color: var(--suave); font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; }
@media (max-width: 800px) { .sesion-movil { display: block; } }

/* Avisos (campanita) */
.campana-caja { position: relative; margin-left: auto; }
.campana-caja + .crear { margin-left: 0; }
.campana { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sup-2); border: 1px solid var(--borde); color: var(--texto); cursor: pointer; }
.campana svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.campana:hover { color: var(--oro); }
.campana-num { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--oro); color: var(--sobre-oro, #1a1406); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.avisos { position: absolute; right: 0; top: calc(100% + 6px); width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--sup-2); border: 1px solid var(--borde); border-radius: 12px; padding: 10px; z-index: 40; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.avisos-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.avisos-lista { display: grid; gap: 4px; }
.aviso-item { display: grid; gap: 2px; text-align: left; background: none; border: 0; border-left: 3px solid transparent; border-radius: 8px; padding: 8px 10px; color: var(--suave); font: inherit; cursor: pointer; }
.aviso-item:hover { background: var(--sup-3, #26221b); }
.aviso-item strong { color: var(--texto); font-weight: 600; }
.aviso-item small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.aviso-item span { font-size: 13px; }
.aviso-item.nuevo { border-left-color: var(--oro); }
.aviso-item.av-vencida small { color: #e07a6a; }
.aviso-item.av-hoy small { color: var(--oro); }