/* ----------------------------------------------------
   ESTILO GLOBAL
---------------------------------------------------- */
* { box-sizing: border-box; }

body{
  background-color:#0d0d0d;
  color:#e6e6e6;
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
}

.wrapper{
  max-width:1600px;
  margin:100px auto 40px auto;
  padding:0 25px;
}

/* Inputs y botones */
input, button{
  background-color:#1c1c1c;
  color:#e6e6e6;
  border:1px solid #333;
  padding:10px;
  border-radius:6px;
  font-size:14px;
}

button{
  cursor:pointer;
  font-weight:bold;
  letter-spacing:.5px;
}
button:hover{ background-color:#2a2a2a; }

/* Resultados tipo consola */
pre{
  background:#111;
  padding:12px;
  border-radius:6px;
  color:#00ff6a;
  font-size:14px;
  overflow-x:auto;
}

/* ----------------------------------------------------
   BARRA SUPERIOR BONITA
---------------------------------------------------- */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:60px;
  background:linear-gradient(90deg,#000000,#0f0f0f 50%,#000000);
  border-bottom:1px solid #222;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  box-shadow:0px 2px 8px rgba(0,0,0,.6);
}

.topbar-inner{
  width:100%;
  max-width:1200px;
  display:flex;
  align-items:center;
  padding:0 25px;
}

/* Logo/Título */
.topbar-logo{
  font-size:15px;
  font-weight:700;
  color:#cccccc;
  margin-right:40px;
  white-space:nowrap;
}

/* Contenedor de pestañas */
.tab-list{
  display:flex;
  gap:10px;
  flex:1;
}

/* Botones de pestaña */
.tab{
  flex:1;
  text-align:center;
  padding:12px 0;
  text-transform:uppercase;
  font-weight:bold;
  letter-spacing:.7px;
  background:#1a1a1a;
  color:#bbbbbb;
  border-radius:6px;
  border:1px solid #333;
  text-decoration:none;
  transition:.15s;
  user-select:none;
}
.tab:hover{
  background:#262626;
  color:#ffffff;
}
.tab.active{
  background:#00aaff;
  color:#000000;
  border-color:#00aaff;
  box-shadow:0px 0px 8px rgba(0,170,255,.4);
}

/* Cerrar sesión */
.tab-logout{
  background:#7a0000;
  border-color:#aa0000;
}
.tab-logout:hover{
  background:#b00000;
  color:#ffffff;
}

.help-text{
  font-size:12px;
  color:#999;
  opacity:.8;
}

/* ----------------------------------------------------
   LOGIN CENTERED (CORREGIDO)
---------------------------------------------------- */
.login-container{
  max-width:380px;
  margin:120px auto;
  padding:30px;
  background:#111;
  border-radius:10px;
  box-shadow:0px 0px 15px rgba(0,0,0,.5);
  text-align:center;
}

.login-container h2{
  font-size:26px;
  margin-bottom:25px;
  color:#ffffff;
}

.login-container input,
.login-container button{
  width:100%;
  font-size:16px;
  padding:12px;
  margin-bottom:15px;
  border-radius:6px;
  background:#1c1c1c;
  color:#fff;
  border:1px solid #333;
}

.login-container button{
  background:#00aaff;
  color:#000;
  font-weight:bold;
  letter-spacing:.5px;
  cursor:pointer;
  border:none;
}
.login-container button:hover{ background:#0090dd; }

.login-error{
  color:#ff5c5c;
  margin-bottom:15px;
  font-weight:bold;
}

/* ----------------------------------------------------
   CARDS / ACCORDIONS
---------------------------------------------------- */
.card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:18px;
  background:rgba(255,255,255,.03);
}
.card-head{ margin-bottom:14px; }

.accordion{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:10px;
  background:rgba(0,0,0,.10);
}
.accordion > summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
}
.accordion > summary::-webkit-details-marker{ display:none; }
.acc-content{ padding-top:10px; }

