/* ==========================================================================
   [SALÓN-11] ESTILOS — PALETA AZUL, MODO OSCURO
   --------------------------------------------------------------------------
   Reglas que se siguen en todo el archivo:

   1. CERO IMÁGENES. Ni logos, ni iconos en PNG, ni fuentes descargadas. Todo
      son formas hechas con CSS y caracteres del teclado. Motivo: la app tiene
      que abrir con una raya de señal y pesar lo mínimo.
   2. MODO OSCURO POR DEFECTO. En pantallas OLED los píxeles negros están
      apagados: gasta menos batería, que importa cuando se va la luz.
   3. Todos los colores salen de las variables de :root. Para cambiar la
      apariencia completa de la app solo hay que tocar ese bloque.
   ========================================================================== */

:root {
    /* --- Fondos (del más oscuro al más claro) --- */
    --fondo:        #0B1220;
    --superficie:   #131C2E;
    --superficie-2: #1B2739;
    --borde:        #25344B;

    /* --- Azules (el color de marca) --- */
    --azul:         #2563EB;
    --azul-presion: #1D4ED8;
    --azul-claro:   #38BDF8;
    --azul-suave:   rgba(37, 99, 235, 0.16);
    --azul-borde:   rgba(56, 189, 248, 0.45);

    /* --- Texto --- */
    --texto:       #E6EDF7;
    --texto-tenue: #93A4BF;
    --texto-débil: #64748B;

    /* --- Estados --- */
    --verde: #22C55E;
    --rojo:  #EF4444;
    --ambar: #F59E0B;

    /* --- Medidas --- */
    --radio:       14px;
    --radio-chico: 10px;
    --alto-toque:  52px;   /* mínimo cómodo para un dedo */

    /* Zonas seguras (muesca del teléfono, barra de gestos, Telegram) */
    --seguro-arriba: 0px;
    --seguro-abajo:  0px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
}

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Un degradado muy sutil da profundidad sin costar un solo byte de imagen */
    background-image: radial-gradient(1200px 600px at 50% -20%, #16233A 0%, #0B1220 60%);
}

.oculto { display: none !important; }

/* Utilidad que usan varias pantallas */
.centrado { text-align: center; }
.tenue { color: var(--texto-tenue); }
.pequeno { font-size: 13px; }
.espacio-arriba { margin-top: 16px; }


/* ==========================================================================
   CABECERA E INDICADOR DE CONEXIÓN
   ========================================================================== */
#cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: calc(12px + var(--seguro-arriba)) 14px 12px 14px;
    background: rgba(11, 18, 32, 0.92);
    border-bottom: 1px solid var(--borde);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.cabecera-izquierda {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#titulo-pantalla {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subtitulo {
    font-size: 12px;
    color: var(--texto-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.boton-icono {
    background: var(--superficie-2);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}
.boton-icono:active { background: var(--azul-suave); }

/* --- El punto verde / rojo --- */
.indicador {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 6px 12px 6px 10px;
    color: var(--texto-tenue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.indicador:active { background: var(--azul-suave); }

.punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--texto-débil);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Verde: hay internet de verdad (no solo lo que dice el navegador) */
.punto-en-linea {
    background: var(--verde);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* Rojo: no hay conexión. Late despacio para que se note sin molestar. */
.punto-sin-linea {
    background: var(--rojo);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
    animation: latido 2s ease-in-out infinite;
}

/* Azul: comprobando o sincronizando */
.punto-comprobando,
.punto-sincronizando {
    background: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
    animation: latido 1s ease-in-out infinite;
}

@keyframes latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.texto-conexion { white-space: nowrap; }


/* --- Barra de "hay cosas esperando internet" --- */
.barra-pendientes {
    background: rgba(245, 158, 11, 0.14);
    border-bottom: 1px solid rgba(245, 158, 11, 0.35);
    color: #FCD34D;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    text-align: center;
    flex-shrink: 0;
}


/* ==========================================================================
   ZONA DE PANTALLA (lo que cambia)
   ========================================================================== */
#pantalla {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 14px 24px 14px;
    -webkit-overflow-scrolling: touch;
}

/* Cuando hay botones fijos abajo hay que dejarles sitio o tapan el contenido */
body.con-barra-inferior #pantalla { padding-bottom: 110px; }
body.con-boton-flotante  #pantalla { padding-bottom: 110px; }

.titulo-seccion {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.texto-guia {
    color: var(--texto-tenue);
    font-size: 14px;
    margin-bottom: 18px;
}


/* ==========================================================================
   TARJETAS
   ========================================================================== */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px;
    margin-bottom: 12px;
}

.tarjeta-titulo {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--azul-claro);
    margin-bottom: 12px;
}


/* ==========================================================================
   BOTONES
   ========================================================================== */
.boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--alto-toque);
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.08s ease, background-color 0.15s ease;
}
.boton:active { transform: scale(0.985); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
.boton:disabled:active { transform: none; }

.boton-primario {
    background: var(--azul);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32);
}
.boton-primario:active { background: var(--azul-presion); }

