/* ---------------------------------------------------------------------------
 * Estilos propios del portal, fuera del CSS del diseñador.
 * ---------------------------------------------------------------------------
 * `estaticos/css/common.css` se genera compilando `estaticos/css/sass/scss/
 * _common.scss`, así que cualquier regla añadida allí a mano desaparece en la
 * siguiente compilación del diseñador. Todo lo que añadamos nosotros va aquí.
 * ------------------------------------------------------------------------- */

/* Spinner de envío ---------------------------------------------------------
 * Se muestra junto al botón mientras se espera al servidor. CSS puro, sin
 * imágenes ni dependencias. */
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #C8392B;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Quien prefiere menos movimiento ve un pulso suave en vez de un giro continuo. */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: pulso 1.2s ease-in-out infinite;
  }
  @keyframes pulso {
    50% { opacity: 0.35; }
  }
}

/* El indicador de PMR de "Mis entradas" no lleva estilo: se pinta como texto
 * plano junto al tipo ("Adulto PMR"). La pastilla anterior descuadraba la
 * tabla, y envolverlo en un <span> —con clase o sin ella— tampoco vale: la
 * regla `.list-tickets tbody td span { display:block; width:100px }` del CSS
 * del diseñador alcanza a cualquier span de esa tabla. */

/* Botón mientras se envía: sigue ocupando lo mismo para que no salte el layout. */
.is-enviando {
  opacity: 0.6;
  cursor: progress;
}

button[disabled].is-enviando,
button[disabled] {
  cursor: not-allowed;
}

/* Acreditaciones (admin) ----------------------------------------------------
 * Vista #/admin/accreditations. Va aquí, no en estaticos/css/common.css: ese lo
 * compila el diseñador desde SCSS y se lleva por delante lo que añadamos. */