.subcard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.02);
}

.notice{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
}
.notice-error{
  border-color:rgba(255,92,92,.6);
  background:rgba(255,92,92,.10);
}

/* ----------------------------------------------------
   RESULTADOS / TABLA
---------------------------------------------------- */
.results-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.02);
}
.results-title{
  font-weight:800;
  margin-bottom:10px;
}

.table-wrap{
  overflow-x:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}

/* Tabla: layout fijo */
.results-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  min-width:0;
  font-size:13px;
}

.results-table thead th{
  text-align:left;
  font-size:12.5px;
  letter-spacing:.02em;
  opacity:.9;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.results-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:middle;
}

.results-table tbody tr:hover{
  background:rgba(255,255,255,.03);
}

/* Por defecto: evita que reviente */
.results-table th,
.results-table td{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Columnas “pequeñas” fijas */
.results-table thead th:nth-child(1),
.results-table tbody td:nth-child(1){ width:55px; }   /* ID */

.results-table thead th:nth-child(4),
.results-table tbody td:nth-child(4){ width:120px; }  /* Fecha */

.results-table thead th:nth-child(5),
.results-table tbody td:nth-child(5){ width:120px; }  /* Tipo */

.results-table thead th:nth-child(6),
.results-table tbody td:nth-child(6){ width:90px; }   /* Trastero */

.results-table thead th:nth-child(9),
.results-table tbody td:nth-child(9){ width:110px; }  /* Estado */

/* Acciones: SIEMPRE visible */
.results-table thead th:nth-child(11),
.results-table tbody td:nth-child(11){
  width:190px;
  white-space:nowrap;
  text-align:right;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* ===== LA CLAVE: Nombre (col 2) más pequeña DE VERDAD (TH+TD) ===== */
.results-table thead th:nth-child(2),
.results-table tbody td:nth-child(2){
  width:120px !important;
  max-width:120px !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.2 !important;
}

/* Email (col 3) controlada */
.results-table thead th:nth-child(3),
.results-table tbody td:nth-child(3){
  width:200px !important;
  max-width:200px !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.2 !important;
}

/* Documento (col 7): romper bien */
.results-table thead th:nth-child(7),
.results-table tbody td:nth-child(7){
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Stripe estrecha + romper */
.results-table th.tl-col-stripe,
.results-table td.tl-col-stripe{
  width:90px;
  max-width:90px;
  white-space:normal;
  word-break:break-all;
  line-height:1.15;
}

/* Ref. Factura estrecha + romper */
.results-table th.tl-col-ref,
.results-table td.tl-col-ref{
  width:110px;
  max-width:110px;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.15;
}

/* Pills */
.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-weight:700;
  font-size:12px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.muted{ opacity:.7; font-size:12px; }

/* Botones */
.btn-mini{
  display:inline-block;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  line-height:1;
  color:#ffffff;
}
.btn-mini:hover{ background:rgba(255,255,255,.10); }

/* Botón VER (azul) */
.btn-mini[href]{
  background:rgba(40,120,255,.25);
  border-color:rgba(40,120,255,.8);
  color:#ffffff;
}
.btn-mini[href]:hover{
  background:rgba(40,120,255,.45);
  border-color:rgba(40,120,255,1);
}

/* Botón rectificar (warning) */
.btn-warn{
  border-color:rgba(255,180,70,.6);
  background:rgba(255,180,70,.15);
}
.btn-warn:hover{ background:rgba(255,180,70,.25); }

/* Filas con estado */
.results-table tbody tr.row-rectificada td{
  background:rgba(255, 60, 60, .18);
}
.results-table tbody tr.row-incorrecto td{
  background:rgba(255, 60, 60, 1);
  color:#fff;
}

/* Quitar borde de las pills SOLO en filas rectificadas */
.results-table tbody tr.row-rectificada .pill{
  border:none !important;
}

/* Tipografía roja intensa para facturas cuyo tipo es "Factura RECTIFICADA" */
.results-table tr.row-tipo-rectificada td,
.results-table tr.row-tipo-rectificada td *{
  color:#ff2a2a !important;
}

/* Pero NO tocar botones/enlaces dentro de la fila */
.results-table tr.row-tipo-rectificada .btn-mini,
.results-table tr.row-tipo-rectificada .btn-mini *,
.results-table tr.row-tipo-rectificada a.btn-mini,
.results-table tr.row-tipo-rectificada a.btn-mini *{
  color:inherit !important;
}

/* Botón desactivado */
.btn-mini.is-disabled,
.btn-mini:disabled{
  opacity:.35;
  cursor:not-allowed;
  filter:grayscale(100%);
  pointer-events:none;
}

/* ----------------------------------------------------
   MODAL
---------------------------------------------------- */
.tl-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.tl-modal.is-open{ display:block; }
.tl-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.tl-modal__panel{
  position:relative;
  z-index:1;
  max-width:520px;
  margin:10vh auto 0;
  background:#111;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.tl-modal__title{ font-weight:800; font-size:16px; margin-bottom:10px; }
.tl-modal__text{ opacity:.9; line-height:1.4; margin-bottom:14px; }
.tl-modal__actions{ display:flex; gap:10px; justify-content:flex-end; }

/* ----------------------------------------------------
   LOADER OVERLAY (Facturas)
---------------------------------------------------- */
.tl-loader{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.50);
  z-index:999999;
}
.tl-loader.is-open{ display:flex; }

.tl-loader__spinner{
  width:56px;
  height:56px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.85);
  animation:tlSpin .9s linear infinite;
}
@keyframes tlSpin{ to { transform: rotate(360deg); } }

/* ----------------------------------------------------
   SIDEBAR FIJA A LA IZQUIERDA
---------------------------------------------------- */
.sidebar{
  position:fixed !important;
  top:60px !important;              /* debajo de la topbar */
  left:0 !important;
  width:240px !important;
  height:calc(100vh - 60px) !important;
  overflow:auto !important;

  background:#0f0f0f;
  border-right:1px solid #242424;
  border-top:1px solid #242424;
  border-radius:0 !important;
  padding:14px !important;
  z-index:9998;
}

/* ----------------------------------------------------
   FIX DEFINITIVO: el contenido ARRANCA a la derecha de la sidebar
   (ESTO es lo que faltaba)
---------------------------------------------------- */
.panel-layout{
  max-width:none !important;
  display:block !important;

  /* desplaza TODO el panel a la derecha */
  margin-left:240px !important;

  /* padding bonito del panel (como tu wrapper) */
  padding:0 25px !important;
  margin-top:0 !important;
}

/* el contenido principal */
.content{
  margin:0 !important;
  padding:0 !important;
}

/* tu wrapper dentro del panel: ya NO centrado con auto (para que empiece pegado al menú) */
.panel-layout .wrapper{
  max-width:1600px;
  margin:100px 0 40px 0;  /* <-- importante: quitamos el auto SOLO aquí */
  padding:0;              /* el padding ya lo da .panel-layout */
}

/* ----------------------------------------------------
   ESTILO DEL MENÚ LATERAL (side-link, grupos, etc.)
---------------------------------------------------- */
.side-group{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #1f1f1f;
}

.side-group-title{
  font-size:12px;
  opacity:.7;
  letter-spacing:.8px;
  text-transform:uppercase;
  margin-bottom:8px;
}

.side-link{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  color:#e6e6e6;
  text-decoration:none;
  border:1px solid transparent;
  font-weight:700;
}

.side-link:hover{
  background:#161616;
  border-color:#2a2a2a;
}

.side-link.active{
  background:#1b1b1b;
  border-color:#3a3a3a;
  box-shadow:0 0 10px rgba(0,0,0,.25) inset;
}


/* ----------------------------------------------------
   INICIO / DASHBOARD (cards + botones)
---------------------------------------------------- */

.tl-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(260px, 1fr));
  gap:16px;
}

