/* ============================
   Quiniela – Resultados (L&F)
   ============================ */

/* Paleta y tokens */
:root{
    --qa-bg:#0b0f19;           /* fondo general */
    --qa-card:#111827;         /* tarjetas */
    --qa-soft:#1f2937;         /* filas */
    --qa-border:#2b3443;       /* bordes suaves */
    --qa-text:#e5e7eb;         /* texto principal */
    --qa-dim:#9ca3af;          /* texto secundario */
  
    --qa-green:#22c55e;        /* % 1 */
    --qa-amber:#f59e0b;        /* % X */
    --qa-red:#ef4444;          /* % 2 */
  
    --qa-chip-fijo:#0b1220;
    --qa-chip-doble:#0c1a12;
    --qa-chip-triple:#1a1020;
  
    --qa-radius:14px;
  }
  
  /* Modo claro automático si el sistema lo usa */
  @media (prefers-color-scheme: light) {
    :root{
      --qa-bg:#f6f8fb;
      --qa-card:#ffffff;
      --qa-soft:#f3f4f6;
      --qa-border:#e5e7eb;
      --qa-text:#111827;
      --qa-dim:#6b7280;
  
      --qa-chip-fijo:#eef2ff;
      --qa-chip-doble:#ecfdf5;
      --qa-chip-triple:#f5f3ff;
    }
  }
  
  /* Contenedor general */
  .qa-wrap{
    background:var(--qa-bg);
    padding:20px;
    border-radius:16px;
    color:var(--qa-text);
  }
  
  /* Tarjetas y bloques */
  .qa-card{
    background:var(--qa-card);
    border:1px solid var(--qa-border);
    border-radius:var(--qa-radius);
    padding:16px;
    margin:12px 0;
  }
  
  /* Cabeceras */
  .qa-title{ margin:0 0 8px; font-size:20px; font-weight:700; }
  .qa-meta{ color:var(--qa-dim); font-size:12px; }
  
  /* ====== Panel de controles (select de triples/dobles) ====== */
  .qa-controls{
    display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  }
  
  .qa-controls label{
    display:flex; gap:8px; align-items:center;
    background:var(--qa-soft);
    padding:8px 10px; border-radius:10px;
    border:1px solid var(--qa-border);
  }
  
  .qa-controls select{
    appearance:none;
    background:transparent;
    color:var(--qa-text);
    border:1px solid var(--qa-border);
    border-radius:8px;
    padding:6px 10px;
    cursor:pointer;
  }
  .qa-controls select:focus{ outline:2px solid var(--qa-border); }
  
  /* ====== Tabla principal ====== */
  .qa-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;              /* filas “flotantes” */
  }
  .qa-table thead th{
    font-size:12px; color:var(--qa-dim);
    text-transform:uppercase; letter-spacing:.04em;
    padding:8px; text-align:left;
  }
  .qa-table tbody tr{
    background:var(--qa-soft);
    transition:transform .08s ease, box-shadow .08s ease;
  }
  .qa-table tbody tr:hover{
    transform:translateY(-1px);
    box-shadow:0 2px 10px rgba(0,0,0,.12);
  }
  .qa-table tbody td{
    padding:10px 8px;
    border-top:1px solid var(--qa-border);
    border-bottom:1px solid var(--qa-border);
    vertical-align:middle;
  }
  
  /* Primera columna: abreviatura + margen */
  .qa-rowhead{ display:flex; align-items:center; gap:10px; }
  .qa-abbr{
    font-weight:700;
    padding:6px 10px;
    border:1px solid var(--qa-border);
    border-radius:10px;
    background:var(--qa-card);
    white-space:nowrap;
  }
  
  /* Chips de tipo */
  .qa-chip{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    border:1px solid var(--qa-border);
    font-weight:600;
  }
  .qa-chip.fijo   { background:var(--qa-chip-fijo); }
  .qa-chip.doble  { background:var(--qa-chip-doble); color:#a7f3d0; border-color:#164e3b; }
  .qa-chip.triple { background:var(--qa-chip-triple); color:#f5d0fe; border-color:#4c1d95; }
  
  /* Barras de porcentaje */
  .qa-pbar{
    position:relative; height:10px; width:100%;
    background:linear-gradient(180deg,#0d1524, #0b1220);
    border:1px solid var(--qa-border);
    border-radius:8px; overflow:hidden;
  }
  .qa-pbar>span{ position:absolute; left:0; top:0; bottom:0; }
  .qa-p1{ background:var(--qa-green); }
  .qa-px{ background:var(--qa-amber); }
  .qa-p2{ background:var(--qa-red); }
  
  .qa-percent{ font-variant-numeric:tabular-nums; }
  
  /* Botón “Ver resultados” (si lo usas en el form) */
  .qa-btn-resultados{
    padding:10px 18px; border-radius:8px;
    border:1px solid var(--qa-border);
    background:#166534; color:#fff; font-weight:600;
    cursor:pointer; transition:filter .15s;
  }
  .qa-btn-resultados:hover{ filter:brightness(1.05); }
  
  /* ====== Responsive móvil ====== */
  @media (max-width: 720px){
    .qa-table thead{ display:none; }
    .qa-table tbody tr{
      display:block; margin-bottom:10px; border-radius:12px; overflow:hidden;
    }
    .qa-table tbody td{
      display:flex; justify-content:space-between; gap:12px;
      border:none; padding:10px 12px;
    }
    .qa-td-head{ background:var(--qa-card); }
    .qa-rowhead{ gap:8px; }
  }
  
  /* Accesibilidad: reduce animaciones si el usuario lo prefiere */
  @media (prefers-reduced-motion: reduce){
    .qa-table tbody tr{ transition:none; }
  }
  
  /* Impresión: limpia fondos y colores intensos */
  @media print{
    .qa-wrap, .qa-card{ background:#fff !important; color:#000 !important; border:1px solid #ddd; }
    .qa-chip, .qa-abbr{ border:1px solid #999; color:#000 !important; background:#fff !important; }
    .qa-pbar{ border:1px solid #999; background:#fff; }
    .qa-p1,.qa-px,.qa-p2{ background:#999 !important; }
  }


  /* ===== Matriz de votos por usuario (mantener como tabla en móvil) ===== */
.qa-votos-usuarios { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
  }
  .qa-votos-usuarios .qa-table { 
    min-width: 900px; /* ancho mínimo para no colapsar columnas */
    border-collapse: separate;
    border-spacing: 0;
  }
  
  /* Primera columna fija (usuario) para mejorar lectura al hacer scroll */
  .qa-votos-usuarios .qa-table thead th:first-child,
  .qa-votos-usuarios .qa-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--qa-card); /* o #fff si usas claro */
  }
  
  /* En móvil: NO aplicar el modo “tarjeta” a la matriz */
  @media (max-width: 720px){
    .qa-votos-usuarios .qa-table thead { display: table-header-group; }
    .qa-votos-usuarios .qa-table tbody tr { display: table-row; }
    .qa-votos-usuarios .qa-table tbody td { 
      display: table-cell; 
      padding: 8px 6px; 
      white-space: nowrap;
      text-align: center;
    }
    .qa-votos-usuarios .qa-table tbody td:first-child { 
      text-align: left; 
      font-weight: 600;
    }
  }
  
  /* ===== Tabla de resultados (mantener el modo “tarjeta” en móvil) ===== */
  /* OJO: limita el comportamiento responsive solo a la caja de resultados */
  .qa-results .qa-table thead{ display:none; }
  .qa-results .qa-table tbody tr{
    display:block; margin-bottom:10px; border-radius:12px; overflow:hidden;
  }
  .qa-results .qa-table tbody td{
    display:flex; justify-content:space-between; gap:12px;
    border:none; padding:10px 12px;
  }