@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Source+Serif+4:wght@400;500;600&display=swap');

:root {
    --crema: #F1EBE1;
    --bordo: #6B2C35;
    --bordo-oscuro: #4f2027;
    --texto: #2a2222;
    --borde: #d9cdb8;
    --blanco: #fffdf9;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
    margin: 0;
    background: var(--crema);
    color: var(--texto);
    font-family: 'Source Serif 4', Georgia, serif;
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--bordo);
    font-weight: 600;
    line-height: 1.15;
}

h1 { font-size: 2.6rem; margin: 0.3em 0; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }

a { color: var(--bordo); }

.encabezado {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.2rem 0.6rem;
    max-width: 900px;
    margin: 0 auto;
}

.logo-chico {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-horizontal {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.marca {
    display: flex;
    flex-direction: column;
}

.marca .nombre {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bordo);
}

.marca .lema {
    font-size: 0.95rem;
    color: var(--texto);
}

main, .pagina-angosta {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 1.2rem 3rem;
}

.pagina-angosta { max-width: 640px; text-align: center; }

.cartel-demo {
    background: var(--bordo);
    color: var(--crema);
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem 0 2rem;
}


.boton-grande, button.boton-grande, input.boton-grande {
    display: inline-block;
    background: var(--bordo);
    color: var(--crema);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    min-height: 54px;
    text-align: center;
    transition: background 0.15s ease;
}

.boton-grande:hover { background: var(--bordo-oscuro); }

.boton-secundario {
    background: transparent;
    color: var(--bordo);
    border: 2px solid var(--bordo);
}

.boton-secundario:hover { background: rgba(107,44,53,0.08); }

.pasos {
    display: grid;
    gap: 1.2rem;
    margin: 2rem 0;
}

@media (min-width: 640px) {
    .pasos { grid-template-columns: repeat(3, 1fr); }
}

.paso {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
}

.paso .numero {
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    line-height: 2.2rem;
    border-radius: 50%;
    background: var(--bordo);
    color: var(--crema);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.proximas-mesas {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.mesa-card {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1rem 1.2rem;
}

.mesa-card .fecha { color: var(--bordo); font-weight: 600; }

footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
    color: #6b6258;
}

/* Formulario */

.barra-progreso {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.barra-progreso .segmento {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--borde);
}

.barra-progreso .segmento.activo { background: var(--bordo); }

.campo { margin-bottom: 1.3rem; text-align: left; }

.campo label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.campo .ayuda {
    font-size: 0.9rem;
    color: #6b6258;
    margin-top: 0.3rem;
}

input[type=text], input[type=date], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
    width: 100%;
    font-size: 1.05rem;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--borde);
    font-family: inherit;
    background: var(--blanco);
    color: var(--texto);
}

textarea { resize: vertical; min-height: 5rem; }

fieldset { border: none; padding: 0; margin: 0; }

.radios, .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--borde);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: var(--blanco);
    font-size: 1rem;
    user-select: none;
}

.chip input { display: none; }

.chip.seleccionado {
    background: var(--bordo);
    border-color: var(--bordo);
    color: var(--crema);
}

.radio-grande {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--borde);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    cursor: pointer;
    background: var(--blanco);
}

.radio-grande.seleccionado { border-color: var(--bordo); background: #f8ece9; }

.radio-grande input { width: 1.2rem; height: 1.2rem; }

.error-campo {
    color: var(--bordo);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.3rem;
}

.mensaje-error-form {
    background: #f8ece9;
    border: 1px solid var(--bordo);
    color: var(--bordo);
    padding: 0.9rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.botonera-form {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.honeypot { position: absolute; left: -9999px; }

.dos-columnas {
    display: grid;
    gap: 1rem;
}

@media (min-width: 560px) {
    .dos-columnas { grid-template-columns: 1fr 1fr; }
}

/* Admin */

.admin-shell { max-width: 1200px; margin: 0 auto; padding: 1rem 1.2rem 3rem; }

.admin-login { max-width: 400px; margin: 4rem auto; text-align: center; }

.admin-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.admin-tabs button {
    background: var(--blanco);
    border: 1px solid var(--borde);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
}

.admin-tabs button.activo { background: var(--bordo); color: var(--crema); }

table.tabla-admin {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanco);
    font-size: 0.95rem;
}

table.tabla-admin th, table.tabla-admin td {
    border-bottom: 1px solid var(--borde);
    padding: 0.5rem 0.6rem;
    text-align: left;
}

table.tabla-admin th { color: var(--bordo); }

.filtros-admin {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filtros-admin input, .filtros-admin select {
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--borde);
}

.mesa-resultado {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.2rem;
}

.mesa-resultado .afinidad {
    display: inline-block;
    background: var(--bordo);
    color: var(--crema);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-weight: 700;
    margin-left: 0.5rem;
}

.integrante-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--borde);
}