.tl-card{
  background:#0f0f0f;
  border:1px solid #242424;
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

.tl-card-title{
  font-size:16px;
  font-weight:800;
  margin-bottom:6px;
}

.tl-card-desc{
  font-size:13px;
  opacity:.8;
  margin-bottom:14px;
  line-height:1.4;
}

.tl-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Botones grandes del inicio */
.tl-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:#1c1c1c;
  color:#e6e6e6;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  transition:.15s;
}

.tl-btn:hover{
  background:#2a2a2a;
}

/* Variante ghost */
.tl-btn-ghost{
  background:transparent;
  border-color:#2a2a2a;
}

.tl-btn-ghost:hover{
  background:#141414;
}



.tl-btn-primary{
  background:rgba(40,120,255,.35);
  border-color:rgba(40,120,255,.9);
  color:#fff;
}

.tl-btn-primary:hover{
  background:rgba(40,120,255,.55);
}




/* ----------------------------------------------------
   NEW TABLE -> MISMO LOOK QUE results-table (tema oscuro)
   + control de anchos por columna (SIN @media)
---------------------------------------------------- */

.new-table-card{
  margin-top:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.02);
}

/* wrap (scroll horizontal si hace falta) */
.new-table-card .new-table-wrap{
  overflow-x:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}

/* Tabla */
.new-results-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;  /* CLAVE: respeta widths */
  min-width:0;
  font-family: Arial, Helvetica, sans-serif;
  font-size:13px;
  background:transparent;
}

