@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap");

:root {
    --arena: #ECE2D2;
    --superficie: #FAF6EF;
    --linea: #DCCCB4;
    --tierra: #4A3728;
    --tierra-media: #7A5E48;
    --dorado: #A8853F;
    --dorado-suave: #E9DAB8;
    --salvia: #5F7350;
    --salvia-suave: #E1E6D4;
    --alerta: #96503A;
    --alerta-suave: #F2DDD3;
    --fuente: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --arena: #1F1913;
        --superficie: #2A221A;
        --linea: #43372A;
        --tierra: #EFE4D2;
        --tierra-media: #BFA98E;
        --dorado: #D4B072;
        --dorado-suave: #3F3420;
        --salvia: #A9BC93;
        --salvia-suave: #2C3324;
        --alerta: #E2A08A;
        --alerta-suave: #43271E;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--arena);
    color: var(--tierra);
    font-family: var(--fuente);
    font-size: 1.0625rem;
    line-height: 1.55;
}

h1, h2 { font-weight: 500; letter-spacing: .01em; margin: 0; }
a { color: var(--tierra); }

:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.solo-lectores {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Cabecera ---------- */
.cabecera {
    display: flex; align-items: center; gap: 1rem;
    max-width: 52rem; margin: 0 auto; padding: 2rem 1.25rem 1.25rem;
}
.marca { width: 3.25rem; height: 3.25rem; color: var(--dorado); flex: none; }
.cabecera-texto { flex: 1; }
.cabecera h1 { font-size: 1.6rem; }
.cabecera p { margin: 0; color: var(--tierra-media); font-size: .95rem; }
.salir { font-size: .95rem; color: var(--tierra-media); }

.modo {
    font-size: .85rem; font-weight: 500; padding: .3rem .8rem; border-radius: 99px;
    white-space: nowrap;
}
.modo-prueba { background: var(--dorado-suave); color: var(--tierra); }
.modo-produccion { background: var(--salvia-suave); color: var(--salvia); }

/* ---------- Contenido ---------- */
.contenido { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: 14px;
    padding: 1.6rem 1.5rem;
    margin-bottom: 1.25rem;
}
.tarjeta h2 { font-size: 1.25rem; margin-bottom: .4rem; }
.ayuda { color: var(--tierra-media); margin: 0 0 1.25rem; max-width: 62ch; font-size: .97rem; }
.vacio { color: var(--tierra-media); margin: .5rem 0 0; }

.mensaje { padding: .85rem 1.1rem; border-radius: 10px; margin: 0 0 1.25rem; }
.mensaje-ok { background: var(--salvia-suave); color: var(--salvia); }
.mensaje-aviso { background: var(--dorado-suave); color: var(--tierra); }
.mensaje-error { background: var(--alerta-suave); color: var(--alerta); }

/* ---------- Formularios ---------- */
label { display: block; font-size: .95rem; margin: .9rem 0 .3rem; }
input[type="text"], input[type="password"], input[type="email"], input:not([type]), textarea {
    width: 100%; font: inherit; color: var(--tierra);
    background: var(--arena); border: 1px solid var(--linea); border-radius: 8px;
    padding: .6rem .75rem;
}
input:focus, textarea:focus { border-color: var(--dorado); outline: none; box-shadow: 0 0 0 3px var(--dorado-suave); }

.boton {
    display: inline-block; margin-top: 1.25rem;
    font: inherit; font-weight: 500; text-decoration: none;
    background: var(--tierra); color: var(--superficie);
    border: 0; border-radius: 99px; padding: .7rem 1.6rem; cursor: pointer;
}
.boton:hover { background: var(--tierra-media); }
.boton-secundario { background: transparent; color: var(--tierra); border: 1px solid var(--tierra-media); }
.boton-secundario:hover { background: var(--arena); }

.ingreso { max-width: 24rem; margin: 2rem auto; }

/* ---------- Lista de servicios ---------- */
.servicios-titulos, .servicio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9.5rem 5.5rem;
    gap: .75rem; align-items: center;
}
.servicios-titulos {
    font-size: .85rem; color: var(--tierra-media);
    padding: 0 0 .5rem; border-bottom: 1px solid var(--linea);
}
.servicios-titulos span:last-child { text-align: center; }
.servicio { padding: .85rem 0; border-bottom: 1px solid var(--linea); }
.servicio.pausado .campo-nombre, .servicio.pausado .campo-precio { opacity: .55; }

.campo-precio {
    display: flex; align-items: center;
    background: var(--arena); border: 1px solid var(--linea); border-radius: 8px;
    padding-left: .7rem;
}
.campo-precio:focus-within { border-color: var(--dorado); box-shadow: 0 0 0 3px var(--dorado-suave); }
.campo-precio span { color: var(--tierra-media); }
.campo-precio input {
    border: 0; background: transparent; box-shadow: none !important;
    font-variant-numeric: tabular-nums; text-align: right; padding-left: .3rem;
}