.interes-comun { background: #f8ece9; padding: 0.1rem 0.4rem; border-radius: 4px; }

.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 50;
}

.modal-caja {
    background: var(--crema);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}

.estrellas-picker {
    display: flex;
    gap: 0.3rem;
}

.estrellas-picker .estrella {
    background: none;
    border: none;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--borde);
    cursor: pointer;
    padding: 0;
}

.estrellas-picker .estrella.activa { color: var(--bordo); }

.oculto { display: none !important; }

.boton-chico, button.boton-chico, a.boton-chico {
    min-height: auto;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

.kpis-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.5rem;
}

@media (min-width: 900px) {
    .kpis-grid { grid-template-columns: repeat(4, 1fr); }
}

.kpi-card {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.kpi-valor {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--bordo);
    line-height: 1;
}

.kpi-etiqueta { font-size: 0.95rem; margin-top: 0.3rem; }

.kpi-nota { font-size: 0.85rem; color: #6b6258; margin-top: 0.4rem; }

.graficos-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1fr;
    margin-bottom: 1.5rem;
}

@media (min-width: 900px) {
    .graficos-grid { grid-template-columns: repeat(2, 1fr); }
    .grafico-card-ancho { grid-column: span 2; }
}

.grafico-card {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1rem;
    height: 280px;
}

.grafico-card-ancho { height: 380px; }

.grafico-card h3 { margin-top: 0; font-size: 1.15rem; }

.grafico-card canvas { max-height: 210px; }

.grafico-card-ancho canvas { max-height: 310px; }

.atencion-card {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1rem 1.2rem;
}

.atencion-card h4 { margin-bottom: 0.3rem; }

.lista-mini { margin: 0.2rem 0 1rem; padding-left: 1.2rem; }

.lista-mini li { margin-bottom: 0.2rem; }

.badge {
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--borde);
    color: var(--texto);
    vertical-align: middle;
    margin-left: 0.4rem;
}

.badge-realizado { background: var(--bordo); color: var(--crema); }
.badge-abierto { background: #8a9a6b; color: var(--crema); }
.badge-cancelado { background: #a33; color: var(--crema); }

.evento-card {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

.evento-card:hover { border-color: var(--bordo); }

.resumen-evento {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    margin: 1rem 0;
    font-weight: 600;
}

.config-card {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.chips-etiquetas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }

.chip-etiqueta {
    background: #f8ece9;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.9rem;
}

.chip-etiqueta button {
    background: none;
    border: none;
    color: var(--bordo);
    cursor: pointer;
    font-weight: 700;
    margin-left: 0.2rem;
}

.interes-ia { color: var(--bordo); font-style: italic; }

.nota-item {
    border-bottom: 1px dashed var(--borde);
    padding: 0.5rem 0;
}

.nota-meta { font-size: 0.85rem; color: #6b6258; }

.nota-meta button {
    background: none;
    border: none;
    color: var(--bordo);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.85rem;
}

.select-compacto {
    width: auto !important;
    flex-shrink: 0;
    margin-left: auto;
}

.input-compacto {
    width: 5rem !important;
}

.paginacion { margin-top: 0.8rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

@media (max-width: 640px) {
    table.tabla-admin { font-size: 0.85rem; }
    table.tabla-admin th, table.tabla-admin td { padding: 0.35rem 0.3rem; }
}