/* ============================================================================
   formulario - dribb Partidos
=========================================================================== */


/* === Card & títulos ====================================================== */
.dp-card--dark{
  background:#252836;
  border-radius:10px;                 /* antes 14px, unificado */
  padding:15px 10px 20px !important;  /* top | right/left | bottom */
}
.dp-title--center{
  text-align:center;
  font-size:32px;
  font-weight:900;
  margin:6px 0 18px;
}


/* === Form grid (mock) ==================================================== */
.dp-form--mock{
  padding-inline:8px;                 /* aire lateral extra */
}
.dp-form--mock .dp-row{
  display:grid;
  grid-template-columns:56px 1fr;     /* antes 70px, unificado */
  gap:10px;                           /* antes 14px, unificado */
  align-items:center;
  margin-bottom:14px;
}
.dp-form--mock .dp-row > .dp-ico{
  align-self:start;                   /* icono anclado arriba */
  margin-top:33px;                    /* alineado con línea del input */
}


/* === Iconos ============================================================= */
.dp-ico{
  width:56px; height:56px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px;
}
.dp-ico--blue{   background:#2d5bff; }
.dp-ico--red{    background:#ff1744; }
.dp-ico--purple{ background:#2B2F40; }
.dp-ico--ball-left,
.dp-ico--ball-right{ background:#2B2F40; }


/* === Labels & Inputs ===================================================== */
.dp-label{
  color:#cfd7e6;
  font-weight:600;
  margin-bottom:8px;
}
.dp-input{
  background:#2f3342;
  border:1px solid transparent;
  border-radius:12px;
  color:#fff;
  padding:16px;
  height:56px;
  outline:none;
}
.dp-input:focus{
  border-color:#ffffff22;
}

/* Ocultar flechas de number (estilo mock) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
input[type=number]{ -moz-appearance:textfield; }


/* === Goals (marcadores izquierda / derecha) ============================= */
.dp-goals{
  display:grid;
  grid-template-columns:1fr 1fr;      /* antes: 1fr 70px 1fr */
  gap:18px;
  align-items:flex-end;
  margin:8px 0 16px;
}
.dp-goals__field{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  align-items:center;
}


/* === Nota (banner informativo breve) ==================================== */
.dp-note{
  display:flex; align-items:center; gap:10px;  /* pedido */
  background:#6757D6;
  color:#fff;
  border-radius:10px;                           /* pedido */
  padding:10px 14px;                             /* pedido */
  font-weight:400;                               /* pedido */
  margin:8px 0 16px;
}


/* === Botón rojo (primario) ============================================== */
.dp-btn--red{
  width:100%;
  height:50px;
  border-radius:12px;
  font-weight:900;
  background:#df204d !important;                /* nuevo color unificado */
  color:#fff;
  border:0;
  transition:background .15s ease-in-out, transform .05s ease-in-out, filter .15s ease-in-out;
}
.dp-btn--red:hover,
.dp-btn--red:focus{
  background:#c5163f !important;                /* hover/focus unificado */
}
.dp-btn--red:active{
  transform:translateY(1px);
}
.dp-btn--red[disabled],
.dp-btn--red:disabled{
  opacity:.6;
  cursor:not-allowed;
}


/* === Banner general (alerta/aviso) ====================================== */
.dp-banner{
  display:flex; align-items:center; gap:12px;
  background:#df204d; color:#fff;
  border-radius:12px;
  padding:16px 22px;
  margin:14px 0;
  position:relative;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.dp-banner__close{
  position:absolute; right:12px; top:50%;
  transform:translateY(-50%);
  appearance:none; border:0; background:transparent; color:#fff;
  font-size:20px; line-height:1; cursor:pointer; opacity:.9;
}
.dp-banner__close:hover{ opacity:1; }


/* === Toast (éxito, confirmación, etc.) ================================== */
.dp-toast{
  display:flex !important;
  align-items:center !important;                /* centra verticalmente todo */
  justify-content:space-between !important;
  gap:12px !important;
  background:#10b981; color:#fff;               /* verde éxito */
  border-radius:12px;
  padding:3px 15px;
  margin:0 0 12px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
/* Blindaje anti-resets */
.dp-toast, .dp-toast *{
  text-indent:0 !important;
  letter-spacing:normal !important;
  word-spacing:normal !important;
}
.dp-toast__left{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 1 auto !important;
  min-width:0;
}
.dp-toast i{
  font-size:14px; width:20px; height:20px; border-radius:50%;
  background:#fff; color:#10b981;
  display:flex; align-items:center; justify-content:center;
}
.dp-toast__text{ font-size:16px; line-height:1.35; }
.dp-toast__close{
  flex:0 0 auto;
  appearance:none; border:0; background:transparent; color:#fff;
  font-size:22px; line-height:1; cursor:pointer; opacity:.9;
}
.dp-toast__close:hover{ opacity:1; }


/* === SweetAlert ======================================================= */

.swal2-popup .swal2-actions .swal2-confirm{
  background:#10b981 !important;  /* mismo verde del toast */
  color:#fff !important;
  padding:10px 18px !important;
  font-weight:600 !important;
}
.swal2-popup .swal2-actions .swal2-confirm:hover,
.swal2-popup .swal2-actions .swal2-confirm:focus{
  background:#0ea371 !important;  /* verde un poco más oscuro al hover/focus */
  box-shadow:none !important;
}


/* === Media queries ======================================================= */
@media (max-width:720px){
  .dp-form--mock .dp-row{ grid-template-columns:56px 1fr; } /* reafirma en móvil */
}

@media (max-width:480px){
  .dp-toast__text{ font-size:14px !important; } /* legibilidad en teléfonos */
}


/* ============================================================================
   Notas de cambios / limpieza
   - Eliminados bloques duplicados completos (se repetían desde /* ===== Mock exacto ===== * /).
   - Unificado .dp-card--dark: border-radius=10px y padding aplicado una sola vez.
   - Form grid: consolidado a 56px para columna de icono y gap=10px.
   - .dp-btn--red: fusionadas variantes (width/height/hover/filter), color unificado (#df204d base / #c5163f hover).
   - Corregido selector roto "ner__close:hover" → ".dp-banner__close:hover".
   - Toast: fusionados estilos dispersos y media query duplicada.
   - Comentarios “antes:” conservan contexto de cambios para futuras referencias.
=========================================================================== */

























/* =========================
   Historial de Partidos (clean)
   ========================= */

/* Tarjeta base (cada partido) */
.dp-match{
  /* Variables de tema (ajusta aquí y se replica todo) */
  --bar-bg:      #1B1A23;
  --row-bg:      #252836;
  --band-bg:     #2B2F40;   /* fondo de la banda detrás del número */
  --band-border: #6757d6;   /* borde de la banda */
  --txt:         #fff;

  --chip-size:   64px;      /* caja del balón */
  --gap:         14px;      /* separación balón ↔ banda */
  --pad:         18px;      /* padding lateral del bloque de goles */
  --band-h:      54px;      /* altura de la banda */
  --radius:      10px;      /* radios de esquina */

  --dot-win:     #0ecf8c;
  --dot-lose:    #df204d;
  --dot-draw:    #c9a227;

  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #0004;
  background: transparent;
}

/* Barra superior: estado (Victoria/Derrota/Empate) */
.dp-match__bar{
  height: 40px;
  background: var(--bar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-status{ display:inline-flex; gap:8px; color:#e8eef8; font-weight:700;font-size: 18px; }
.dp-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; background:#8aa; }
.dp-dot--win{ background: var(--dot-win); }
.dp-dot--lose{ background: var(--dot-lose); }
.dp-dot--draw{ background: var(--dot-draw); }

/* Fila principal: Mi equipo | Fecha/VS | Rival */
.dp-match__row{
  background: var(--row-bg);
  color: var(--txt);
  display: grid;
  grid-template-columns: 1fr 160px 1fr;  /* centro compacto */
  padding: 18px 24px 22px;
  align-items: center;                    /* alinea verticalmente todo */
}
.dp-col__title{
  text-align: center;
  color: var(--txt);
  margin: 0 0 10px;
}

/* ------- Goles (banda con número y chip balón) ------- */
.dp-input-like{ background: transparent; } /* sin herencias indeseadas */

.dp-input-like--score{
  position: relative;
  min-height: var(--band-h);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* La banda se dibuja detrás del número con ::before */
.dp-input-like--score::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--pad) + var(--chip-size) + var(--gap));
  right: var(--pad);
  height: var(--band-h);
  background: var(--band-bg);
  box-sizing: border-box;
  border-radius: var(--radius);
  z-index: 0;
}
/* Flip cuando el balón está a la derecha */
.dp-input-like--right::before{
  left: var(--pad);
  right: calc(var(--pad) + var(--chip-size) + var(--gap));
}

/* Contenido por encima de la banda */
.dp-input-like--score > *{ position: relative; z-index: 1; }

/* Número de goles */
.dp-input-like--score .dp-goal{
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
}

/* Chip (balón) */
.dp-chip{
  width: var(--chip-size);
  height: var(--chip-size);
  border-radius: 10px;
  background: #2b2f40;  /* cajita oscura como en tu UI */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.dp-chip--left  { color:#1f69ff; } /* balón azul */
.dp-chip--right { color:#df204d; } /* balón rojo */

/* ------- Centro: VS del mismo alto que la banda ------- */
.dp-vs__box{
  height: var(--band-h);
  padding: 0 28px;                 /* ancho de la pastilla VS */
  border-radius: var(--radius);
  background: var(--band-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-vs__chip{ font-weight: 900; font-size: 28px; line-height: 1; }
.dp-vs__v     { color:#1570ff; }
.dp-vs__s,
.dp-vs__slash { color:#df204d; }



.dp-input-like--score{
  /* la banda ya usa --band-h; aquí forzamos que el chip mida lo mismo */
  --chip-size: var(--band-h);
}

.dp-input-like--score .dp-chip{
  width: var(--chip-size);
  height: var(--chip-size);
  border-radius: var(--radius); /* mismo radio para que se vea alineado */
}




/* mover los títulos */
.dp-match__row .dp-col:first-child .dp-col__title{
  text-align: right;     /* Mi equipo → a la derecha */
  padding-right: 100px;   /* ajuste fino (sube/baja el valor si quieres) */
}
.dp-match__row .dp-col:last-child .dp-col__title{
  text-align: left;      /* Rival → a la izquierda */
  padding-left: 115px;    /* ajuste fino */
}

/* fecha en negrita (centro) */
.dp-col__title--center-date,
.dp-vs .dp-col__title{
  font-weight: 700 !important;
}



.dp-match__bar .dp-dot{
  position: relative;
  top: 10px;                 /* ajusta 1–4px según te guste */
}


/* Bordes por lado para las cajitas del balón */
.dp-input-like--score .dp-chip--left{
  border: 1.5px solid #1f69ff;   /* azul */
  box-sizing: border-box;
}
.dp-input-like--score .dp-chip--right{
  border: 1.5px solid #df204d;   /* rojo */
  box-sizing: border-box;
}

/* Bandas de marcador con borde blanco de 1px */
.dp-input-like--score:not(.dp-input-like--right)::before{
  background: #1f69ff;        /* azul (mi equipo) */
  border: 1.5px solid #fff;     /* borde blanco */
  box-sizing: border-box;
}

.dp-input-like--score.dp-input-like--right::before{
  background: #df204d;        /* rojo (rival) */
  border: 1.5px solid #fff;     /* borde blanco */
  box-sizing: border-box;
}
/* Pelotas en blanco, manteniendo bordes por lado */


.dp-chip i{
  font-size: 28px;   /* sube/baja a tu gusto: 26, 28, 30... */
  line-height: 1;
}
/* Acerca el contenido a la barra negra (Derrota/Victoria/Empate) */
.dp-match__row{
  padding-top: 8px;   /* antes 18px; prueba 6–10px según gusto */
}
























/* Fila de la barra superior (sin fondo) */
.dp-toolbar{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 14px;
}

/* Caja izquierda: “⚽ X partidos jugados” (con el fondo) */
.dp-toolbar__left{
  background:#252836;
  padding:16px 22px;
  color:#fff;
  letter-spacing:.3px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:1;                 /* se expande y el select queda afuera */
}
.dp-toolbar__left i{ font-size:18px; }

/* Caja derecha: filtro (independiente) */
.dp-toolbar__right{ margin-left:auto; }
.dp-select{
  position:relative;
  display:inline-flex;
  align-items:center;
  background:#252836;
  border:1px solid #3a3f51;
  border-radius:10px;
  overflow:hidden;
}
.dp-select__ico{
  position:absolute; left:10px; color:#9aa4bd; pointer-events:none;
}
.dp-filter__select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#2b3040; color:#fff; border:0;
  padding:10px 42px 10px 36px;
  border-radius:10px 0 0 10px; height:40px;
  font-weight:600;
}
.dp-select__caret{
  position:absolute; right:12px; color:#fff; pointer-events:none;
}



.dp-toolbar__left{
  justify-content: center;  /* centra horizontalmente los hijos */
  align-items: center;      /* ya estaba, asegura centrado vertical */
  text-align: center;       /* por si el texto ocupa varias líneas */
  gap: 10px;                /* separa ícono y texto */
}

.dp-select{
  border: 1px solid #6757D6 !important;
}


.dp-select{ transform: translateY(3px); }  /* prueba 2–6px */


/* Barra con acción a la derecha (eliminar) */
.dp-match__bar{ position:relative; }

.dp-delete{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#df204d;            /* base */
  text-decoration:none;
  opacity:.9;
  transition: color .18s ease, opacity .18s ease, filter .18s ease;
}

.dp-delete:hover{
  color:#c5163f;            /* menos intenso (suavizado) */
  opacity:1;
  filter:none;              /* quitamos el brillo para no intensificar */
}


div:where(.swal2-container).swal2-center > .swal2-popup {
  grid-column: 2;
  grid-row: 2;
  place-self: center center;
  background: #252836 !important;
  color: #fff;
}


.dp-list{
  display: flex;            /* o grid; como lo tengas */
  flex-direction: column;
  gap: 18px;                /* separación vertical entre tarjetas */
}

/* Responsive: apila en móvil */
@media (max-width:640px){
  .dp-toolbar{ flex-direction:column; align-items:stretch; }
  .dp-toolbar__left{ width:100%; }
  .dp-toolbar__right{ align-self:flex-end; }
}







/* Responsive */
@media (max-width: 820px){
  .dp-match__row{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}




@media (max-width:640px){
  .dp-match{ position: relative; }

  /* Mantén la barra con su altura */
  .dp-match__bar{
    min-height: 40px;
    padding: 8px 12px;
    position: relative;
    z-index: 1;
  }

  /* Sube la fecha desde el centro a la barra */
  .dp-col__title--center-date{
    position: absolute;         /* saca del flujo y ya no deja hueco */
    top: 8px;                   /* coloca dentro de la barra */
    left: 12px;
    transform: translateY(0);   /* ajusta fino si quieres: 1–3px */
    color: #e8eef8;
    font-weight: 700;
    z-index: 2;                 /* por encima del fondo de la barra */
  }

  /* Estado centrado y papelera a la derecha */
  .dp-status{
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  .dp-delete{
    position: absolute;
    top: 8px;
    right: 12px;
    transform: none;
    z-index: 2;
  }
}


/* ===== Paginación (centrada, estilo pill) ===== */
.dp-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin: 8px 0 0;
  padding: 8px 0 0;
}

.dp-page{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;          /* pill cuadradito redondeado */
  background:#2B2F40;          /* cuadrito oscuro */
  color:#e8eef8;
  text-decoration:none;
  font-weight:800;
  line-height:1;
  opacity:.9;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease;
  user-select:none;
}

.dp-page:hover{ opacity:1; transform: translateY(-1px); color:#e8eef8; background-color:#6757D6;  }

/* Página actual (morado) */
.dp-page.is-current{
  background:#6757D6;
  color:#fff;
  opacity:1;
  box-shadow: 0 6px 18px rgba(103,87,214,.25);
}

/* Flechas deshabilitadas (chevrons apagados) */
.dp-page.is-disabled{
  pointer-events:none;
  opacity:.35;
  filter: grayscale(40%);
}

/* Accesibilidad: estado focus visible */
.dp-page:focus{
  outline: 2px solid #6757D6;
  outline-offset: 2px;
}

/* Compacto en móvil */
@media (max-width:480px){
  .dp-page{ width:36px; height:36px; border-radius:10px; }
  .dp-pager{ gap:8px; }
}

































/* ===== Títulos de equipos: cortar con "…" ===== */
.dp-col__title{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  /* ancho máximo para evitar que invadan el chip/banda */
  max-width: clamp(140px, 26vw, 260px);
}

/* Ajustes por lado para respetar tus paddings personalizados */
.dp-match__row .dp-col:first-child .dp-col__title{
  margin-left:auto;           /* empuja hacia la derecha */
  padding-right:100px;        /* ya lo tenías */
}
.dp-match__row .dp-col:last-child .dp-col__title{
  margin-right:auto;          /* empuja hacia la izquierda */
  padding-left:115px;         /* ya lo tenías */
}

/* En móvil: dales un poco más de aire */
@media (max-width:640px){
  .dp-col__title{
    max-width: 80vw;          /* casi todo el ancho visible */
  }
}







/* ===== Título centrado exactamente sobre la banda de goles ===== */
.dp-col__title{
  display:block;
  margin:0 0 8px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  min-width:0;                 /* asegura que el ellipsis funcione dentro de grid */
}

/* Mi equipo: chip a la izquierda -> título ocupa la banda (desde chip+gap hasta borde derecho) */
.dp-match__row .dp-col:first-child .dp-col__title{
  padding-left: calc(var(--pad) + var(--chip-size) + var(--gap));
  padding-right: var(--pad);
}

/* Rival: chip a la derecha -> título ocupa la banda (desde borde izquierdo hasta gap+chip) */
.dp-match__row .dp-col:last-child .dp-col__title{
  padding-right: calc(var(--pad) + var(--chip-size) + var(--gap));
  padding-left: var(--pad);
}

/* Si aún tienes reglas viejas, anula con !important o elimínalas */
.dp-match__row .dp-col:first-child .dp-col__title,
.dp-match__row .dp-col:last-child  .dp-col__title{
  /* quita cualquier text-align heredado raro */
  text-align: center;
}

/* Opcional: en móvil un poco más de aire */
@media (max-width:640px){
  .dp-col__title{ margin-bottom:10px; }
}