/* Interruptor disponible / pausado */
.interruptor { position: relative; margin: 0 auto; width: 3rem; height: 1.7rem; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pista {
    position: absolute; inset: 0; border-radius: 99px;
    background: var(--linea); transition: background .2s;
}
.pista::after {
    content: ""; position: absolute; top: .2rem; left: .2rem;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: var(--superficie); transition: transform .2s;
}
.interruptor input:checked + .pista { background: var(--salvia); }
.interruptor input:checked + .pista::after { transform: translateX(1.3rem); }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--dorado); outline-offset: 2px; }

.codigo { grid-column: 1 / -1; font-size: .9rem; }
.codigo summary { cursor: pointer; color: var(--tierra-media); width: max-content; }
.codigo p { margin: .5rem 0 .4rem; }
.codigo textarea { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; resize: vertical; }

/* ---------- Modo ---------- */
.modos { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.opcion {
    display: flex; align-items: center; gap: .6rem; margin: 0;
    border: 1px solid var(--linea); border-radius: 10px; padding: .7rem 1rem; cursor: pointer;
}
.opcion:has(input:checked) { border-color: var(--dorado); background: var(--dorado-suave); }
.opcion strong { display: block; font-weight: 500; }
.opcion span { font-size: .9rem; color: var(--tierra-media); }
.opcion input { accent-color: var(--tierra); }
.modos .boton { margin-top: 0; }

/* ---------- Tabla de pagos ---------- */
.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th { text-align: left; font-weight: 500; color: var(--tierra-media); padding: .5rem .6rem; border-bottom: 1px solid var(--linea); }
.tabla td { padding: .7rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla small { color: var(--tierra-media); }
.prueba { background: var(--dorado-suave); padding: 0 .4rem; border-radius: 4px; }

.estado { font-size: .85rem; padding: .15rem .6rem; border-radius: 99px; white-space: nowrap; }
.estado-aprobado { background: var(--salvia-suave); color: var(--salvia); }
.estado-pendiente { background: var(--dorado-suave); color: var(--tierra); }
.estado-rechazado { background: var(--alerta-suave); color: var(--alerta); }

.form-password { max-width: 24rem; }

/* ---------- Páginas de regreso ---------- */
.aviso {
    max-width: 34rem; margin: 12vh auto; padding: 2.5rem 1.5rem; text-align: center;
}
.aviso .marca { width: 4rem; height: 4rem; margin-bottom: 1.25rem; }
.aviso h1 { font-size: 1.8rem; margin-bottom: .75rem; }
.aviso p { color: var(--tierra-media); }

@media (max-width: 600px) {
    .cabecera { flex-wrap: wrap; row-gap: .75rem; }
    .cabecera-texto { flex-basis: calc(100% - 4.5rem); }
    .servicios-titulos { display: none; }
    .servicio { grid-template-columns: minmax(0, 1fr) 5.5rem; }
    .campo-nombre { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .pista, .pista::after { transition: none; }
}

/* ---------- Diagnóstico ---------- */
.eventos { list-style: none; margin: 0; padding: 0; font-size: .88rem; max-height: 18rem; overflow-y: auto; border-top: 1px solid var(--linea); }
.eventos li { padding: .45rem 0; border-bottom: 1px solid var(--linea); color: var(--tierra-media); overflow-wrap: anywhere; }

.datos-cliente { margin-top: .35rem; font-size: .85rem; }
.datos-cliente summary { cursor: pointer; color: var(--tierra-media); }
.datos-cliente dl { margin: .4rem 0 0; }
.datos-cliente dt { color: var(--tierra-media); }
.datos-cliente dd { margin: 0 0 .35rem; }

/* Accesos a Volver a vos */
.acceso-manual { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: end; margin: 0 0 1.25rem; }
.acceso-manual label { margin-top: 0; }
.acceso-manual .boton { margin-top: 0; }
.acciones-acceso { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.boton-chico { font: inherit; font-size: .82rem; background: transparent; color: var(--tierra); border: 1px solid var(--tierra-media); border-radius: 99px; padding: .3rem .8rem; cursor: pointer; }
.boton-chico:hover { background: var(--arena); }
.datos-cliente textarea { font-size: .78rem; margin-top: .4rem; }
@media (max-width: 600px) { .acceso-manual { grid-template-columns: 1fr; } }

/* Reseñas en el panel */
.resenas-admin { list-style: none; margin: 0; padding: 0; }
.resena-admin { border-top: 1px solid var(--linea); padding: .9rem 0; }
.resena-admin p { margin: .5rem 0; white-space: normal; overflow-wrap: anywhere; }
.resena-admin small { color: var(--tierra-media); display: block; }
.resena-cabecera { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.resena-cabecera span:not(.estado) { color: var(--tierra-media); font-size: .9rem; }
.resena-pendiente { background: linear-gradient(90deg, var(--dorado-suave) 0 3px, transparent 3px); padding-left: .9rem; }
.boton-chico-fuerte { background: var(--tierra); color: var(--superficie); border-color: var(--tierra); }
.boton-chico-fuerte:hover { background: var(--tierra-media); }