/* Cabecera */
.new-results-table thead th{
  text-align:left;
  font-size:12.5px;
  letter-spacing:.02em;
  opacity:.9;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.08);
  border-left:none;
  border-right:none;
  white-space:nowrap; /* la cabecera no hace saltos raros */
}

/* Celdas */
.new-results-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:middle;
  border-left:none;
  border-right:none;
}

/* Hover */
.new-results-table tbody tr:hover{
  background:rgba(255,255,255,.03);
}

/* Evita que reviente el layout */
.new-results-table th,
.new-results-table td{
  overflow:hidden;
  text-overflow:ellipsis;
  color:#e6e6e6;
}

/* Links */
.new-results-table td a{
  color:#69b7ff;
  text-decoration:none;
  font-weight:800;
}
.new-results-table td a:hover{
  text-decoration:underline;
}

/* Zebra suave */
.new-results-table tbody tr:nth-child(even){
  background:rgba(255,255,255,.015);
}
.new-results-table tbody tr:nth-child(even):hover{
  background:rgba(255,255,255,.03);
}

/* ----------------------------------------------------
   ANCHOS POR COLUMNA (solo esta tabla)
   -> usa clases en TH y TD: tl-col-id, tl-col-fecha, etc.
---------------------------------------------------- */

/* ID: estrecha */
.new-results-table .tl-col-id{
  width:64px;
  max-width:64px;
  white-space:nowrap;
  opacity:.9;
}

/* Fecha: compacta */
.new-results-table .tl-col-fecha{
  width:118px;
  max-width:118px;
  white-space:nowrap;
}


/* Trastero: compacta */
.new-results-table .tl-col-trastero{
  width:110px;
  max-width:110px;
  white-space:nowrap;
}


/* Números: compactos */
.new-results-table .tl-col-num{
  width:92px;
  max-width:92px;
  white-space:nowrap;
}

/* Acción: botón "Ver" */
.new-results-table .tl-col-accion{
  width:74px;
  max-width:74px;
  text-align:center;
  white-space:nowrap;
}

/* Nombre: que respire */
.new-results-table .tl-col-nombre{
  width:200px;       /* base */
  max-width:260px;   /* tope */
  font-weight:600;
}

