/* Tylsefa - hoja de estilos del sistema
   Colores tomados del membrete de la empresa. Todo se define aquí una sola vez. */
@font-face { font-family: "Outfit"; src: url("../vendor/outfit/Outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ty-marca: #1194cb;
  --ty-marca-clara: #5ccdf6;
  --ty-marca-honda: #0a4f86;
  --ty-gris-marca: #5c6a70;
  --ty-noche: #05090d;
  --ty-noche-2: #0a121a;
  --ty-texto: #f2f7fa;
  --ty-texto-suave: #b4c3cc;
  --ty-vidrio: rgba(9, 18, 27, 0.46);
  --ty-vidrio-borde: rgba(255, 255, 255, 0.16);
  --ty-campo: rgba(255, 255, 255, 0.07);
  --ty-campo-borde: rgba(255, 255, 255, 0.2);
  --ty-error: #ffb0a6;
  --ty-error-fondo: rgba(214, 62, 48, 0.18);
  --ty-radio: 14px;
  --ty-radio-tarjeta: 24px;
  --ty-suave: cubic-bezier(0.23, 1, 0.32, 1);

  --bs-font-sans-serif: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --bs-body-font-size: 1rem;
}
[data-bs-theme="dark"] {
  --bs-body-bg: var(--ty-noche);
  --bs-body-color: var(--ty-texto);
  --bs-secondary-color: var(--ty-texto-suave);
  --bs-border-color: var(--ty-campo-borde);
  --bs-border-radius: var(--ty-radio);
  --bs-link-color: var(--ty-marca-clara);
  --bs-link-color-rgb: 92, 205, 246;
  --bs-form-invalid-color: var(--ty-error);
  --bs-form-invalid-border-color: var(--ty-error);
}
body { line-height: 1.5; letter-spacing: 0.005em; }
h1, h2, h3 { line-height: 1.08; text-wrap: balance; letter-spacing: -0.02em; }

/* Botones */
.btn { --bs-btn-border-radius: var(--ty-radio); --bs-btn-font-weight: 600; min-height: 48px;
  transition: transform 140ms var(--ty-suave), background-color 160ms var(--ty-suave), box-shadow 160ms var(--ty-suave); }
.btn:active { transform: scale(0.97); }
.btn-claro {
  --bs-btn-color: var(--ty-noche); --bs-btn-bg: var(--ty-texto); --bs-btn-border-color: var(--ty-texto);
  --bs-btn-hover-color: var(--ty-noche); --bs-btn-hover-bg: #ffffff; --bs-btn-hover-border-color: #ffffff;
  --bs-btn-active-color: var(--ty-noche); --bs-btn-active-bg: #d9e6ec; --bs-btn-active-border-color: #d9e6ec;
  --bs-btn-disabled-color: var(--ty-noche); --bs-btn-disabled-bg: #c9d6dc; --bs-btn-disabled-border-color: #c9d6dc;
}
@media (hover: hover) and (pointer: fine) {
  .btn-claro:hover { box-shadow: 0 10px 28px -10px rgba(92, 205, 246, 0.7); }
  .btn-claro:hover .bi-arrow-right { transform: translateX(3px); }
}
.btn-claro .bi-arrow-right { display: inline-block; transition: transform 160ms var(--ty-suave); }
.btn-vidrio { --bs-btn-color: var(--ty-texto-suave); --bs-btn-bg: transparent; --bs-btn-border-color: var(--ty-campo-borde);
  --bs-btn-hover-color: var(--ty-texto); --bs-btn-hover-bg: rgba(255,255,255,0.1); --bs-btn-hover-border-color: var(--ty-campo-borde);
  --bs-btn-active-color: var(--ty-texto); --bs-btn-active-bg: rgba(255,255,255,0.16); --bs-btn-active-border-color: var(--ty-campo-borde); }

/* Formularios */
.form-label { font-weight: 500; font-size: 0.9375rem; margin-bottom: 0.4rem; color: var(--ty-texto); }
.form-control { min-height: 48px; background-color: var(--ty-campo); border-color: var(--ty-campo-borde); color: var(--ty-texto);
  transition: border-color 160ms var(--ty-suave), box-shadow 160ms var(--ty-suave), background-color 160ms var(--ty-suave); }
.form-control:focus { background-color: rgba(255, 255, 255, 0.11); border-color: var(--ty-marca-clara); color: var(--ty-texto); box-shadow: 0 0 0 3px rgba(92, 205, 246, 0.3); }
.form-text { color: var(--ty-texto-suave); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--ty-marca-clara); outline-offset: 2px; box-shadow: none; }
.aviso-error { background: var(--ty-error-fondo); color: var(--ty-error); border: 1px solid rgba(255, 150, 138, 0.5); border-radius: var(--ty-radio); padding: 0.75rem 1rem; }