.boton-secundario {
    background: var(--superficie-2);
    color: var(--texto);
    border-color: var(--borde);
}
.boton-secundario:active { background: var(--azul-suave); }

.boton-fantasma {
    background: transparent;
    color: var(--azul-claro);
    border-color: transparent;
    font-weight: 600;
    box-shadow: none;
}
.boton-fantasma:active { background: var(--azul-suave); }

.boton-peligro {
    background: transparent;
    color: var(--rojo);
    border-color: rgba(239, 68, 68, 0.4);
}
.boton-peligro:active { background: rgba(239, 68, 68, 0.14); }

.boton-chico {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 14px;
    width: auto;
}


/* --- Botones grandes del menú del dueño --- */
.boton-menu {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px;
    margin-bottom: 10px;
    color: var(--texto);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.08s ease, border-color 0.15s ease;
}
.boton-menu:active {
    transform: scale(0.99);
    border-color: var(--azul-borde);
    background: var(--superficie-2);
}

/* El "icono" es un cuadrado azul con un carácter dentro: cero imágenes */
.boton-menu .simbolo {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--azul-suave);
    border: 1px solid var(--azul-borde);
    color: var(--azul-claro);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El cuerpo apila nombre y detalle. Son <span>, que por defecto van en línea:
   sin esto, "Agenda" y "Sin citas hoy" saldrían pegados en el mismo renglón. */
.boton-menu .cuerpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.boton-menu .nombre { display: block; font-size: 16px; font-weight: 700; }
.boton-menu .detalle { display: block; font-size: 13px; color: var(--texto-tenue); }
.boton-menu .flecha { color: var(--texto-débil); font-size: 20px; }

/* Negocio que todavía no está disponible: se ve, pero no se puede tocar.
   Sirve para que se sepa qué viene sin prometer algo que aún no funciona. */
.boton-menu.apagado {
    opacity: 0.5;
    cursor: not-allowed;
}
.boton-menu.apagado:active {
    transform: none;
    background: var(--superficie);
    border-color: var(--borde);
}


/* ==========================================================================
   BARRA INFERIOR FIJA Y BOTÓN FLOTANTE
   ========================================================================== */
.barra-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    gap: 10px;
    padding: 12px 14px calc(12px + var(--seguro-abajo)) 14px;
    background: rgba(11, 18, 32, 0.96);
    border-top: 1px solid var(--borde);
    backdrop-filter: blur(8px);
}
.barra-inferior .boton { flex: 1; }

/* El "Guardar" azul grande de la esquina inferior derecha (vista de clienta) */
.boton-flotante {
    position: fixed;
    right: 16px;
    bottom: calc(18px + var(--seguro-abajo));
    z-index: 60;
    min-width: 148px;
    min-height: 58px;
    padding: 0 30px;
    border: none;
    border-radius: 999px;
    background: var(--azul);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
    transition: transform 0.1s ease, opacity 0.15s ease, background-color 0.15s ease;
}
.boton-flotante:active { transform: scale(0.96); background: var(--azul-presion); }
.boton-flotante:disabled {
    background: var(--superficie-2);
    color: var(--texto-débil);
    box-shadow: none;
    cursor: not-allowed;
}
.boton-flotante:disabled:active { transform: none; }


