/* =========================================================
   Johnefe Barbería - Hoja de estilos
   Paleta: carbón + dorado mostaza + crema (sin rojo/azul típicos)
   Todo está en variables CSS: cambia estos valores para
   re-usar el sitio con otra paleta si lo deseas.
   ========================================================= */

:root {
    --color-fondo: #f6efe1;
    --color-superficie: #ffffff;
    --color-superficie-alterna: #eee2c9;
    --color-texto: #2a231c;
    --color-texto-suave: #5c5148;
    --color-carbon: #211c17;
    --color-carbon-suave: #33291f;
    --color-acento: #c8963c;
    --color-acento-oscuro: #a3761f;
    --color-whatsapp: #25d366;
    --color-exito: #3f7d4f;
    --color-error: #b3432b;
    --radio: 12px;
    --sombra: 0 8px 24px rgba(33, 28, 23, 0.10);
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--fuente);
    background: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.55;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; color: var(--color-carbon); }
p { margin: 0 0 1em; }
a { color: inherit; }

.contenedor {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Botones --- */
.boton {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton-primario { background: var(--color-acento); color: var(--color-carbon); }
.boton-primario:hover { background: var(--color-acento-oscuro); }
.boton-secundario { background: var(--color-carbon); color: #fff; }
.boton-whatsapp { background: var(--color-whatsapp); color: #06301a; }
.boton-chico { padding: 8px 16px; font-size: 0.9rem; }
.boton-peligro-chico { background: transparent; color: var(--color-error); border: 1px solid var(--color-error); padding: 6px 12px; border-radius: 8px; font-size: 0.85rem; cursor: pointer; }
.boton[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* --- Cabecera --- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(246, 239, 225, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(33,28,23,0.08);
    /* Truco para Safari/iOS: los elementos "sticky" a veces no reciben los
       toques (taps) en sus botones/enlaces mientras están en su posición de
       reposo (sin haber hecho scroll), por un error conocido de WebKit al
       calcular el área táctil. Forzar aquí su propia capa de composición
       soluciona ese problema sin afectar a ningún otro navegador. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
.cabecera-interior {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-insignia {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-carbon); color: var(--color-acento);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; letter-spacing: 0.5px;
}
.logo-texto { font-weight: 700; color: var(--color-carbon); font-size: 1.05rem; }
.nav-principal { display: flex; gap: 22px; }
.nav-principal a { text-decoration: none; color: var(--color-texto-suave); font-weight: 500; }
.nav-principal a:hover { color: var(--color-carbon); }

/* --- Botón hamburguesa (solo aparece en pantallas angostas) --- */
.boton-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.boton-menu span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-carbon);
    transition: transform .2s ease, opacity .2s ease;
    /* Para que el toque siempre lo reciba el <button>, nunca una de estas
       líneas internas. */
    pointer-events: none;
}
/* Al abrir, las tres líneas se convierten en una "X" */
.boton-menu.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.boton-menu.abierto span:nth-child(2) { opacity: 0; }
.boton-menu.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 780px) {
    .boton-menu { display: flex; }

    /* En móvil, el botón rápido de WhatsApp del encabezado se oculta: ya existe
       el botón flotante de WhatsApp fijo en pantalla para el mismo propósito. */
    .cabecera-interior > .boton-whatsapp.boton-chico { display: none; }

    .nav-principal {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        background: var(--color-fondo);
        border-bottom: 1px solid rgba(33, 28, 23, 0.08);
        box-shadow: var(--sombra);
        transition: max-height .25s ease;
    }
    .nav-principal.abierto {
        max-height: 320px;
    }
    .nav-principal a {
        padding: 14px 20px;
        border-top: 1px solid rgba(33, 28, 23, 0.08);
    }
}

/* --- Hero --- */
.hero {
    background: linear-gradient(180deg, var(--color-carbon) 0%, var(--color-carbon-suave) 100%);
    color: #f4ead8;
    padding: 72px 0 64px;
}
.hero-interior { max-width: 720px; }
.hero-kicker { color: var(--color-acento); text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.8rem; font-weight: 700; }
.hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.hero-texto { color: #d9cdb8; font-size: 1.05rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 14px; }
.hero-nota { color: #b7aa90; font-size: 0.9rem; }

/* --- Secciones --- */
.seccion { padding: 64px 0; }
.seccion-alterna { background: var(--color-superficie-alterna); }
.subtitulo-seccion { color: var(--color-texto-suave); max-width: 640px; }

.grilla-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 24px;
}
.tarjeta-servicio {
    background: var(--color-superficie);
    border-radius: var(--radio);
    padding: 22px;
    box-shadow: var(--sombra);
    border-top: 3px solid var(--color-acento);
}
.tarjeta-servicio h3 { font-size: 1.05rem; }
.tarjeta-servicio .duracion { color: var(--color-texto-suave); font-size: 0.9rem; margin-bottom: 4px; }
.tarjeta-servicio .precio { font-weight: 700; color: var(--color-acento-oscuro); font-size: 1.15rem; margin: 0; }

.sobre-grilla, .ubicacion-grilla {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: center;
}
@media (max-width: 720px) {
    .sobre-grilla, .ubicacion-grilla { grid-template-columns: 1fr; }
}
.insignia-experiencia {
    background: var(--color-carbon);
    color: var(--color-acento);
    border-radius: var(--radio);
    padding: 30px;
    text-align: center;
}
.insignia-experiencia .numero { display: block; font-size: 2.6rem; font-weight: 800; }
.insignia-experiencia .texto { color: #ece0c8; font-size: 0.95rem; }

.mapa-envoltorio { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.mapa-envoltorio iframe { width: 100%; height: 260px; border: 0; display: block; }

/* --- Formulario de agenda --- */
.formulario-cita {
    background: var(--color-superficie);
    border-radius: var(--radio);
    padding: 28px;
    margin-top: 24px;
    box-shadow: var(--sombra);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 720px;
}
.formulario-cita .campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formulario-cita label { font-weight: 600; font-size: 0.9rem; color: var(--color-carbon); }
.formulario-cita input, .formulario-cita select {
    width: 100%;
    max-width: 100%;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid #d8cdb8;
    font-size: 1rem;
    background: #fffdf9;
}
.formulario-cita button { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.mensaje-formulario { grid-column: 1 / -1; margin: 0; font-weight: 600; }
#enlace-agregar-calendario { grid-column: 1 / -1; justify-self: start; text-decoration: none; }
.mensaje-formulario-exito { color: var(--color-exito); }
.mensaje-formulario-error { color: var(--color-error); }
@media (max-width: 640px) {
    .formulario-cita { grid-template-columns: 1fr; }
}

/* --- Pie --- */
.pie { background: var(--color-carbon); color: #cfc2a8; padding: 28px 0; margin-top: 20px; }
.pie-interior { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.pie a { color: var(--color-acento); text-decoration: none; }

/* --- WhatsApp flotante --- */
.whatsapp-flotante {
    position: fixed;
    bottom: 22px;
    right: 22px;
    background: var(--color-whatsapp);
    color: #06301a;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 30;
}

/* =========================================================
   Panel de administración
   ========================================================= */
.pagina-admin { background: var(--color-fondo); }
.topbar-admin {
    background: var(--color-carbon);
    color: #fff;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.topbar-admin h1 { color: #fff; font-size: 1.1rem; margin: 0; }
.topbar-admin nav { display: flex; gap: 18px; }
.topbar-admin nav a { color: #d9cdb8; text-decoration: none; font-weight: 500; }
.topbar-admin nav a.activo, .topbar-admin nav a:hover { color: var(--color-acento); }

.contenido-admin { max-width: 1080px; margin: 0 auto; padding: 24px 20px 60px; }
.panel {
    background: var(--color-superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px;
    margin-bottom: 22px;
}
.panel h2 { font-size: 1.1rem; }
.ayuda { color: var(--color-texto-suave); font-size: 0.9rem; }

.formulario-en-linea { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.formulario-en-linea label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.formulario-en-linea input, .formulario-en-linea select {
    padding: 9px 10px; border-radius: 8px; border: 1px solid #d8cdb8; font-size: 0.95rem;
}

.tabla-scroll { overflow-x: auto; margin-top: 14px; }
.tabla-citas { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla-citas th, .tabla-citas td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #ece2cc; white-space: nowrap; }
.tabla-citas .acciones { display: flex; gap: 8px; align-items: center; }
.tabla-citas select { padding: 6px 8px; border-radius: 6px; border: 1px solid #d8cdb8; }

.badge { padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.estado-pendiente { background: #f3e3bd; color: #7a5b16; }
.estado-confirmada { background: #dcead9; color: var(--color-exito); }
.estado-cancelada { background: #f3d9d0; color: var(--color-error); }
.estado-completada { background: #e0dcf0; color: #4b3f8c; }

.lista-bloqueos { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lista-bloqueos li { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; }
.inline { display: inline; }

.mensaje-exito { background: #dcead9; color: var(--color-exito); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.mensaje-error { background: #f3d9d0; color: var(--color-error); padding: 10px 14px; border-radius: 8px; font-weight: 600; }

.resultados-prueba { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.resultado-prueba { border-radius: 10px; padding: 14px 16px; }
.resultado-prueba.resultado-ok { background: #dcead9; }
.resultado-prueba.resultado-mal { background: #f3d9d0; }
.resultado-titulo { margin: 0 0 4px; }
.resultado-detalle { margin: 0; font-size: 0.9rem; color: var(--color-texto-suave); word-break: break-word; }
.resultado-metodo { font-size: 0.8rem; }
.ayuda-diagnostico { margin-top: 14px; }

/* --- Login --- */
.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.tarjeta-login {
    background: var(--color-superficie);
    padding: 36px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.tarjeta-login h1 { font-size: 1.2rem; }
.tarjeta-login .subtitulo { color: var(--color-texto-suave); margin-bottom: 20px; }
.tarjeta-login form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.tarjeta-login label { font-weight: 600; font-size: 0.9rem; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-login input { padding: 10px; border-radius: 8px; border: 1px solid #d8cdb8; }