/* Fondo con la cruz ansada del logo */
.escena { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 78% 8%, #0d2a44 0%, transparent 55%), linear-gradient(160deg, var(--ty-noche-2), var(--ty-noche) 70%); }
.escena .luz { position: absolute; z-index: -2; border-radius: 50%; filter: blur(70px); opacity: 0.85; }
.escena .luz-1 { width: 46vw; height: 46vw; left: 44%; top: -14%; background: radial-gradient(circle, var(--ty-marca) 0%, transparent 68%); animation: deriva 22s ease-in-out infinite alternate; }
.escena .luz-2 { width: 34vw; height: 34vw; left: 52%; top: 46%; background: radial-gradient(circle, var(--ty-marca-honda) 0%, transparent 70%); animation: deriva 28s ease-in-out infinite alternate-reverse; }
.escena .luz-3 { width: 22vw; height: 22vw; left: 30%; top: 58%; background: radial-gradient(circle, rgba(92, 205, 246, 0.75) 0%, transparent 70%); opacity: 0.5; animation: deriva 19s ease-in-out infinite alternate; }
.escena .ansada { position: absolute; z-index: -1; height: 128vh; width: auto; left: 66%; top: 54%; transform: translate(-50%, -50%) rotate(10deg); filter: drop-shadow(0 30px 60px rgba(4, 30, 52, 0.7)); }
@keyframes deriva { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 5%, 0) scale(1.08); } }

/* Inicio de sesión */
.acceso { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: center; gap: 3rem; padding: 3rem clamp(1.5rem, 6vw, 6rem); max-width: 88rem; margin: 0 auto; }
.acceso-marca .logo { width: 11.5rem; height: auto; filter: brightness(0) invert(1); margin-bottom: 3.5rem; }
.acceso-marca h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); font-weight: 600; max-width: 13ch; }
.acceso-marca p { color: var(--ty-texto-suave); max-width: 34ch; font-size: 1.125rem; margin: 1.25rem 0 0; }
.tarjeta-vidrio { background: var(--ty-vidrio); border: 1px solid var(--ty-vidrio-borde); border-radius: var(--ty-radio-tarjeta); padding: 2.25rem;
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 40px 80px -30px rgba(0, 0, 0, 0.8); }
.tarjeta-vidrio h2 { font-size: 1.875rem; font-weight: 600; }
.tarjeta-vidrio .pie { border-top: 1px solid var(--ty-vidrio-borde); margin-top: 1.75rem; padding-top: 1rem; font-size: 0.875rem; color: var(--ty-texto-suave); }
.input-group > .form-control { border-right: 0; }
.input-group > .btn { border-left: 0; }
.input-group:focus-within > .btn { border-color: var(--ty-marca-clara); }