/* ==========================================================================
   FILAS DE OPCIÓN CON CÍRCULO DE SELECCIÓN
   (la lista vertical de días y horas que ve la clienta)
   ========================================================================== */
.fila-opcion {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--superficie);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px 16px;
    margin-bottom: 10px;
    color: var(--texto);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.fila-opcion:active { transform: scale(0.995); }

/* El círculo de la izquierda: un aro que se rellena de azul al elegir */
.fila-opcion .circulo {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--texto-débil);
    position: relative;
    transition: border-color 0.15s ease;
}
.fila-opcion .circulo::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--azul);
    transform: scale(0);
    transition: transform 0.15s ease;
}

.fila-opcion.elegida {
    border-color: var(--azul);
    background: var(--azul-suave);
}
.fila-opcion.elegida .circulo { border-color: var(--azul); }
.fila-opcion.elegida .circulo::after { transform: scale(1); }

.fila-opcion .contenido { flex: 1; min-width: 0; }
.fila-opcion .principal { font-size: 16px; font-weight: 700; }
.fila-opcion .secundario { font-size: 13px; color: var(--texto-tenue); margin-top: 2px; }
.fila-opcion .lateral { font-size: 15px; font-weight: 700; color: var(--azul-claro); }


/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.campo { margin-bottom: 14px; }

.etiqueta {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-tenue);
    margin-bottom: 6px;
}

.entrada {
    width: 100%;
    min-height: var(--alto-toque);
    padding: 13px 14px;
    background: var(--superficie-2);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: inherit;
    font-size: 16px;  /* 16px evita que iOS haga zoom al enfocar */
    outline: none;
    transition: border-color 0.15s ease;
}
.entrada::placeholder { color: var(--texto-débil); }
.entrada:focus { border-color: var(--azul); }

select.entrada {
    appearance: none;
    -webkit-appearance: none;
    /* Flechita dibujada con un degradado: sin archivo de imagen */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--texto-tenue) 50%),
        linear-gradient(135deg, var(--texto-tenue) 50%, transparent 50%);
    background-position: right 20px center, right 14px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

textarea.entrada { min-height: 80px; resize: vertical; line-height: 1.45; }


/* --- Fila de precio: nombre a la izquierda, $ y campo a la derecha --- */
.fila-precio {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 10px 12px;
    margin-bottom: 8px;
}

/* Cuando la técnica ya tiene precio se marca con un filo azul a la izquierda */
.fila-precio.con-precio {
    border-color: var(--azul-borde);
    box-shadow: inset 3px 0 0 var(--azul);
}

.fila-precio .nombre-tecnica {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
}

.caja-dinero {
    display: flex;
    align-items: center;
    width: 108px;
    flex-shrink: 0;
    background: var(--superficie-2);
    border: 1.5px solid var(--borde);
    border-radius: 8px;
    padding-left: 10px;
    transition: border-color 0.15s ease;
}
.caja-dinero:focus-within { border-color: var(--azul); }
.caja-dinero .signo { color: var(--texto-tenue); font-weight: 700; font-size: 15px; }
.caja-dinero input {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--texto);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    padding: 11px 10px 11px 4px;
}

.caja-duracion {
    display: flex;
    align-items: center;
    width: 86px;
    flex-shrink: 0;
    background: var(--superficie-2);
    border: 1.5px solid var(--borde);
    border-radius: 8px;
}
.caja-duracion:focus-within { border-color: var(--azul); }
.caja-duracion input {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--texto);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    padding: 11px 2px 11px 8px;
}
.caja-duracion .unidad {
    color: var(--texto-débil);
    font-size: 12px;
    font-weight: 700;
    padding-right: 9px;
}

.encabezado-columnas {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--texto-débil);
    margin-bottom: 6px;
    padding-right: 12px;
}
.encabezado-columnas .col-precio { width: 108px; text-align: center; }
.encabezado-columnas .col-duracion { width: 86px; text-align: center; }