.acred-page       { width: 100%; padding: 20px; }
.acred-intro      { color: #667085; font-size: 13px; line-height: 18px; margin-bottom: 20px; }
.acred-form       { margin-bottom: 30px; }

.acred-field       { display: block; margin-bottom: 20px; }
.acred-field span  { display: block; margin-bottom: 5px; color: #344054; font-size: 14px; }
.acred-field input { width: 100%; max-width: 420px; border: 1px solid #D0D5DD; border-radius: 8px;
                     padding: 8px 12px; font-size: 14px; }

.acred-days        { max-width: 420px; margin-bottom: 20px; padding: 15px;
                     border: 1px solid #D0D5DD; border-radius: 8px; }
.acred-days legend { padding: 0 5px; color: #344054; font-size: 14px; }

.acred-day             { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }
.acred-day:last-child  { margin-bottom: 0; }
.acred-day-label       { flex-grow: 1; color: #282828; font-size: 14px; }
.acred-day-type        { border: 1px solid #D0D5DD; border-radius: 8px; padding: 4px 8px; font-size: 13px; }
/* El tipo solo se elige para los días marcados. */
.acred-day-type:disabled { background: #f1f5f9; color: #98a2b3; }

#acred-submit,
#acred-bulk-submit          { background: #ffdd00; border: 1px solid #ffdd00; border-radius: 8px;
                              padding: 8px 24px; font-size: 14px; color: #0a0a0a; cursor: pointer; }
#acred-submit:disabled,
#acred-bulk-submit:disabled { opacity: .6; cursor: default; }

.acred-error  { color: #a62200; font-size: 12px; line-height: 16px; margin-bottom: 10px; }
.acred-empty  { color: #667085; font-size: 13px; }

.acred-result       { margin-bottom: 30px; padding: 15px; border: 1px solid #adf7b6;
                      background: #f2fbf4; border-radius: 8px; }
.acred-result-title { margin-bottom: 8px; font-size: 14px; font-weight: bold; }
.acred-result-list li { font-size: 13px; line-height: 19px; }

.acred-list-title { margin-bottom: 12px; color: #0a122a; font-size: 18px; font-weight: 700; }
.acred-table      { width: 100%; border-collapse: collapse; }
.acred-table th   { padding: 8px; border-bottom: 1px solid #000; text-align: left;
                    font-size: 13px; font-weight: bold; }
.acred-table td   { padding: 8px; border-bottom: 1px solid #e5e7eb; font-size: 13px; }

/* Entradas de administración inyectadas en el menú lateral por adminMenu.js */
.itemlist li.menu-admin a span { font-style: italic; }

/* Importación de CSV (admin) ------------------------------------------------
 * Estas reglas vivían en assets/css/main.css, que NO lo carga ningún HTML: la
 * pantalla llevaba desde siempre sin estilos. Se traen aquí acotadas bajo
 * .import-page porque en su origen eran selectores globales — `button` con un
 * degradado morado y `.container` con sombra y padding 40px — y sueltas
 * repintarían todos los botones del portal y romperían los modales de
 * index.html, que también usan .container. */
.import-page {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  padding: 40px;
}
.import-page h1 { margin-bottom: 10px; color: #333; font-size: 28px; }

.import-page button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.import-page button:hover    { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(102, 126, 234, .3); }
.import-page button:disabled { opacity: .6; cursor: not-allowed; }

.import-page .btn-outline       { background: #fff; color: #667eea; border: 2px solid #667eea; width: 100%; }
.import-page .btn-outline:hover { background: #f0f4ff; transform: none; box-shadow: none; }

.import-page .form-actions        { display: flex; gap: 12px; flex-wrap: wrap; }
.import-page .form-actions button { flex: 1; min-width: 120px; }

.import-page .import-dropzone {
  margin-top: 24px;
  padding: 40px 24px;
  border: 2px dashed #c4b5fd;
  border-radius: 12px;
  text-align: center;
  color: #6b7280;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.import-page .import-dropzone:hover,
.import-page .import-dropzone.drag-over { border-color: #667eea; background: #f0f4ff; }
.import-page .import-dropzone-icon { margin-bottom: 12px; color: #a78bfa; }
.import-page .import-dropzone-text { margin-bottom: 16px; font-size: 14px; }
.import-page .import-select-btn    { width: auto; display: inline-block; }

.import-page .import-file-info {
  margin-top: 12px; padding: 8px 14px;
  background: #f3f4f6; border-radius: 6px;
  color: #374151; font-size: 13px;
}

/* El .spinner que usa este estado ya está definido arriba en este mismo
 * fichero; el de main.css se queda fuera a propósito para no duplicarlo. */
.import-page .import-processing {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 48px 0; color: #6b7280; font-size: 14px;
}

.import-page .import-summary,
.acred-page .import-summary {
  margin-top: 24px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
}
.import-page .import-stat,
.acred-page .import-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; font-size: 14px; border-bottom: 1px solid #f3f4f6;
}
.import-page .import-stat:last-child,
.acred-page .import-stat:last-child { border-bottom: none; }
.import-page .import-stat span,
.acred-page .import-stat span { color: #6b7280; }
.import-page .import-stat strong,
.acred-page .import-stat strong { color: #111; font-size: 16px; }
.import-page .import-stat-error span,
.import-page .import-stat-error strong,
.acred-page .import-stat-error span,
.acred-page .import-stat-error strong { color: #dc2626; }

.import-page .import-errors,
.acred-page .import-errors {
  margin-top: 16px; padding: 16px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
}
.import-page .import-errors-title,
.acred-page .import-errors-title { margin-bottom: 8px; color: #dc2626; font-size: 13px; font-weight: 600; }
.import-page .import-errors-list,
.acred-page .import-errors-list {
  list-style: disc; padding-left: 20px; color: #7f1d1d;
  font-size: 12px; font-family: monospace; line-height: 1.8;
  max-height: 200px; overflow-y: auto;
}
.import-page .import-welcome-btn { margin-top: 16px; }

/* Importación de GAME (admin) — comparte .import-page con la de TicketMaster */
.import-page .import-game-intro { margin-bottom: 8px; color: #6b7280; font-size: 13px; line-height: 18px; }

/* Los productos sin mapear son la parte accionable del resumen: son ventas que
 * no han generado entrada y que solo se recuperan dando de alta el mapeo. Van
 * en ámbar y antes que las estadísticas para que no pasen desapercibidos. */
.import-page .import-unmapped {
  margin-top: 24px; padding: 16px;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px;
}
.import-page .import-unmapped-title { margin-bottom: 4px; color: #92400e; font-size: 14px; font-weight: 700; }
.import-page .import-unmapped-help  { margin-bottom: 10px; color: #92400e; font-size: 12px; line-height: 17px; }
.import-page .import-unmapped-list  { list-style: disc; padding-left: 20px; color: #78350f; font-size: 12px; line-height: 1.9; }
.import-page .import-unmapped-list code { font-family: monospace; background: #fef3c7; padding: 1px 4px; border-radius: 3px; }

/* Campo "Cantidad" del formulario de acreditaciones */
.acred-qty input     { max-width: 120px; }
.acred-qty-help      { display: block; margin-top: 5px; color: #667085; font-size: 12px; line-height: 16px; }

/* ===========================================================================
 * Mis entradas
 * ===========================================================================
 * Paleta de estados. Estas variables NO existían en el proyecto: se definen
 * aquí con los colores que ya usaba el diseñador para los badges de la tabla
 * (.principaluser y .inviteduser en common.css), para no introducir un color
 * nuevo. Los tonos de texto son los mínimos que dan contraste legible sobre
 * esos fondos. */
:root {
  --bg-success:   #adf7b6;
  --text-success: #14532d;
  --bg-accent:    #a0ced9;
  --text-accent:  #0c4a6e;
  --bg-muted:     #f1f5f9;
  --text-muted:   #475569;
}

/* "Ver enlace": antes llevaba los estilos en línea desde tickets.js. Se pasan
 * aquí tal cual para que el aspecto en escritorio no cambie, y para que en
 * móvil se le pueda dar ancho completo — un estilo en línea gana a cualquier
 * regla y habría obligado a usar !important. */
.list-tickets .btViewLink {
  display: inline-block;
  padding: 6px 10px;
  background: #1f2937;
  border: 1px solid #1f2937;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Móvil: la misma tabla, dispuesta como tarjetas.
 * ---------------------------------------------------------------------------
 * Se transforma la tabla con CSS en lugar de generar un segundo DOM: toda la
 * interacción de tickets.js engancha por closest("tr") y .btAction, así que
 * duplicar la estructura obligaría a duplicar también el cableado de eventos y
 * el formulario de invitación, que tiene estado.
 *
 * Los selectores repiten la cadena completa del diseñador
 * (body.bodyUser ... .list-tickets) porque la suya tiene especificidad (0,6,3):
 * un ".list-tickets td" a secas no ganaría. Al empatar manda el orden de carga,
 * y app.css va después de common.css en index.html.
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {

  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets,
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody,
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tr,
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets td {
    display: block;
    width: auto;
  }

  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets thead {
    display: none;
  }

  /* El caption es display:table-caption; dentro de una tabla convertida en
   * bloque genera una caja de tabla ANONIMA que encoge al ancho minimo. Sin
   * esto se pintaba en una columna de ~70px. */
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets caption {
    display: block;
  }

  /* La tarjeta no puede ensancharse por su contenido. .container-items es un
   * item flex con overflow:auto: sin min-width:0 su ancho minimo lo marca el
   * contenido, la fila crece con el, y el badge y los botones se salen. */
  /* La cadena entera necesita min-width:0. .main y .container-allinfo son
   * contenedores flex, y un item flex NO encoge por debajo del ancho minimo de
   * su contenido salvo que se le diga: sin esto .main se ensanchaba mas alla
   * del viewport y las tarjetas quedaban cortadas por la derecha. */
  body.bodyUser .box-container .main,
  body.bodyUser .box-container .main .container-allinfo,
  body.bodyUser .box-container .main .container-allinfo .container-items {
    min-width: 0;
    max-width: 100%;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets {
    width: 100%;
    max-width: 100%;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody tr {
    max-width: 100%;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td {
    min-width: 0;
    max-width: 100%;
  }

  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets caption {
    margin-bottom: 16px;
    text-align: left;
  }

  /* La fila es la tarjeta. flex + order coloca fecha y estado en la misma
   * línea y apila el resto, sin tocar el orden de las celdas en el HTML. */
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  }

  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td {
    padding: 0;
    border-bottom: none;
    font-size: 14px;
    line-height: 20px;
  }

  /* Las celdas vacías no dejan huecos en la tarjeta. */
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td:empty {
    display: none;
  }

  /* 1 fecha y 4 estado en la misma línea. 2 tipo, 3 nota y 5 acciones apilados. */
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td:nth-child(1) { order: 0; flex: 1 1 auto; }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td:nth-child(4) { order: 1; flex: 0 0 auto; width: auto; text-align: right; }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td:nth-child(2) { order: 2; flex: 1 0 100%; color: var(--text-muted); }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td:nth-child(3) { order: 3; flex: 1 0 100%; overflow-wrap: anywhere; }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td:nth-child(5) { order: 4; flex: 1 0 100%; }

  /* La fecha larga vive en un data-attribute de la celda; el formato corto se
   * oculta con font-size:0 sobre el nodo de texto. Las tarjetas de
   * coleccionables no llevan ese atributo, así que no les afecta. */
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td[data-fecha-larga] {
    font-size: 0;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td[data-fecha-larga]::before {
    content: attr(data-fecha-larga);
    display: block;
    color: #0a122a;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
  }

  /* Badges de estado. El diseñador los fija a width:100px pensando en la
   * columna; aquí se ajustan al texto. */
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td span {
    display: inline-block;
    width: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td span.principaluser {
    background: var(--bg-success);
    color: var(--text-success);
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td span.inviteduser {
    background: var(--bg-accent);
    color: var(--text-accent);
  }

  /* Acciones a ancho completo y con altura de dedo (44px). En escritorio son
   * iconos con el texto desplazado fuera de pantalla (text-indent:-99999px);
   * aquí se recupera el texto, que es lo que hace la acción entendible. */
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .btIcoUser {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #1f2937;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .btIcoUser span {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    text-indent: 0;
    white-space: normal;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .btIcoUser.deleteInv {
    border-color: #dc2626;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .btIcoUser.deleteInv span {
    color: #dc2626;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .btInv.btIcoUser {
    background: #ffdd00;
    border-color: #ffdd00;
  }

  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .btViewLink {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-right: 0;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  /* Formulario de invitación: el campo ocupa la línea entera y los dos botones
   * se reparten la de abajo, en vez de apretarse los tres en una fila. */
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .inv-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .inv-note-input {
    flex: 1 0 100%;
    min-height: 44px;
    font-size: 16px; /* 16px evita que iOS haga zoom al enfocar el campo */
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .btInvConfirm,
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .btInvCancel {
    flex: 1 1 0;
    min-height: 44px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    font-size: 18px;
  }
  body.bodyUser .box-container .main .container-allinfo .container-items .list-tickets tbody td.btAction .inv-error {
    flex: 1 0 100%;
  }

  body.bodyUser .box-container .main .container-allinfo .container-items .collectibles-title {
    margin-bottom: 12px;
  }
}

/* Etiquetas del formulario de registro ---------------------------------------
 * Al añadir data-i18n hubo que envolver el texto en un <span> propio, porque
 * applyI18n escribe textContent y se habría llevado por delante el asterisco de
 * obligatorio y el enlace de términos que van dentro de la misma etiqueta.
 * El CSS del diseñador pone display:block a CUALQUIER span dentro de un label,
 * así que sin esto el asterisco y el enlace caerían a la línea siguiente. */
.box-container .main form fieldset .form-default .form-line label span span[data-i18n] {
  display: inline;
  margin-bottom: 0;
}

/* Sorteos de Funkos (fase 1) -------------------------------------------------
 * Esqueleto sin maquetar: lo justo para que se lea y se pueda pulsar. El
 * diseño definitivo llega después. */
.raffle-page          { width: 100%; padding: 20px; }
/* Los dos son títulos y van igual: el tamaño grande que tenía el de la página.
 * El aire entre bloques lo pone #raffle-body > div, no el margen del título. */
.raffle-page h1,
.raffle-page h2       { margin: 0 0 12px; color: #0a122a; font-size: 24px; font-weight: 700; }
.raffle-loading,
.raffle-disabled      { color: #667085; font-size: 14px; }
.raffle-error         { color: #a62200; font-size: 14px; }

.raffle-action        { padding: 18px; border: 1px solid #ffdd00; background: #fffbeb; border-radius: 10px; }
.raffle-action-text   { margin-bottom: 12px; color: #0a122a; font-size: 15px; }
.raffle-btn           { min-height: 46px; padding: 12px 28px; border: 1px solid #ffdd00;
                        border-radius: 8px; background: #ffdd00; color: #0a122a;
                        font-size: 15px; font-weight: 700; cursor: pointer; }
.raffle-btn:disabled  { opacity: .6; cursor: default; }
.raffle-ok            { padding: 14px; border: 1px solid #adf7b6; background: #f2fbf4;
                        border-radius: 10px; color: #14532d; font-size: 14px; }

.raffle-prize         { padding: 18px; margin-bottom: 12px; border: 1px solid #adf7b6;
                        background: #f2fbf4; border-radius: 10px; text-align: center; }
.raffle-prize-title   { margin-bottom: 12px; color: #14532d; font-size: 16px; }
.raffle-qr            { display: block; margin: 0 auto 10px; width: 220px; height: 220px; }
.raffle-prize-code    { color: #475569; font-family: monospace; font-size: 12px; word-break: break-all; }
.raffle-prize-help    { margin-top: 8px; color: #14532d; font-size: 13px; }
.raffle-used          { margin-top: 8px; margin-bottom: 4px; color: #b42318;
                        font-size: 20px; font-weight: 700; letter-spacing: 1px; }

/* Premio ganado cuyo QR todavia no sirve: se avisa de cuando se activa. Tono de
 * espera, no de error: no ha pasado nada malo. */
.raffle-prize-wait    { padding: 12px 14px; border-radius: 8px; background: #fffbeb;
                        color: #92400e; font-size: 15px; line-height: 21px; }

/* Pantalla del ganador suspendido (#/premio). Se pinta fuera del layout del
 * dashboard —sin menu lateral— asi que necesita su propio marco. */
.prize-only           { max-width: 560px; margin: 40px auto; padding: 32px;
                        border-radius: 12px; background: #fff;
                        box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.prize-only h1        { margin-bottom: 18px; color: #0a122a; font-size: 26px; font-weight: 700; }
.prize-only-note      { margin: 18px 0; color: #667085; font-size: 13px; line-height: 19px; }

#raffle-body > div    { margin-top: 64px; }
.raffle-rules h2      { margin-top: 0; }
.raffle-rules p       { margin-bottom: 14px; color: #475569; font-size: 14px; line-height: 20px; }
.raffle-rules p strong { color: #0a122a; }

/* Los pasos numerados. `list-style` explícito porque common.css lo quita para
 * todos los ol/ul del portal, y aquí la numeración es parte del texto: los
 * pasos se redactaron como "1, 2, 3, 4". */
.raffle-rules-steps      { margin: 0 0 18px 20px; padding: 0; list-style: decimal outside; }
.raffle-rules-steps li   { margin-bottom: 8px; padding-left: 4px; color: #475569;
                           font-size: 14px; line-height: 20px; }

/* Enlace del banner de la home */
.raffle-banner-link   { display: inline-block; margin-top: 14px; padding: 10px 22px;
                        border-radius: 8px; background: #0a122a; color: #fff;
                        font-size: 14px; font-weight: 600; text-decoration: none; }

/* Prototipo de sorteos (solo equipo, tras /preview/raffle) */
.raffle-proto            { width: 100%; padding: 20px; }
.raffle-proto-aviso      { margin-bottom: 20px; padding: 12px 14px; border: 1px dashed #92400e;
                           background: #fffbeb; border-radius: 8px; color: #92400e;
                           font-size: 13px; line-height: 19px; }
.raffle-proto-aviso strong { display: inline-block; margin-right: 8px; padding: 2px 8px;
                             border-radius: 999px; background: #92400e; color: #fff;
                             font-size: 11px; letter-spacing: 1px; }
.raffle-proto-aviso a    { margin-left: 8px; color: #92400e; text-decoration: underline; }
.raffle-proto-sub        { margin: 24px 0 10px; color: #667085; font-size: 13px;
                           font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.raffle-proto-home       { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden;
                           margin-bottom: 24px; }

/* El banner del sorteo lleva la imagen de los funkos en vez del fondo blanco
 * genérico de la home.
 *
 * Se sobrescribe SOLO para .raffle-proto-home. La regla de common.css
 *   body.bodyUser … .container-items.home-items { background: url(SDCCMALAGA-bg-blanco.jpg) … }
 * la comparte la home real del dashboard, y tocarla ahí cambiaría la portada de
 * todos los usuarios. El selector repite la cadena entera porque esa regla tiene
 * seis clases de especificidad: con `.raffle-proto-home` a secas no ganaría.
 *
 * Mismos parámetros que el original (0 0 no-repeat, cover); solo cambia el
 * fichero. La ruta es ../../estaticos/… porque este CSS vive en assets/css/ y la
 * imagen en estaticos/imagen/, no en el mismo árbol que common.css. */
body.bodyUser .box-container .main .container-allinfo .container-items.home-items.raffle-proto-home {
  background: url(../../estaticos/imagen/SDCCMALAGA-bg-funko.jpg) 0 0 no-repeat;
  background-size: cover;
}

/* La capa gris de .home-body va al 15% en este banner: al 95% de la home tapaba
 * el azul de la imagen. Sigue habiendo velo —hace de fondo para el texto— pero
 * ahora deja ver la foto. */
body.bodyUser .box-container .main .container-allinfo .container-items.home-items.raffle-proto-home .home-body {
  background-color: rgba(192, 192, 192, .15);
}

/* Logo de cabecera del banner. Va primero en el marcado, encima del titular.
 * Necesita clase y selector largo porque .home-body img de common.css fija
 * width:150px para el logo pequeño del pie, y aquí el logo es apaisado
 * (1327x334) y hace de rótulo principal. */
body.bodyUser .box-container .main .container-allinfo .container-items.home-items.raffle-proto-home .home-body img.raffle-banner-logo {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-bottom: 18px;
}

/* Texto del banner en blanco y los dos párrafos al doble de tamaño.
 *
 * common.css los deja en negro y los <p> a 12px, medidas del banner original de
 * la home. Aquí el fondo es la foto y el texto tiene que leerse sobre ella.
 * Los selectores repiten la cadena entera y añaden .raffle-proto-home para
 * ganar a las reglas de common.css sin tocar la home real. */
body.bodyUser .box-container .main .container-allinfo .container-items.home-items.raffle-proto-home .home-body h3,
body.bodyUser .box-container .main .container-allinfo .container-items.home-items.raffle-proto-home .home-body p {
  color: #fff;
}

body.bodyUser .box-container .main .container-allinfo .container-items.home-items.raffle-proto-home .home-body p {
  font-size: 16px;
  line-height: 20px;
}

/* Los dos párrafos, pegados entre sí: el aire va arriba del bloque y no entre
 * líneas. common.css le mete 30px de margin-bottom a todo <p> del banner, de ahí
 * que haga falta anular el del primero. */
body.bodyUser .box-container .main .container-allinfo .container-items.home-items.raffle-proto-home .home-body p:nth-of-type(1) {
  margin-top: 30px;
  margin-bottom: 0;
}

body.bodyUser .box-container .main .container-allinfo .container-items.home-items.raffle-proto-home .home-body p:nth-of-type(2) {
  margin: 0;
}
.raffle-proto-home img   { width: 120px; margin-top: 14px; }

/* "Ver como usuario" (admin) -------------------------------------------------
 * Acotado bajo .user-lookup-page por lo mismo que .import-page: la vista
 * reutiliza .list-tickets del diseñador y no debe repintarla para el resto del
 * portal. Los badges de estado (.principaluser, .inviteduser) se dejan tal cual
 * vienen: son los mismos que ve el usuario, y ahí está la gracia. */
.user-lookup-page {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  padding: 40px;
}
.user-lookup-page h1     { margin-bottom: 10px; color: #333; font-size: 28px; }
.user-lookup-page h2     { margin: 28px 0 10px; color: #667085; font-size: 13px;
                           font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.user-lookup-intro       { margin-bottom: 20px; color: #667085; font-size: 13px; line-height: 19px; }

.user-lookup-form        { display: flex; gap: 12px; flex-wrap: wrap; }
.user-lookup-form input  { flex: 1; min-width: 220px; padding: 12px; border: 1px solid #d0d5dd;
                           border-radius: 6px; font-size: 15px; }
.user-lookup-form button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.user-lookup-form button:disabled { opacity: .6; cursor: not-allowed; }

.user-lookup-error       { margin-top: 16px; padding: 12px 14px; border-radius: 8px;
                           background: #fef2f2; color: #b42318; font-size: 14px; }
.user-lookup-empty       { color: #667085; font-size: 13px; font-style: italic; }

.user-lookup-fields      { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px;
                           margin: 20px 0 0; }
.user-lookup-fields dt   { color: #667085; font-size: 13px; font-weight: 600; }
.user-lookup-fields dd   { margin: 0; font-size: 14px; color: #333; }
.user-lookup-fields code { font-family: monospace; font-size: 13px; color: #475467; }

/* Las acciones llegan ya desactivadas desde ticketsTable.js (soloLectura). El
 * cursor lo dice también a la vista, para que nadie insista en pulsarlas. */
.user-lookup-page .btAction button { opacity: .5; cursor: not-allowed; }
.user-lookup-page .btViewLink      { opacity: .5; text-decoration: none; }

/* Tabla de entradas dentro de "Ver como usuario".
 *
 * Las reglas del diseñador para .list-tickets cuelgan TODAS de
 * `body.bodyUser … .container-items`, y el router deja el body sin clase en las
 * rutas que no son dashboard/profile/tickets (main.js). Así que aquí no llega
 * nada: sin esto la tabla sale sin bordes y los badges como texto suelto, que es
 * justo lo contrario de "ver lo que ve el usuario". Se replican acotadas a la
 * página, con los mismos valores que common.css. */
.user-lookup-page .list-tickets           { width: 100%; }
.user-lookup-page .list-tickets thead th  { border-bottom: 1px solid #000; padding: 10px; font-weight: bold; }
.user-lookup-page .list-tickets tbody td  { border-bottom: 1px solid #000; padding: 10px;
                                            font-size: 13px; line-height: 15px; vertical-align: middle; }

.user-lookup-page .list-tickets tbody td span.principaluser,
.user-lookup-page .list-tickets tbody td span.inviteduser {
  display: block; width: 100px; padding: 5px;
  border-radius: 8px; font-size: 12px; text-align: center;
}
.user-lookup-page .list-tickets tbody td span.principaluser { background: #adf7b6; }
.user-lookup-page .list-tickets tbody td span.inviteduser   { background: #a0ced9; }

/* Columna "Origen". No existe en la vista del usuario: la añade la de admin con
 * celdaExtra() de ticketsTable.js. Va por clase propia y no como `td span` para
 * que no herede el ancho fijo de los badges de arriba. */
.user-lookup-page .origen-propia { color: #027a48; font-size: 13px; font-weight: 600; }
.user-lookup-page .origen-cedida { color: #b54708; font-size: 13px; font-weight: 600; }
.user-lookup-page .origen-dueno  { color: #667085; font-size: 12px; font-family: monospace; }