/* Mobile-first, tema claro inspirado en mockups */
:root{
  --bg:#f7f2fb; /* lila muy claro */
  --card:#ffffff; /* blanco */
  --text:#1f2937; /* slate-800 */
  --muted:#6b7280; /* gray-500 */
  --accentFrom:#7c3aed; /* purple-600 */
  --accentTo:#ef3e7a; /* fucsia */
  --accent2:#7c3aed; /* para detalles */
  --danger:#ef4444; /* red-500 */
  --waFrom:#25D366; /* WhatsApp green */
  --waTo:#128C7E;   /* WhatsApp dark green */
}
*{box-sizing:border-box}
body{
  margin:0; background:linear-gradient(180deg, #fbf7ff 0%, var(--bg) 100%); color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size:16px; /* evita zoom en iOS */
  line-height:1.5;
}
.container{max-width:920px; margin:24px auto; padding:0 16px}
.card{background:var(--card); border:1px solid #e5e7eb; border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(124,58,237,.15);} 
.row{display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-bottom:12px}
label{min-width:auto; margin-bottom:4px; font-weight:600; color:#374151}
input, select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#f9fafb; color:#111827; font-size:16px}
button{padding:14px 18px; border:none; border-radius:12px; background:linear-gradient(135deg, var(--accentFrom), var(--accentTo)); color:white; cursor:pointer; font-weight:700; width:100%; box-shadow:0 6px 18px rgba(124,58,237,.25)}
button:hover{filter:brightness(1.1)}
.message{margin-top:10px}
.message.success{color:var(--accent2)}
.message.error{color:var(--danger)}
.message.info{color:var(--accent2)}

/* Focus visible for accesibilidad */
input:focus-visible, select:focus-visible, button:focus-visible{outline:2px solid var(--accent2); outline-offset:2px}

.table-responsive{width:100%; overflow-x:auto}
table{width:100%; border-collapse:collapse; margin-top:12px; min-width:520px}
th, td{border-bottom:1px solid #e5e7eb; padding:10px; text-align:left; vertical-align:top}
th{color:#6b21a8; white-space:nowrap}
td{word-break:break-word}

/* Visual validation for incomplete rows */
.row.invalid input,
.row.invalid select{
  border-color: var(--danger);
}

/* Highlight best option in results */
tr.best td{font-weight:700; color: var(--accent2)}

/* Acciones claras en móvil */
.row.actions{flex-direction:row; align-items:center; gap:8px}
.row.actions button{flex:1}
#agregarFechaBtn{width:100%; align-self:stretch; border:2px dashed #e9d5ff; background:#faf5ff; color:#6b21a8; box-shadow:none}
/* Separación del botón de crear en la pantalla inicial */

/* Hero */
.hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin:16px 0 24px}
.hero .hero-icon{width:72px; height:72px; border-radius:999px; background:linear-gradient(135deg, var(--accentFrom), var(--accentTo)); color:white; box-shadow:0 10px 24px rgba(0,0,0,.12), 0 0 0 6px rgba(124,58,237,.10); border:4px solid #fff; display:flex; align-items:center; justify-content:center}
.hero .title{font-size:24px; font-weight:800; letter-spacing:.2px}
.hero .subtitle{font-size:14px; color:var(--muted)}

/* Intro compacta y responsive */
.intro{background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-bottom:12px; font-size:14px}
.intro ul{margin:6px 0 0 18px; padding:0}
.intro li{margin:2px 0}

/* Footer autor */
.footer{margin:24px 0; padding-top:12px; border-top:1px solid #e5e7eb; text-align:center; font-size:12px; color:var(--muted)}

/* Vista de resultados en tarjetas para móvil */
.result-list{display:none; flex-direction:column; gap:12px; margin-top:12px}
.result-card{background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:12px}
.result-card.best{border-color:var(--accent2)}
.rc-header{display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; color:#6b21a8}
.rc-meta{display:flex; gap:8px; font-size:14px; opacity:.9}
.rc-votes{font-weight:700; color:var(--accent2)}
.rc-names{margin-top:6px; font-size:14px; word-break:break-word}

/* Mostrar tarjetas en móvil, tabla en desktop */
@media (max-width: 639px){
  .table-responsive{display:none}
  .result-list{display:flex}
  /* Centrado de la página de creación en móvil */
  .page-index .intro{ text-align:center }
  .page-index .intro ul{ display:block; text-align:left; margin-left:0; padding-left:0; list-style-position: inside }
  .page-index .card{ text-align:center }
  .page-index .card .row{ align-items:center }
  .page-index label{ text-align:center }
  .page-index #turnstile-container{ display:flex; justify-content:center }
  /* Centrado de la página de votación en móvil */
  .page-poll .card{ text-align:center }
  .page-poll .card .row{ align-items:center }
  .page-poll label{ text-align:center }
  .page-poll #turnstile-container{ display:flex; justify-content:center }
}

/* Desktop / tablet enhancements */
@media (min-width: 640px){
  .row{flex-direction:row; align-items:center}
  label{min-width:160px; margin-bottom:0}
  input, select{flex:1}
  button{width:auto}
  .table-responsive{display:block}
  .result-list{display:none}
}

/* Fila individual de fecha */
.fecha-row{display:flex; flex-direction:column; gap:8px; border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#ffffff}
.fecha-top{display:flex; align-items:center; gap:8px}
.fecha-actions{margin-left:auto; display:flex; gap:8px}
.fecha-actions .trash{
  color:#ef4444;
  cursor:pointer;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:4px 8px;
  font-size:18px;
  line-height:1;
}
.fecha-actions .trash:hover{color:#dc2626}
.fecha-actions .trash:active{transform:scale(0.96)}
.opciones{display:flex; gap:16px; font-size:14px}
/* Alinear input y texto lado a lado en opciones (merienda/cena) */
.opciones label{display:flex; align-items:center; gap:8px; margin:0}
.opciones input[type="checkbox"]{width:auto; flex:0 0 auto; margin:0}

/* Encabezado de resultados: título a la izquierda y botón a la derecha */
.result-header{display:flex; align-items:center; justify-content:space-between; gap:8px}
.result-header h2{margin:0}
.result-header button{width:auto}
.refresh-btn{padding:8px 10px; border-radius:12px; font-weight:700}
.refresh-btn:hover{filter:brightness(1.1)}
.refresh-btn:active{transform:scale(0.97)}
#refreshInfo{ text-align:right }

/* Estado de carga: rotación del icono */
.refresh-btn.loading{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#shareBtn{background:linear-gradient(135deg, var(--waFrom), var(--waTo)); box-shadow:0 6px 18px rgba(18,140,126,.25)}