/* --- Interruptor de días de trabajo --- */
.fila-dia {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 10px 12px;
    margin-bottom: 8px;
}
.fila-dia .nombre-dia { width: 88px; flex-shrink: 0; font-size: 14px; font-weight: 700; }
.fila-dia.cerrado { opacity: 0.5; }
.fila-dia .entrada { min-height: 42px; padding: 8px 10px; font-size: 15px; text-align: center; }

.interruptor {
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--superficie-2);
    border: 1.5px solid var(--borde);
    position: relative;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
.interruptor::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--texto-débil);
    transition: transform 0.18s ease, background-color 0.18s ease;
}
.interruptor.activo { background: var(--azul-suave); border-color: var(--azul); }
.interruptor.activo::after { transform: translateX(20px); background: var(--azul-claro); }


/* ==========================================================================
   PESTAÑAS (Uñas / Cejas / Pestañas — y Día / Semana en el balance)
   ========================================================================== */
.pestanas {
    display: flex;
    gap: 6px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 5px;
    margin-bottom: 16px;
}
.pestana {
    flex: 1;
    min-height: 40px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--texto-tenue);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.pestana.activa { background: var(--azul); color: #FFFFFF; }


/* ==========================================================================
   INSIGNIAS, LISTAS Y RESULTADOS
   ========================================================================== */
.insignia {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.insignia-azul   { background: var(--azul-suave); color: var(--azul-claro); border: 1px solid var(--azul-borde); }
.insignia-verde  { background: rgba(34, 197, 94, 0.15); color: #4ADE80; border: 1px solid rgba(34, 197, 94, 0.4); }
.insignia-ambar  { background: rgba(245, 158, 11, 0.15); color: #FCD34D; border: 1px solid rgba(245, 158, 11, 0.4); }
.insignia-roja   { background: rgba(239, 68, 68, 0.15); color: #FCA5A5; border: 1px solid rgba(239, 68, 68, 0.4); }

.separador-dia {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--texto-débil);
    margin: 18px 0 8px 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--borde);
}

/* Ojo con el `width: 100%`: estas filas son <button>, y un botón se encoge
   hasta el tamaño de su contenido aunque sea `display: flex`. Sin esto, las
   citas de la agenda salen de anchos distintos según lo largo que sea el
   nombre del servicio. */
.fila-cita {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--azul);
    border-radius: var(--radio-chico);
    padding: 12px 14px;
    margin-bottom: 8px;
    color: var(--texto);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.fila-cita.cancelada { border-left-color: var(--rojo); opacity: 0.55; }
.fila-cita.esperando { border-left-color: var(--ambar); border-style: dashed; }
.fila-cita:active { background: var(--superficie-2); }
.fila-cita .hora-cita { width: 78px; flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--azul-claro); }
.fila-cita .info-cita { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-cita .servicio-cita { display: block; font-size: 15px; font-weight: 700; }
.fila-cita .persona-cita { display: block; font-size: 13px; color: var(--texto-tenue); }

.vacio {
    text-align: center;
    padding: 36px 20px;
    color: var(--texto-tenue);
}
.vacio .simbolo-vacio { font-size: 34px; color: var(--texto-débil); margin-bottom: 10px; }


/* --- Números grandes del balance --- */
.cifra-grande {
    font-size: 38px;
    font-weight: 800;
    color: var(--azul-claro);
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.rejilla-cifras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.caja-cifra {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 14px;
    text-align: center;
}
.caja-cifra .valor { font-size: 24px; font-weight: 800; }
.caja-cifra .rotulo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--texto-tenue);
    margin-top: 3px;
}

.fila-desglose {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
}
.fila-desglose:last-child { border-bottom: none; }
.fila-desglose .valor-desglose { font-weight: 700; color: var(--azul-claro); white-space: nowrap; }


/* ==========================================================================
   PANTALLAS DE RESULTADO (Aprobado / En espera de conexión)
   ========================================================================== */
.resultado {
    text-align: center;
    padding: 26px 18px;
}

/* El "sello" redondo: un círculo con un carácter dentro, sin imágenes */
.sello {
    width: 92px;
    height: 92px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 700;
}
.sello-verde {
    background: rgba(34, 197, 94, 0.14);
    border: 2px solid var(--verde);
    color: var(--verde);
}
.sello-ambar {
    background: rgba(245, 158, 11, 0.14);
    border: 2px solid var(--ambar);
    color: var(--ambar);
    animation: latido 2s ease-in-out infinite;
}
.sello-azul {
    background: var(--azul-suave);
    border: 2px solid var(--azul);
    color: var(--azul-claro);
}

.resultado .titulo-resultado { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.resultado .mensaje-resultado {
    font-size: 15px;
    color: var(--texto-tenue);
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto 22px auto;
}

.recibo {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px;
    text-align: left;
    margin-bottom: 18px;
}
.recibo .linea-recibo {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
}
.recibo .linea-recibo:last-child { border-bottom: none; }
.recibo .rotulo-recibo { color: var(--texto-tenue); }
.recibo .valor-recibo { font-weight: 700; text-align: right; }


/* ==========================================================================
   MODALES Y AVISOS EMERGENTES
   ========================================================================== */
.capa-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(3, 7, 15, 0.78);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(3px);
}

.modal {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 20px 18px calc(20px + var(--seguro-abajo)) 18px;
    animation: subir 0.22s ease;
}
@keyframes subir {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.modal .agarradera {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--borde);
    margin: -6px auto 16px auto;
}
.modal .titulo-modal { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.modal .texto-modal { font-size: 14px; color: var(--texto-tenue); margin-bottom: 16px; line-height: 1.5; }
.modal .botones-modal { display: flex; gap: 10px; margin-top: 16px; }
.modal .botones-modal .boton { flex: 1; }


/* --- Avisos flotantes arriba --- */
.zona-avisos {
    position: fixed;
    top: calc(12px + var(--seguro-arriba));
    left: 12px;
    right: 12px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.aviso {
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--azul);
    border-radius: var(--radio-chico);
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: bajar 0.2s ease;
}
.aviso-ok    { border-left-color: var(--verde); }
.aviso-error { border-left-color: var(--rojo); }
.aviso-atencion { border-left-color: var(--ambar); }
.aviso.saliendo { animation: desvanecer 0.25s ease forwards; }

@keyframes bajar {
    from { transform: translateY(-14px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes desvanecer {
    to { transform: translateY(-14px); opacity: 0; }
}


/* ==========================================================================
   CARGANDO
   ========================================================================== */
.cargando-pantalla {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: var(--texto-tenue);
    font-size: 14px;
}

/* Rueda giratoria hecha solo con bordes CSS */
.rueda {
    width: 34px;
    height: 34px;
    border: 3px solid var(--borde);
    border-top-color: var(--azul);
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }


/* ==========================================================================
   PANTALLAS GRANDES (tablet / computadora)
   --------------------------------------------------------------------------
   Belleza la usa sobre todo la clienta desde el teléfono, así que el diseño
   está pensado para el teléfono. Pero en una tablet no puede verse como una
   tira estrecha en medio de una pantalla vacía.

   La solución no es estirarlo todo: una lista de 1200 px de ancho con el
   precio a un metro del nombre se lee peor, no mejor. Lo que se hace es
   ensanchar con cabeza y, cuando hay mucho sitio, repartir en dos columnas.
   ========================================================================== */

/* Tablet en vertical, o pantalla mediana. */
@media (min-width: 720px) {
    #pantalla {
        max-width: 780px;
        margin: 0 auto;
        width: 100%;
        padding: 22px 20px 28px 20px;
    }
    .barra-inferior {
        max-width: 780px;
        margin: 0 auto;
        border-radius: var(--radio) var(--radio) 0 0;
    }
    .boton-flotante {
        right: max(20px, calc(50vw - 390px + 20px));
        min-height: 64px;
        font-size: 19px;
    }

    /* Con más sitio, todo un poco más cómodo para el dedo. */
    .titulo-seccion { font-size: 26px; }
    .boton-menu { padding: 20px; }
    .fila-opcion { padding: 20px 18px; }
    .fila-opcion .principal { font-size: 17px; }
}

/* Tablet apaisada o pantalla ancha: dos columnas.
   El ancho de cada tarjeta se mantiene cómodo de leer y se aprovecha el
   espacio a lo ancho en vez de dejar media pantalla vacía. */
@media (min-width: 1000px) {
    #pantalla { max-width: 1080px; }
    .barra-inferior { max-width: 1080px; }
    .boton-flotante { right: max(20px, calc(50vw - 540px + 20px)); }

    /* Las listas LARGAS del dueño se reparten en dos columnas: llenar precios
       de 26 técnicas de una en una en una pantalla ancha es incómodo. */
    #filas-precios,
    #filas-horario {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
    }

    /* Las cifras del balance caben de cuatro en fondo. */
    .rejilla-cifras { grid-template-columns: repeat(4, 1fr); }

    /* Los negocios, de dos en dos: dos botones estirados de lado a lado con
       media pantalla vacía debajo se ve descuidado. */
    #lista-negocios {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
    }

    /* La lista de día y hora se queda en UNA columna a propósito, aunque haya
       sitio de sobra. Son tres opciones para elegir una: en dos columnas se
       leen peor y se pierde el "de arriba abajo" que hace que se entiendan
       de un vistazo. Aquí el espacio sobrante no es un problema que resolver. */
}


/* ==========================================================================
   AVISO DE PANTALLA COMPLETA (solo iPad y tablets)
   --------------------------------------------------------------------------
   Telegram a veces abre la mini app en una ventana pequeña y no obedece a la
   primera cuando se le pide agrandarla. Este botón aparece solo en ese caso:
   con un toque del dedo casi siempre sí funciona.
   ========================================================================== */
#aviso-pantalla-completa {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(18px + var(--seguro-abajo));
    z-index: 400;
    background: var(--azul);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
    animation: bajar 0.25s ease;
}
#aviso-pantalla-completa:active {
    background: var(--azul-presion);
    transform: translateX(-50%) scale(0.97);
}

/* Quien prefiera menos animación (ajuste de accesibilidad del sistema) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Adulto Mayor (práctica): iframe a pantalla útil dentro del menú teleCHAT */
#marco-adulto-mayor {
    margin: -4px -2px 0;
    height: calc(100vh - 150px);
    min-height: 420px;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
}
#marco-adulto-mayor iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #111;
}
body.modo-adulto-mayor #boton-flotante { display: none !important; }

