<style>


:root {
--bg: #ffffff; /* blanco */
--card-bg: #f5f5f5; /* gris claro para tarjetas */
--text: #0b0f14; /* texto oscuro */
--muted: #555; /* gris medio */
--accent: #2fbf71;
--border: #ddd;
--round-bg: #eee;
--chip-bg: #fafafa;
--chip-text: #333;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}



header {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(160%) blur(10px);

/* Importante elimina los dos caracteres de inicio y final de background para que la cabecera adquiera ese color y ponlos en el background que no los tenía antes */
/* Fondo pastel azul */
background: linear-gradient(to bottom, #d6eaff, #f0f8ff);
/* verde pastel */
/* background: linear-gradient(to bottom, #e3f9e5, #f7fff9); */
/* coral pastel */
/* background: linear-gradient(to bottom, #ffe5d9, #fff8f5); */
border-bottom: 1px solid var(--border);
}

.wrap{max-width:1100px;margin:0 auto;padding:0 16px}


.brand {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 0; /* antes 14px 0 */
}

.logo{
width:56px;height:56px;border-radius:12px;
background:linear-gradient(135deg,var(--accent),#0fd46b 60%,#0ea162);
box-shadow:0 6px 20px rgba(47,191,113,0.35);
display:flex;align-items:center;justify-content:center;
color:#052c17;font-weight:800;letter-spacing:0.4px
}
.brand h1{margin:0;font-size:18px;font-weight:800}
.brand .subtitle{font-size:12px;color:var(--muted)}


.nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 4px 0 8px; /* antes 8px 0 14px */
}

.btn{
display:inline-flex;align-items:center;gap:8px;
padding:10px 14px;border-radius:10px;border:1px solid var(--border);
background:var(--chip-bg);color:var(--chip-text);font-weight:600;font-size:14px;
transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px);border-color:#284057;box-shadow:0 6px 16px rgba(30,163,247,0.18)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#0fd46b 60%,#0ea162);color:#052c17;border-color:transparent}
.btn.primary:hover{box-shadow:0 8px 22px rgba(47,191,113,0.35)}

main{padding: 8px 0 60px}

.btn {
border: 1px solid #b0cbe8 /* Color del borde: Para azul pastel "#b0cbe8" ,para verde pastel "#b6e2c1" ,para coral pastel "#f5c6b3" */
}




.hero{
margin:18px 0 16px;padding:16px;border-radius:14px;border:1px solid var(--border);
background:linear-gradient(to bottom right, rgba(31,39,49,0.35), rgba(20,32,44,0.25));
}
.hero h2{margin:0 0 6px;font-size:22px}
.hero p{margin:6px 0 0;color:var(--muted)}

table{width:100%;border-collapse:collapse;margin:18px 0}
th, td{border:1px solid var(--border);padding:8px;text-align:center;font-size:14px}
th{background:var(--round-bg)}
td.team{font-weight:700;text-align:left}
td.total{font-weight:800;color:#bfe3cf}

.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:780px){ .grid{grid-template-columns:1fr 1fr} }

.round-card{
background:var(--card-bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;
display:flex;flex-direction:column;
}
.round-head{
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:12px 14px;background:var(--round-bg);border-bottom:1px solid var(--border);
}
.round-title{font-weight:800}
.round-meta{font-size:13px;color:var(--muted);font-weight:700}
.matches{padding:10px 12px}
.match{
display:flex;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px dashed var(--border);
}
.match:last-child{border-bottom:none}
.teams{font-weight:700}
.score{min-width:56px;text-align:center;font-weight:800;color:#cfe0f2}
.players{margin:8px 0 0 0;padding-left:20px;color:var(--muted)}
.players li{margin:4px 0}

/* Estilo general de la tabla */
#tabla-dh {
border-collapse: collapse;
width: 100%;
margin: 18px 0;
font-size: 14px;
}

/* Encabezado diferenciado */
#tabla-dh thead tr {
background-color: #d6eaff; /* azul pastel suave */
color: #0b0f14; /* texto oscuro */
font-weight: 700;
}

/* Filas alternas */
#tabla-dh tbody tr:nth-child(odd) {
background-color: #f9f9f9; /* gris muy claro */
}
#tabla-dh tbody tr:nth-child(even) {
background-color: #ffffff; /* blanco */
}

/* Columna de nombres de equipos */
#tabla-dh td.team {
background-color: #f0f8ff; /* azul muy suave */
font-weight: 700;
}

/* Columna de puntos totales */
#tabla-dh td.total {
background-color: #f0f8ff; /* verde pastel suave */
font-weight: 800;
color: #0b0f14;
}

/* Columna de nombres de equipos en Primera División */
#tabla-pd td.team {
  background-color: #f0f8ff; /* azul muy suave */
  font-weight: 700;
}

/* Columna de puntos totales en Primera División */
#tabla-pd td.total {
  background-color: #f0f8ff; /* verde pastel suave */
  font-weight: 800;
  color: #0b0f14;
}

/* Cajas de cada ronda */
.round-card {
background: #f0f8ff; /* azul pastel suave */
border: 1px solid #b0cbe8; /* borde azul grisáceo muy ligero */
border-radius: 14px; /* esquinas redondeadas */
overflow: hidden;
display: flex;
flex-direction: column;
margin-bottom: 16px; /* separación entre rondas */
}

/* Cabecera de cada ronda */
.round-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #d6eaff; /* azul pastel un poco más intenso */
border-bottom: 1px solid #b0cbe8; /* línea divisoria suave */
}

/* Título y meta */
.round-title {
font-weight: 800;
}
.round-meta {
font-size: 13px;
color: #555;
font-weight: 700;
}

/* Partidos dentro de cada ronda */
.matches {
padding: 10px 12px;
}
.match {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 10px;
border-bottom: 1px dashed #b0cbe8; /* línea separadora suave */
}
.match:last-child {
border-bottom: none;
}
.teams {
font-weight: 700;
}
.score {
min-width: 56px;
text-align: center;
font-weight: 800;
color: #0b0f14;
}


/* Tabla de resultados de encuentros */
table {
width: 100%;
border-collapse: collapse;
margin: 18px 0;
font-size: 14px;
}

/* Encabezado diferenciado */
table thead tr {
background-color: #d6eaff; /* azul pastel */
color: #0b0f14;
font-weight: 700;
}

/* Filas alternas */
table tbody tr:nth-child(odd) {
background-color: #f9f9f9; /* gris muy claro */
}
table tbody tr:nth-child(even) {
background-color: #ffffff; /* blanco */
}

/* Celdas */
table td, table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}

/* Columna de encuentro */
td.match {
text-align: left;
font-weight: 700;
background-color: #f0f8ff; /* azul pastel suave */
}

/* Columna de local de juego */
td.venue {
background-color: #fafafa; /* gris claro */
}

/* Columna de fecha-hora */
td.date {
background-color: #fafafa; /* gris claro */
font-weight: 600;
}

/* Notas al pie */
.notes {
background-color: #f5f5f5; /* gris muy suave */
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
font-size: 13px;
color: #555;
margin-top: 12px;
}

footer{margin-top:26px;padding:16px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}



/* ... estilos anteriores ... */

.brand {
  display: grid;
  grid-template-columns: 120px 1fr 120px; /* logo - título - espacio vacío */
  align-items: center;
}

.brand .logo {
  grid-column: 1;
  justify-self: start;
}

.brand .title-block {
  grid-column: 2;
  text-align: center;
}

/* ... tamño del logo ... */
.logo img {
  max-height: 48px;
  width: auto;    /* se ajusta proporcionalmente */
}

</style>