/* Email: más ancho + permite partir */
.new-results-table .tl-col-email{
  width:260px;
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Email con wbr: permite salto elegante */
.new-results-table .tl-col-email wbr{
  display:inline;
}





/* clientes.php - layout de cabecera resultados */
.tl-cli-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}


/* ===========================
   TRASTEROS (CLIENTES) - CARDS
   =========================== */

.tl-cli-sedes{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* sede */
.tl-cli-sede{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px 16px;
}

/* grid trasteros */
.tl-cli-trasteros{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

/* card trastero normal */
.tl-cli-trastero{
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  color:#e6e6e6;
}

/* estados */
.tl-cli-trastero.is-impago{
  border-color: rgba(255,92,92,.60);
  background: rgba(255,92,92,.08);
}
.tl-cli-trastero.is-cancelacion{
  border-color: rgba(255,180,70,.60);
  background: rgba(255,180,70,.08);
}

/* título trastero */
.tl-cli-trastero-title{
  font-weight: 900;
  margin-bottom: 6px;
}

/* tags */
.tl-cli-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin: 6px 0 8px 0;
}

.tl-cli-tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#e6e6e6;
}

.tl-cli-tag.is-impago{
  border-color: rgba(255,92,92,.45);
  background: rgba(255,92,92,.10);
  color:#ff7b7b;
}

.tl-cli-tag.is-cancelacion{
  border-color: rgba(255,180,70,.45);
  background: rgba(255,180,70,.10);
  color:#ffd08a;
}




/* acciones */
.tl-cli-actions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}



/* =========================================================
   TRASTEROS (CLIENTES) - UI FIX (TÍTULO + BOTONES + DISABLED)
   PÉGALO AL FINAL DEL CSS
   ========================================================= */

/* --- Título sede más destacado --- */
.tl-cli-sede-title{
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .2px;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* subtítulo sede (dirección) un pelín más limpio */
.tl-cli-sede-sub{
  opacity: .78;
  margin-top: 2px;
}

/* --- BOTONES: aplica a <button> y a <a> con clase tl-cli-btn --- */
/* Esto neutraliza cualquier "all: unset" que tengas por ahí */
a.tl-cli-btn,
button.tl-cli-btn{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 13px;
  line-height: 1;

  text-decoration: none !important;
  cursor: pointer;

  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #ffffff;

  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease, transform .12s ease;
}

/* Variantes */
a.tl-cli-btn.tl-cli-btn-primary,
button.tl-cli-btn.tl-cli-btn-primary{
  background: rgba(40,120,255,.25);
  border-color: rgba(40,120,255,.80);
  color:#ffffff;
}

a.tl-cli-btn.tl-cli-btn-danger,
button.tl-cli-btn.tl-cli-btn-danger{
  background: rgba(255,92,92,.15);
  border-color: rgba(255,92,92,.60);
  color:#ffffff;
}

a.tl-cli-btn.tl-cli-btn-outline,
button.tl-cli-btn.tl-cli-btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,.18);
  color:#ffffff;
}

/* Hover solo si está activo */
.tl-cli-actions a.tl-cli-btn:hover,
.tl-cli-actions button.tl-cli-btn:hover{
  background: rgba(255,255,255,.10);
}

/* --- DISABLED visual + NO hover/click --- */
.tl-cli-btn-disabled,
.tl-cli-btn:disabled,
button.tl-cli-btn[disabled]{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(230,230,230,.45) !important;
  cursor: not-allowed !important;
  opacity: .6 !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Por si alguna regla vieja intenta meter hover */
.tl-cli-actions .tl-cli-btn-disabled:hover,
.tl-cli-actions .tl-cli-btn:disabled:hover{
  background: rgba(255,255,255,.04) !important;
}


/* --- KV en cards de trasteros: label normal, value en negrita --- */
.tl-cli-k{
  font-weight: 400;   /* normal */
  opacity: .8;        /* opcional: un pelín más suave */
}

.tl-cli-v{
  font-weight: 800;   /* negrita */
}