/* ==========================================================================
   [SALÓN-37] EL CANDADO DE ENTRADA
   --------------------------------------------------------------------------
   La puerta que sale cuando alguien abre la app sin tener permiso. Tapa la
   pantalla entera a propósito: si dejara ver algo por detrás, no serviría de
   nada. No lleva ninguna casilla donde escribir: quien no está en la lista no
   tiene nada que intentar. Usa los mismos colores que el resto.
   ========================================================================== */
.candado {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--fondo);
    background-image: radial-gradient(1200px 600px at 50% -20%, #16233A 0%, #0B1220 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-top: calc(24px + var(--seguro-arriba));
    padding-bottom: calc(24px + var(--seguro-abajo));
}

.candado-caja {
    width: 100%;
    max-width: 380px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 28px 22px;
    text-align: center;
}

.candado-titulo {
    font-size: 22px;
    font-weight: 700;
    color: var(--texto);
    margin-bottom: 10px;
}

.candado-texto {
    font-size: 15px;
    color: var(--texto-tenue);
    margin-bottom: 20px;
}

.candado-boton {
    width: 100%;
    height: var(--alto-toque);
    margin-top: 8px;
    background: var(--azul);
    border: none;
    border-radius: var(--radio-chico);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.candado-boton:active { background: var(--azul-presion); }
.candado-boton:disabled { opacity: 0.6; }