/* ============================================================================
   SayProposals · tabla de propuestas
   Tabla profesional: barra de búsqueda y filtros desplegables, orden por
   columna, badge de estado que se cambia en la misma fila y menú de acciones.
   ========================================================================== */

.tb-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}

.tb-buscar{position:relative;display:flex;align-items:center;flex:1;min-width:230px;max-width:330px;}
.tb-buscar .ico{position:absolute;left:13px;width:15px;height:15px;color:var(--gris2);pointer-events:none;}
.tb-buscar input{padding-left:38px;background:#fff;border:1.5px solid var(--line);font-size:13.5px;}
.tb-buscar input:focus{border-color:var(--celeste);}

/* ---------- La tabla es una sección, no una card ----------
   Sin contenedor blanco redondeado y sin scroll interno: la tabla va directo
   sobre el fondo de la página, a ancho completo del área de contenido. Con
   table-layout:fixed los anchos los mandamos nosotros y ninguna celda puede
   desbordar: lo que no entra se corta con puntos suspensivos.

   `separate` con spacing 0 se ve igual que `collapse` pero deja que se pinten
   los bordes de las celdas sticky (encabezado y, en pantallas chicas, Marca). */
.tb-wrap{overflow:visible;}
.tb{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;table-layout:fixed;}

/* Encabezados sticky: quedan a la vista al scrollear la página.
   Con table-layout:fixed el que manda el ancho mínimo es el TÍTULO, no el
   dato: un th nowrap más ancho que su columna empuja la tabla entera. Por eso
   los th llevan el mismo overflow:hidden que las celdas, como garantía de que
   nada pueda volver a desbordar. */
.tb th{position:sticky;top:0;z-index:2;background:var(--bg);
  text-align:left;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris2);padding:11px 8px;white-space:nowrap;cursor:pointer;user-select:none;
  border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;}
.tb th:hover{color:var(--navy);}
.tb th.act{color:var(--navy);}
.tb th.num,.tb td.num{text-align:right;}
.tb-flecha{margin-left:5px;font-size:11px;}

.tb td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb tbody tr:hover td{background:#fff;}

/* Anchos medidos, no estimados: cada columna se dimensiona contra lo más ancho
   que tenga que mostrar. En casi todas manda el título más su flecha de orden;
   en Estado manda el chip, que llega a 91px con "Aceptada" y no puede salir
   cortado porque es el control que abre el menú de estado.
   Los fijos suman 781px: en una laptop de 1280 el área de contenido es de
   970px, así que a Marca le quedan 189. */
.tb th:nth-child(2){width:107px;}   /* Estado */
.tb th:nth-child(3){width:126px;}   /* Vistas · Únicos */
.tb th:nth-child(4){width:94px;}    /* Apertura */
.tb th:nth-child(5){width:76px;}    /* Creada */
.tb th:nth-child(6){width:84px;}    /* Enviada */
.tb th:nth-child(7){width:70px;}    /* Vence */
.tb th:nth-child(8){width:68px;}    /* Score */
.tb th:nth-child(9){width:104px;}   /* Aceptación */
.tb th:nth-child(10){width:52px;}   /* Acciones */

/* El nombre de la marca abre las Estadísticas de esa propuesta. */
.tb-marca{display:block;max-width:100%;background:none;border:0;padding:0;text-align:left;
  font-family:inherit;font-weight:800;font-size:13.5px;color:var(--navy);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-marca:hover{color:var(--celeste);text-decoration:underline;text-underline-offset:3px;}
.tb-slug{font-size:11px;color:var(--gris2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb td.num{font-variant-numeric:tabular-nums;font-weight:700;}
.tb td.num.rojo{color:var(--rojo);}
.tb-sep{color:var(--gris2);font-weight:600;margin:0 5px;}
.tb-acept{font-weight:800;color:var(--verde);}

.tb-chip{border:0;cursor:pointer;gap:4px;font-family:inherit;max-width:100%;}
.tb-chip .ico{width:11px;height:11px;opacity:.65;}
.tb-chip:hover{filter:brightness(.96);}

/* Acciones: última columna, pegada al borde derecho, sin línea divisoria y
   con el botón centrado. */
.tb th.tb-acc-h,.tb td.tb-acc{text-align:center;padding-left:0;padding-right:0;}
.tb th.tb-acc-h{cursor:default;}
.tb th.tb-acc-h:hover{color:var(--gris2);}

.tb-tres{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:0;border-radius:8px;background:none;color:var(--gris);cursor:pointer;transition:background .15s;}
.tb-tres:hover{background:#eef1f5;color:var(--navy);}
.tb-tres .ico{width:16px;height:16px;}

/* ---------- Solo en pantallas realmente chicas ----------
   Recién cuando el área de contenido no alcanza para los anchos de arriba
   aparece el scroll horizontal, con Marca congelada a la izquierda y una
   sombra que indica que la tabla sigue. Un contenedor con overflow-x se
   vuelve scroller en los dos ejes, así que acá el encabezado deja de ser
   sticky contra la página: es el precio de congelar la columna. */
@media(max-width:1239px){
  .tb-wrap{overflow-x:auto;}
  .tb{min-width:918px;}
  .tb th{position:static;}
  .tb th:first-child,.tb td:first-child{position:sticky;left:0;z-index:1;
    background:var(--bg);box-shadow:7px 0 9px -7px rgba(28,43,72,.28);}
  .tb tbody tr:hover td:first-child{background:#fff;}
}

/* ---------- Mini calendario custom ---------- */
.dd-menu.cal{padding:14px;width:268px;max-height:none;}
.cal-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  font-size:13px;font-weight:800;text-transform:capitalize;}
.cal-nav{width:26px;height:26px;border:0;border-radius:7px;background:#f2f5f8;color:var(--navy);
  font-size:16px;line-height:1;cursor:pointer;font-family:inherit;}
.cal-nav:hover{background:var(--celeste-soft);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-h{text-align:center;font-size:9.5px;font-weight:800;color:var(--gris2);padding-bottom:5px;}
.cal-v{height:30px;}
.cal-d{height:30px;border:0;border-radius:7px;background:none;font-family:inherit;font-size:12px;
  font-weight:600;color:var(--txt);cursor:pointer;}
.cal-d:hover{background:var(--celeste-soft);}
.cal-d.rango{background:var(--celeste-soft);border-radius:0;}
.cal-d.punta{background:var(--navy);color:#fff;font-weight:800;}
.cal-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--gris);font-weight:700;}
.cal-limpiar{border:0;background:none;color:var(--navy);font-family:inherit;font-size:11.5px;
  font-weight:800;cursor:pointer;text-decoration:underline;}

/* ---------- Overview ---------- */
/* El calendario del Overview ya no vive suelto en la pantalla: está dentro del
   popover del control de período, con el mismo `.dd-menu.cal` de la tabla. */
.ov-item{display:flex;align-items:flex-start;gap:11px;padding:11px 0;font-size:13px;}
.ov-item + .ov-item{border-top:1px solid var(--line);}
.ov-item .punto{width:7px;height:7px;border-radius:50%;background:var(--celeste);margin-top:6px;flex:none;}
.ov-item.aceptada .punto{background:var(--verde);}
.ov-item .cuando{font-size:11px;color:var(--gris2);font-weight:600;margin-top:2px;}