/* Terminal de autoservicio */
.terminal { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); align-items: center; gap: 2.5rem; padding: 2rem clamp(1.5rem, 5vw, 4.5rem); max-width: 80rem; margin: 0 auto; }
.terminal-marca .logo { width: 10rem; height: auto; filter: brightness(0) invert(1); margin-bottom: 2.5rem; }
.terminal-marca h1 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); font-weight: 600; max-width: 12ch; }
.terminal-marca p { color: var(--ty-texto-suave); font-size: 1.25rem; max-width: 26ch; margin: 1rem 0 0; }
.pasos { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 2.5rem 0 0; }
.pasos li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem 0.4rem 0.45rem; border-radius: 999px; border: 1px solid var(--ty-vidrio-borde); color: var(--ty-texto-suave); font-size: 0.9375rem; }
.pasos .n { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); font-weight: 600; font-size: 0.875rem; }
.pasos .actual { color: var(--ty-noche); background: var(--ty-texto); border-color: var(--ty-texto); font-weight: 600; }
.pasos .actual .n { background: var(--ty-marca); color: #fff; }
.tarjeta-vidrio.compacta { padding: 1.5rem; }
.visor-etiqueta { font-weight: 500; margin-bottom: 0.5rem; display: block; }
.visor { min-height: 4.25rem; display: flex; align-items: center; justify-content: center; border-radius: var(--ty-radio); background: var(--ty-campo); border: 1px solid var(--ty-campo-borde);
  font-size: 2.125rem; font-weight: 600; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; transition: border-color 160ms var(--ty-suave); }
.visor.vacio { color: var(--ty-texto-suave); font-weight: 400; font-size: 1.125rem; letter-spacing: 0.01em; }
.visor.con-error { border-color: var(--ty-error); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin: 1rem 0; }
.tecla { min-height: 4.25rem; border-radius: 16px; border: 1px solid var(--ty-campo-borde); background: var(--ty-campo); color: var(--ty-texto); font-size: 1.625rem; font-weight: 500; font-family: inherit;
  transition: transform 120ms var(--ty-suave), background-color 140ms var(--ty-suave); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tecla:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.18); }
.tecla:focus-visible { outline: 3px solid var(--ty-marca-clara); outline-offset: 2px; }
.tecla.secundaria { font-size: 1rem; color: var(--ty-texto-suave); }
.btn-grande { min-height: 4rem; font-size: 1.1875rem; --bs-btn-border-radius: 16px; }
.mensaje-terminal { min-height: 3rem; margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--ty-texto-suave); }
.mensaje-terminal.es-error { color: var(--ty-error); }

@media (max-width: 991.98px) {
  .acceso { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.25rem; align-content: start; }
  .acceso-marca .logo { width: 9rem; margin-bottom: 1.75rem; }
  .acceso-marca p { font-size: 1rem; }
  .tarjeta-vidrio { padding: 1.5rem; max-width: 30rem; width: 100%; justify-self: center; }
  .escena .ansada { height: 90vh; left: 82%; top: 46%; opacity: 0.4; }
  .escena .luz { filter: blur(50px); }
  .terminal { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1.25rem; align-content: start; }
  .terminal-marca .logo { width: 8rem; margin-bottom: 1.5rem; }
  .terminal-marca p { font-size: 1.0625rem; max-width: none; }
  .pasos { margin-top: 1.25rem; flex-wrap: wrap; }
  .terminal .tarjeta-vidrio { max-width: 26rem; width: 100%; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .form-control, .btn-claro .bi-arrow-right { transition: none; }
  .btn:active, .tecla:active { transform: none; }
  .tecla, .visor { transition: none; }
  .escena .luz { animation: none; }
}

/* ===== Pantallas de trabajo: paneles sólidos sobre fondo oscuro ===== */
:root { --ty-panel: #0b141d; --ty-panel-2: #101b26; --ty-linea: rgba(255, 255, 255, 0.09);
  --ty-bien: #58c794; --ty-aviso: #f0b44c; --ty-mal: #ff8f85; }
.app { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100dvh;
  background: radial-gradient(80% 55% at 88% -12%, #0c2a45 0%, transparent 62%), var(--ty-noche); }
.lateral { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 1.75rem; padding: 1.5rem 1rem; background: rgba(6, 11, 16, 0.82); border-right: 1px solid var(--ty-linea); }
.lateral .logo { width: 8.5rem; height: auto; filter: brightness(0) invert(1); margin: 0.25rem 0.5rem 0; }
.nav-app { display: flex; flex-direction: column; gap: 0.25rem; }
.nav-app a { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.5rem 0.75rem; border-radius: 12px; color: var(--ty-texto-suave); text-decoration: none; font-weight: 500; transition: background-color 140ms var(--ty-suave), color 140ms var(--ty-suave); }
.nav-app a .bi { font-size: 1.125rem; }
.nav-app a.activo { background: rgba(17, 148, 203, 0.2); color: var(--ty-texto); }
@media (hover: hover) and (pointer: fine) { .nav-app a:not(.activo):hover { background: rgba(255, 255, 255, 0.06); color: var(--ty-texto); } }
.nav-app .cuenta { margin-left: auto; min-width: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: var(--ty-marca); color: #fff; font-size: 0.8125rem; font-weight: 600; text-align: center; }
.usuario { margin-top: auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 14px; background: var(--ty-panel-2); border: 1px solid var(--ty-linea); }
.usuario .inicial { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--ty-marca-honda); font-weight: 600; flex: none; }
.usuario .nombre { font-weight: 600; line-height: 1.2; }
.usuario .rol { color: var(--ty-texto-suave); font-size: 0.8125rem; }
.principal { min-width: 0; padding: 1.75rem clamp(1rem, 2.5vw, 2.25rem) 2.5rem; }
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.cabecera h1 { font-size: 1.875rem; font-weight: 600; margin: 0; }
.cabecera p { color: var(--ty-texto-suave); margin: 0.35rem 0 0; }
.muestra { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px dashed var(--ty-campo-borde); color: var(--ty-texto-suave); font-size: 0.8125rem; }
.panel { background: var(--ty-panel); border: 1px solid var(--ty-linea); border-radius: 18px; padding: 1.25rem; }
.panel > h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; letter-spacing: -0.01em; }
.panel .nota { color: var(--ty-texto-suave); font-size: 0.875rem; }
.rejilla { display: grid; gap: 1.25rem; }
.rejilla.dos { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); align-items: start; }
.rejilla.maestro { grid-template-columns: minmax(0, 1fr) minmax(0, 21.5rem); align-items: start; }
.rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla.mitades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btn-marca { --bs-btn-color: #fff; --bs-btn-bg: var(--ty-marca-honda); --bs-btn-border-color: var(--ty-marca);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0c5f9f; --bs-btn-hover-border-color: var(--ty-marca-clara);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #083f6c; --bs-btn-active-border-color: var(--ty-marca); }
.btn-chico { min-height: 40px; padding: 0.35rem 0.85rem; font-size: 0.9375rem; }
.form-select { min-height: 48px; background-color: var(--ty-campo); border-color: var(--ty-campo-borde); color: var(--ty-texto); border-radius: var(--ty-radio); }
.form-select:focus { border-color: var(--ty-marca-clara); box-shadow: 0 0 0 3px rgba(92, 205, 246, 0.3); }
.form-control[readonly] { background-color: transparent; color: var(--ty-texto-suave); }
.ayuda-ok { color: var(--ty-bien); font-size: 0.875rem; margin-top: 0.35rem; }
.dato { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--ty-linea); }
.dato span:first-child { color: var(--ty-texto-suave); }

/* Tablas */
.tabla { --bs-table-bg: transparent; --bs-table-color: var(--ty-texto); --bs-table-border-color: var(--ty-linea); margin: 0; }
.tabla th { color: var(--ty-texto-suave); font-weight: 500; font-size: 0.8125rem; white-space: nowrap; border-bottom-width: 1px; }
.tabla { font-size: 0.9375rem; }
.tabla td { vertical-align: middle; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.tabla .fijo { white-space: nowrap; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .codigo { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tabla .secundario { color: var(--ty-texto-suave); font-size: 0.875rem; }
.tabla tr.elegida td { background: rgba(17, 148, 203, 0.12); }
.tabla-envoltura { overflow-x: auto; }

/* Estados: siempre con icono y texto, nunca solo color */
.pildora { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; border: 1px solid var(--ty-linea); color: var(--ty-texto); }
.pildora.bien .bi { color: var(--ty-bien); } .pildora.bien { border-color: rgba(88, 199, 148, 0.4); }
.pildora.aviso .bi { color: var(--ty-aviso); } .pildora.aviso { border-color: rgba(240, 180, 76, 0.45); }
.pildora.mal .bi { color: var(--ty-mal); } .pildora.mal { border-color: rgba(255, 143, 133, 0.5); }
.pildora.info .bi { color: var(--ty-marca-clara); } .pildora.info { border-color: rgba(92, 205, 246, 0.4); }
.fichas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.ficha { min-height: 40px; padding: 0.3rem 0.9rem; border-radius: 999px; border: 1px solid var(--ty-linea); background: transparent; color: var(--ty-texto-suave); font: inherit; font-weight: 500; }
.ficha.activa { background: var(--ty-texto); color: var(--ty-noche); border-color: var(--ty-texto); }
.ficha .n { opacity: 0.7; margin-left: 0.3rem; }

/* Línea de tiempo del caso */
.cronologia { list-style: none; margin: 0; padding: 0; }
.cronologia li { position: relative; padding: 0 0 1rem 1.5rem; }
.cronologia li::before { content: ""; position: absolute; left: 0.3rem; top: 0.45rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ty-marca); }
.cronologia li::after { content: ""; position: absolute; left: 0.54rem; top: 1.1rem; bottom: 0; width: 1px; background: var(--ty-linea); }
.cronologia li:last-child::after { display: none; }
.cronologia .cuando { color: var(--ty-texto-suave); font-size: 0.8125rem; }

/* Indicadores y gráficas */
.indicador .etiqueta { color: var(--ty-texto-suave); font-size: 0.9375rem; }
.indicador .valor { font-size: 2.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0.35rem 0 0.25rem; }
.indicador .valor small { font-size: 1rem; font-weight: 400; color: var(--ty-texto-suave); letter-spacing: 0; }
.indicador .detalle { color: var(--ty-texto-suave); font-size: 0.875rem; }
.barras { display: grid; gap: 0.7rem; }
.barra { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 3.25rem; align-items: center; gap: 0.75rem; position: relative; }
.barra .nombre { font-size: 0.9375rem; }
.barra .pista { height: 12px; }
.barra .relleno { display: block; height: 100%; min-width: 4px; background: var(--ty-marca); border-radius: 0 4px 4px 0; }
.barra .cifra { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.columnas { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 2px; height: 11rem; border-bottom: 1px solid var(--ty-linea); padding: 0 0.5rem; }
.columna { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.columna .cifra { font-size: 0.875rem; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; color: var(--ty-texto-suave); }
.columna .relleno { width: min(3.25rem, 70%); background: var(--ty-marca); border-radius: 4px 4px 0 0; min-height: 4px; }
.columnas-eje { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 0.4rem 0.5rem 0; color: var(--ty-texto-suave); font-size: 0.8125rem; text-align: center; }
[data-pista] { cursor: default; }
[data-pista]::after { content: attr(data-pista); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 0.3rem 0.6rem; border-radius: 8px; background: #1c2a37; border: 1px solid var(--ty-campo-borde); color: var(--ty-texto); font-size: 0.8125rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms var(--ty-suave); z-index: 5; }
[data-pista]:hover::after, [data-pista]:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .barra:hover .relleno, .columna:hover .relleno { background: var(--ty-marca-clara); } }

@media (max-width: 1199.98px) {
  .rejilla.dos, .rejilla.maestro { grid-template-columns: minmax(0, 1fr); }
  .rejilla.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-right: 0; border-bottom: 1px solid var(--ty-linea); overflow-x: auto; }
  .lateral .logo { width: 6.5rem; margin: 0; flex: none; }
  .nav-app { flex-direction: row; }
  .nav-app a { white-space: nowrap; }
  .usuario { display: none; }
  .rejilla.mitades { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) { .rejilla.cuatro { grid-template-columns: minmax(0, 1fr); } .cabecera > div { min-width: 0; max-width: 100%; } .barra { grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr) 3rem; } }
.app > *, .rejilla > *, .panel { min-width: 0; }
@media (max-width: 991.98px) { .lateral { max-width: 100vw; } .cabecera .form-select { flex: 1 1 10rem; } }
.tabla-envoltura { position: relative; }
@media (max-width: 575.98px) { [data-pista]::after { display: none; } }
.tabla .corta { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }