/* Ambientaza · las cuentas de cliente: la entrada en la barra, la ventana para entrar o crear
   la cuenta, «Mi cuenta» (cuenta.html) y el panel de pedidos (admin.html). El mismo lenguaje del
   pedido (css/pedido.css): tipografía del sistema, tarjetas blancas redondeadas, campos grandes. */
.oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══════════ La entrada en la barra ═══════════ */
.barra__cuenta { flex: none; display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; margin-right: -.45rem; min-height: 42px; padding: .2rem .45rem; border-radius: 999px; font-size: .8rem; font-weight: 560; font-stretch: 108%; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: background .2s; }
.barra__cuenta:hover { background: rgba(20, 26, 19, .07); }
.en-cine .barra__cuenta:hover { background: rgba(239, 234, 223, .14); }
.barra__avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.barra__avatar svg { width: 19px; height: 19px; }
.barra__cuenta.con-sesion .barra__avatar { box-shadow: none; background: #2F6B3A; color: #fff; font: 600 .74rem/1 var(--ios); letter-spacing: .02em; }
.barra__cuenta.con-sesion .barra__avatar b { font-weight: 600; }
.barra__cuenta-t { display: none; }
@media (min-width: 900px) {
  .barra__enlaces { margin-inline: auto; }
  .barra__cuenta { margin-left: 0; margin-right: -.7rem; }
}
/* entre 900 y 1239 px la barra no cabía con el enlace nuevo: se aprietan un poco los espacios */
@media (min-width: 900px) and (max-width: 1239px) {
  .barra { gap: 1rem; }
  .barra__enlaces { gap: 1.35rem; font-size: .76rem; }
  .barra__cuenta { padding: .15rem; margin-right: -.35rem; }
}
/* el rótulo «Entrar» / «Mi cuenta» solo cuando sobra espacio */
@media (min-width: 1360px) { .barra__cuenta-t { display: inline; } .barra__cuenta { padding-right: .8rem; } }
/* teléfono: el ícono entra apretando un poco la barra (sin él, «Cotizar mi proyecto» ya iba justo) */
@media (max-width: 699px) {
  .barra { gap: .6rem; }
  .barra .btn--chico { padding-inline: .72em; letter-spacing: .04em; }
  .barra__cuenta { min-height: 40px; margin-right: -.25rem; padding: 0; }
  .barra__avatar { width: 30px; height: 30px; }
  .barra__avatar svg { width: 18px; height: 18px; }
}
@media (max-width: 409px) {
  .barra { gap: .45rem; }
  .barra .marca { font-size: 1.16rem; }
  .barra .btn--chico { font-size: .6rem; letter-spacing: .03em; padding-inline: .62em; }
  .barra__avatar { width: 28px; height: 28px; }
}

/* ═══════════ La ventana para entrar: en web un panel; en el teléfono una hoja ═══════════ */
.entrada { padding: 0; border: 0; margin: auto; width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); background: transparent; color: #141A13; font-family: var(--ios); overflow: visible; }
.entrada::backdrop { background: rgba(10, 14, 11, .46); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
.entrada[open] { animation: entrada-aparece .34s cubic-bezier(.2, .9, .25, 1); }
.entrada[open]::backdrop { animation: entrada-velo .25s ease-out; }
.entrada.es-cerrando { animation: entrada-se-va .17s ease-in forwards; }
.entrada.es-cerrando::backdrop { animation: entrada-velo .17s ease-in reverse forwards; }
@keyframes entrada-aparece { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes entrada-se-va { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes entrada-velo { from { opacity: 0; } }
.entrada .entrada__caja { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
html.con-entrada, html.con-entrada body { overflow: hidden; }

.entrada__caja { position: relative; background: #F7F6F2; border-radius: 28px; box-shadow: 0 40px 100px rgba(10, 14, 11, .34), 0 0 0 1px rgba(20, 26, 19, .06); font-family: var(--ios); color: #141A13; }
.entrada__cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: 14px 14px 0; }
.entrada__cab .entrada__cerrar { display: grid; margin-left: auto; }
.entrada__atras { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .5rem; border: 0; background: none; color: #2F6B3A; font: 500 1rem var(--ios); }
.entrada__atras svg { width: 9px; height: 15px; }
.entrada__cuerpo { display: grid; padding: 6px 32px 26px; }
.entrada__caja--suelta .entrada__cuerpo { padding-top: 32px; }
.entrada__sello { justify-self: center; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(20, 26, 19, .1), 0 0 0 1px rgba(20, 26, 19, .05); }
.entrada__sello svg { width: 32px; height: 32px; }
.entrada__titulo { margin-top: 18px; max-width: none; text-align: center; font: 700 1.6rem/1.15 var(--ios); font-stretch: normal; letter-spacing: -.025em; text-wrap: balance; }
.entrada__sub { margin: 8px auto 22px; max-width: 31ch; text-align: center; color: #6B7068; font-size: .98rem; line-height: 1.4; text-wrap: balance; }
.entrada__form { display: grid; gap: 12px; }
.entrada__olvido { justify-self: end; margin-top: -2px; padding: 2px; border: 0; background: none; color: #2F6B3A; font: 500 .92rem var(--ios); }
.entrada__olvido:hover, .entrada__cambio button:hover { text-decoration: underline; text-underline-offset: 3px; }
.entrada__error { color: #B3261E; font: 500 .92rem/1.35 var(--ios); }
.entrada__hecho { padding: 11px 13px; border-radius: 12px; background: #EEF2DD; color: #2F4A1E; font: 500 .94rem/1.35 var(--ios); }
.entrada__o { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #8A9088; font: 400 .85rem var(--ios); }
.entrada__o::before, .entrada__o::after { content: ""; flex: 1; height: 1px; background: #DDDAD0; }
.entrada__cambio { margin-top: 20px; text-align: center; color: #6B7068; font-size: .96rem; }
.entrada__cambio button { padding: 0; border: 0; background: none; color: #2F6B3A; font: 600 .96rem var(--ios); }
.entrada__cuerpo > .boton-ios { margin-top: 4px; }
.entrada__cuerpo > .boton-ios + .boton-ios { margin-top: 10px; }

/* los campos agrupados, como en los ajustes del teléfono */
.grupo-ios { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px #E3E0D8; overflow: hidden; transition: box-shadow .2s; }
.grupo-ios:focus-within { box-shadow: 0 0 0 1px #2F6B3A, 0 0 0 4px rgba(47, 107, 58, .14); }
.grupo-ios__fila { position: relative; display: flex; align-items: center; border-top: 1px solid #ECEAE3; }
.grupo-ios__fila:first-child { border-top: 0; }
.grupo-ios input { flex: 1; min-width: 0; height: 54px; padding: 0 16px; border: 0; background: transparent; font: 400 17px var(--ios); color: #141A13; }
.grupo-ios input::placeholder { color: #A8ADA5; }
.grupo-ios input:focus { outline: none; }
.grupo-ios__ver { flex: none; margin-right: 8px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: #2F6B3A; font: 500 .9rem var(--ios); }
.grupo-ios__ver:hover { background: #F0EEE8; }
.boton-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 1rem; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #DDDAD0; color: #141A13; font: 600 1.02rem var(--ios); letter-spacing: -.01em; transition: box-shadow .2s, transform .15s; }
.boton-google:hover { box-shadow: 0 0 0 1px #A8ADA5; }
.boton-google:active { transform: scale(.985); }
.boton-google svg { width: 20px; height: 20px; flex: none; }
.boton-ios--claro { background: #fff; color: #141A13; box-shadow: inset 0 0 0 1px #DDDAD0; }
.boton-ios--claro:hover { box-shadow: inset 0 0 0 1px #A8ADA5; }

/* el aviso del modo de prueba: discreto */
.modo-prueba { justify-self: center; display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin: 22px auto 0; padding: 6px 11px; border-radius: 999px; background: rgba(20, 26, 19, .055); color: #6B7068; font: 500 .76rem/1.25 var(--ios); text-align: left; }
.modo-prueba i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #D9A021; }

@media (max-width: 899px) {
  .entrada { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; inset: 0; }
  .entrada::backdrop { background: rgba(10, 14, 11, .3); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .entrada[open] { animation: hoja-sube .42s cubic-bezier(.2, .9, .25, 1); }
  .entrada.es-cerrando { animation: hoja-baja .32s cubic-bezier(.4, 0, .8, .4) forwards; }
  .entrada .entrada__caja { height: 100%; max-height: none; border-radius: 0; background: #ECEAE2; box-shadow: none; -webkit-overflow-scrolling: touch; }
  .entrada .entrada__cab { padding: calc(10px + env(safe-area-inset-top)) 12px 10px 8px; min-height: 56px; background: rgba(236, 234, 226, .86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
  .entrada .entrada__cuerpo { width: 100%; max-width: 480px; margin: 0 auto; padding: 14px 20px calc(36px + env(safe-area-inset-bottom)); }
  .entrada__caja--suelta { background: transparent; box-shadow: none; }
  .entrada__caja--suelta .entrada__cuerpo { padding: 18px 4px 10px; }
}
@keyframes hoja-sube { from { transform: translateY(100%); } }
@keyframes hoja-baja { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .entrada[open], .entrada.es-cerrando, .entrada[open]::backdrop { animation: none; } }

/* ═══════════ Los avisos que pasan ═══════════ */
.aviso-cuenta { position: fixed; z-index: 200; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; background: rgba(20, 26, 19, .94); color: #fff; font: 500 .96rem/1.3 var(--ios); box-shadow: 0 16px 40px rgba(10, 14, 11, .3); opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .25, 1), visibility 0s .35s; pointer-events: none; }
.aviso-cuenta.es-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .25, 1); }

/* bajo la cotización lista, en la página */
.cuenta-nota { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; padding: .8rem .9rem; border-radius: 14px; background: #F4F2EC; font: 400 .95rem/1.35 var(--ios); color: #3F483D; }
.cuenta-nota p { flex: 1 1 12rem; min-width: 0; }
.cuenta-nota b { font-weight: 600; color: #141A13; }
.cuenta-nota .pastilla { background: #fff; box-shadow: inset 0 0 0 1px #E3E0D8; }
.cuenta-nota__ok { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2F6B3A; color: #fff; }
.cuenta-nota__ok svg { width: 12px; height: 12px; }

/* ═══════════ Las páginas de la cuenta y del panel ═══════════ */
.cuenta-pagina { background: #EFEDE6; font-family: var(--ios); color: #141A13; font-size: 1rem; }
.cuenta-pagina h1, .cuenta-pagina h2, .cuenta-pagina h3 { font-family: var(--ios); font-stretch: normal; }
.cuenta-barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 var(--margen); padding-top: env(safe-area-inset-top); background: rgba(239, 237, 230, .84); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(20, 26, 19, .07); }
.cuenta-barra .marca { font-size: 1.36rem; }
.cuenta-barra > .pastilla:last-child, .cuenta-barra__quien { margin-left: auto; }
.cuenta-barra__quien + .pastilla { margin-left: 0 !important; }
.cuenta-barra__rotulo { padding: 3px 9px; border-radius: 7px; background: #141A13; color: #fff; font: 600 .74rem/1.3 var(--ios); letter-spacing: .02em; }
.cuenta-barra__quien { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6B7068; font-size: .92rem; }
.cuenta-barra__quien:empty { display: none; }
.cuenta-barra__quien:empty + .pastilla { margin-left: auto !important; }

.cuenta { width: 100%; max-width: 1060px; margin: 0 auto; padding: clamp(20px, 4vw, 44px) 16px 56px; }
.cuenta__fuera { padding-top: clamp(0px, 3vh, 32px); }
.cuenta__fuera .entrada__caja--suelta { max-width: 440px; margin: 0 auto; }
.cuenta__vacio { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; color: #6B7068; }
.cuenta__vacio b { color: #141A13; font: 600 1.15rem var(--ios); }
.cuenta__vacio p { max-width: 34ch; line-height: 1.45; }
.cuenta__vacio .boton-ios { width: auto; margin-top: 12px; padding-inline: 1.6rem; }
.cuenta__nota { margin: 0 4px 14px; color: #6B7068; line-height: 1.45; }
.cuenta__pie { display: grid; justify-items: center; margin-top: 28px; }
.cuenta__pie:empty { display: none; }

.cuenta__hola { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.avatar { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(150deg, #3D8549, #24402B); color: #fff; font: 600 1.3rem var(--ios); letter-spacing: .02em; box-shadow: 0 6px 18px rgba(36, 64, 43, .28); }
.cuenta__hola h1 { max-width: none; font: 700 clamp(1.75rem, 3vw, 2.35rem)/1.05 var(--ios); letter-spacing: -.03em; }
.cuenta__hola p { margin-top: 4px; color: #6B7068; overflow-wrap: anywhere; }

.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; width: 100%; max-width: 440px; padding: 3px; margin-bottom: 26px; background: #E2DFD6; border-radius: 12px; }
.pestanas a { display: grid; place-items: center; min-height: 38px; padding: 0 12px; border-radius: 9px; font: 500 .95rem var(--ios); color: #4A524A; transition: background .2s, color .2s; }
.pestanas a:hover { color: #141A13; }
.pestanas a.es-activa { background: #fff; color: #141A13; font-weight: 600; box-shadow: 0 1px 4px rgba(20, 26, 19, .14); }

.cuenta__h2 { margin: 0 4px 12px; font: 700 1.3rem var(--ios); letter-spacing: -.02em; }
.cuenta__h2 span { margin-left: 4px; color: #A8ADA5; font-weight: 500; }
.tarjeta { min-width: 0; padding: 20px; background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(20, 26, 19, .04); }
.tarjeta__t { margin-bottom: 14px; font: 600 1.06rem var(--ios); letter-spacing: -.012em; }
.cuenta__atras { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 14px 2px; padding: .3rem 0; color: #2F6B3A; font: 500 1rem var(--ios); }
.cuenta__atras svg { width: 8px; height: 13px; }

/* el estado, en una pastilla */
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #EEECE6; color: #4A524A; font: 600 .76rem/1.35 var(--ios); white-space: nowrap; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado--confirmada, .estado--anticipo { background: #F2EADF; color: #7A5228; }
.estado--fabricacion { background: #F7EDCD; color: #76570C; }
.estado--lista, .estado--camino { background: #E5EFD5; color: #3B6620; }
.estado--entregada { background: #2F6B3A; color: #fff; }

/* la barra de avance */
.avance__tramos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.avance__tramos li { height: 6px; border-radius: 99px; background: #E3E0D8; }
.avance__tramos li.es-hecho { background: #2F6B3A; }
.avance__tramos li.es-actual { background: linear-gradient(90deg, #2F6B3A, #6FA83C); }
.avance__rotulos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 9px; font: 500 .72rem/1.2 var(--ios); color: #A8ADA5; }
.avance__rotulos li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avance__rotulos .es-hecho { color: #6B7068; }
.avance__rotulos .es-actual { color: #141A13; font-weight: 700; }
@media (max-width: 719px) { .avance__rotulos { display: none; } }

/* la lista de pedidos */
.filas-pedido { display: grid; gap: 10px; }
.fila-pedido { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 10px; grid-template-areas: "fotos que total ir" "avance avance avance avance"; align-items: center; gap: 14px 16px; padding: 16px 18px; background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(20, 26, 19, .04); transition: box-shadow .25s, transform .25s; }
.fila-pedido:hover { box-shadow: 0 12px 32px rgba(20, 26, 19, .09); transform: translateY(-1px); }
.fila-pedido__fotos { grid-area: fotos; display: flex; }
.fila-pedido__foto { width: 56px; height: 56px; border-radius: 14px; background: #F4F0E7; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.fila-pedido__foto + .fila-pedido__foto { margin-left: -22px; }
.fila-pedido__que { grid-area: que; display: grid; justify-items: start; gap: 3px; min-width: 0; }
.fila-pedido__num { font: 600 1.02rem var(--ios); letter-spacing: -.005em; }
.fila-pedido__que > span:not(.estado) { color: #6B7068; font-size: .9rem; }
.fila-pedido__que .estado { margin-top: 3px; }
.fila-pedido__total { grid-area: total; font: 700 1.1rem var(--ios); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.fila-pedido__ir { grid-area: ir; color: #B5B9B1; }
.fila-pedido__ir svg { width: 8px; height: 13px; transform: rotate(180deg); }
.fila-pedido__avance { grid-area: avance; }
@media (max-width: 599px) {
  .fila-pedido { grid-template-columns: auto minmax(0, 1fr) 10px; grid-template-areas: "fotos que ir" "fotos total ir" "avance avance avance"; gap: 6px 14px; padding: 14px 16px 16px; }
  .fila-pedido__fotos { align-self: start; }
  .fila-pedido__foto + .fila-pedido__foto:nth-child(n+3) { display: none; }
  .fila-pedido__avance { margin-top: 8px; }
}

/* el detalle de un pedido */
.detalle { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "estado" "acciones" "tiempo" "piezas"; }
.detalle__estado { grid-area: estado; padding: 24px; }
.detalle__acciones { grid-area: acciones; display: grid; gap: 10px; align-content: start; }
.detalle__acciones .pastilla { justify-content: center; min-height: 48px; }
.detalle__tiempo { grid-area: tiempo; }
.detalle__piezas { grid-area: piezas; }
.detalle__num { color: #6B7068; font-size: .92rem; }
.detalle__num b { color: #141A13; font-weight: 600; }
.detalle__titulo { margin: 8px 0 6px; max-width: none; font: 700 clamp(1.9rem, 3.2vw, 2.5rem)/1.05 var(--ios); letter-spacing: -.032em; }
.detalle__entrega { color: #2F6B3A; font: 600 1.06rem/1.3 var(--ios); }
.detalle__entrega::first-letter { text-transform: uppercase; }
.detalle__sigue { margin: 4px 0 22px; color: #6B7068; line-height: 1.45; }
@media (min-width: 900px) {
  .detalle { grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); grid-template-areas: "estado acciones" "piezas tiempo"; align-items: start; }
  .detalle__estado { padding: 28px 30px; align-self: stretch; }
  .detalle__acciones { align-self: stretch; align-content: center; padding: 22px; }
}

/* la línea de tiempo */
.tiempo { display: grid; }
.tiempo__paso { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.tiempo__paso:last-child { padding-bottom: 0; }
.tiempo__paso::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; border-radius: 2px; background: #E6E3DB; }
.tiempo__paso:last-child::before { display: none; }
.tiempo__paso.es-hecho::before { background: #2F6B3A; }
.tiempo__punto { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #D9D6CC; color: #fff; }
.tiempo__punto svg { width: 12px; height: 12px; }
.es-hecho .tiempo__punto, .es-actual .tiempo__punto:has(svg) { background: #2F6B3A; box-shadow: none; }
.es-actual .tiempo__punto:not(:has(svg)) { box-shadow: inset 0 0 0 6px #2F6B3A; animation: latido 2.4s ease-out infinite; }
@keyframes latido { 0% { box-shadow: inset 0 0 0 6px #2F6B3A, 0 0 0 0 rgba(47, 107, 58, .35); } 70%, 100% { box-shadow: inset 0 0 0 6px #2F6B3A, 0 0 0 9px rgba(47, 107, 58, 0); } }
.tiempo__texto { min-width: 0; padding-top: 1px; }
.tiempo__texto b { display: block; font: 600 1rem/1.3 var(--ios); letter-spacing: -.01em; }
.es-pendiente .tiempo__texto b { color: #A8ADA5; font-weight: 500; }
.tiempo__texto time { display: block; margin-top: 2px; color: #8A9088; font-size: .85rem; }
.tiempo__sigue { margin-top: 4px; color: #4A524A; font-size: .93rem; line-height: 1.4; }
.tiempo__nota { margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: #F4F2EC; color: #3F483D; font-size: .93rem; line-height: 1.4; overflow-wrap: anywhere; }
.tiempo__nota small { color: #8A9088; font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .es-actual .tiempo__punto { animation: none !important; } .fila-pedido { transition: none; } }

/* las piezas del pedido, dentro de una tarjeta */
.lineas-cuenta { border-radius: 0; background: none; }
.lineas-cuenta .linea { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "foto que sub" "foto cu sub"; gap: .15rem .9rem; padding: .85rem 0; }
.lineas-cuenta .linea:first-child { padding-top: 0; }
.lineas-cuenta .linea__foto { width: 60px; height: 60px; border-radius: 12px; align-self: start; }
.lineas-cuenta .linea__que b { font-size: 1rem; }
.lineas-cuenta .linea__cu b { font-size: .9rem; font-weight: 400; color: #6B7068; }
.lineas-cuenta .linea__sub { align-self: center; }
.lineas-cuenta .linea__sub b { font-size: 1.02rem; }
.lineas-cuenta + .pedido__totales { margin-top: 6px; padding-top: 4px; border-top: 1px solid #ECEAE3; }
.tarjeta .pedido__totales dd small { display: block; margin-top: 2px; max-width: 26ch; margin-left: auto; color: #8A9088; font-weight: 400; font-size: .84rem; line-height: 1.35; }
.tarjeta .pedido__total dd { font-size: clamp(1.45rem, 1vw + 1.15rem, 1.8rem); }

/* el perfil y las direcciones */
.formulario-cuenta { display: grid; gap: 14px; max-width: 580px; }
.formulario-cuenta .boton-ios { margin-top: 4px; }
.formulario-cuenta__fijo { display: flex; align-items: center; min-height: 50px; padding: .7rem .9rem; border-radius: 12px; background: #F4F2EC; color: #6B7068; overflow-wrap: anywhere; }
.formulario-cuenta .error, .panel__cambio .error { color: #B3261E; font: 500 .92rem var(--ios); }
.campo-ios textarea { width: 100%; min-height: 76px; padding: .75rem .9rem; border: 1px solid #E3E0D8; border-radius: 12px; background: #FAF9F6; font: 400 17px/1.35 var(--ios); color: #141A13; resize: vertical; }
.campo-ios textarea::placeholder { color: #A8ADA5; }
.campo-ios textarea:focus { outline: none; border-color: #2F6B3A; background: #fff; box-shadow: 0 0 0 3px rgba(47, 107, 58, .16); }
.campo-ios input[type="date"] { appearance: none; -webkit-appearance: none; text-align: left; }
.cuenta__salir { display: block; margin: 22px 4px 0; padding: .5rem 0; border: 0; background: none; color: #B3261E; font: 500 1rem var(--ios); }
.direcciones { display: grid; max-width: 580px; margin-bottom: 14px; padding-block: 6px; }
.direcciones li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ECEAE3; }
.direcciones li:last-child { border-bottom: 0; }
.direcciones__icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #EEF2DD; color: #2F6B3A; }
.direcciones__icono svg { width: 20px; height: 20px; }
.direcciones b { display: block; font-weight: 600; }
.direcciones span:not(.direcciones__icono) { display: block; color: #6B7068; font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; }

/* ═══════════ El panel de Ambientaza (admin.html) ═══════════ */
.panel { width: 100%; max-width: 1380px; margin: 0 auto; padding: 24px 16px 48px; }
.panel__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; }
.panel__cab h1 { max-width: none; font: 700 2.1rem/1 var(--ios); letter-spacing: -.032em; }
.panel__cab p { margin-top: 5px; color: #6B7068; font-size: .94rem; }
.panel__buscar { position: relative; flex: 1 1 260px; max-width: 420px; }
.panel__buscar svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #8A9088; pointer-events: none; }
.panel__buscar input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 0; border-radius: 12px; background: #E2DFD6; font: 400 17px var(--ios); color: #141A13; }
.panel__buscar input::placeholder { color: #8A9088; }
.panel__buscar input:focus { outline: none; background: #fff; box-shadow: 0 0 0 1px #2F6B3A, 0 0 0 4px rgba(47, 107, 58, .14); }
.panel__filtros { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; }
.panel__filtros::-webkit-scrollbar { display: none; }
.filtro { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E3E0D8; color: #3F483D; font: 500 .9rem var(--ios); transition: background .2s, color .2s; }
.filtro span { color: #8A9088; font-size: .82rem; font-variant-numeric: tabular-nums; }
.filtro:hover { background: #F7F6F2; }
.filtro.es-activo { background: #141A13; box-shadow: none; color: #fff; }
.filtro.es-activo span { color: rgba(255, 255, 255, .62); }
.panel__rejilla { display: grid; gap: 16px; }
.panel__lista { display: grid; align-content: start; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 26, 19, .04); }
.panel__vacio { padding: 28px 20px; color: #6B7068; text-align: center; line-height: 1.45; }
.fila-admin { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a total" "b estado"; align-items: center; gap: 5px 12px; padding: 14px 18px; border-bottom: 1px solid #ECEAE3; transition: background .15s; }
.panel__lista li:last-child .fila-admin { border-bottom: 0; }
.fila-admin:hover { background: #FAF9F6; }
.fila-admin.es-elegida { background: #EEF2DD; }
.fila-admin__a { grid-area: a; min-width: 0; }
.fila-admin__a b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1rem var(--ios); }
.fila-admin__a span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6B7068; font-size: .88rem; }
.fila-admin__b { grid-area: b; display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; color: #8A9088; font-size: .84rem; }
.fila-admin__b .mono { font-size: .68rem; letter-spacing: .06em; color: #4A524A; }
.fila-admin__total { grid-area: total; text-align: right; font: 600 .98rem var(--ios); font-variant-numeric: tabular-nums; }
.fila-admin .estado { grid-area: estado; justify-self: end; }
.panel__detalle { min-width: 0; }
.panel__dcab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; margin: 2px 4px 16px; }
.panel__dcab h2 { margin-top: 6px; max-width: none; font: 700 clamp(1.5rem, 2vw + .9rem, 1.9rem)/1.1 var(--ios); letter-spacing: -.03em; }
.panel__empresa { margin-top: 2px; color: #6B7068; }
.panel__dtotal { text-align: right; }
.panel__dtotal b { display: block; font: 700 1.5rem var(--ios); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.panel__dtotal span { color: #6B7068; font-size: .9rem; }
.panel__dgrid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.panel__cambio { display: grid; gap: 14px; align-content: start; }
.panel__cambio .tarjeta__t { margin-bottom: 0; }
.panel__cambio .nota { margin: -4px 0 0; color: #8A9088; font-size: .86rem; text-align: center; }
.panel__cambio .nota::first-letter { text-transform: uppercase; }
.pasos-admin { display: grid; gap: 2px; }
.pasos-admin label { position: relative; display: block; }
.pasos-admin input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pasos-admin span { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: #3F483D; font: 500 .98rem var(--ios); transition: background .15s, color .15s; }
.pasos-admin i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EEECE6; color: #6B7068; font: 600 .76rem var(--ios); font-style: normal; }
.pasos-admin label:hover span { background: #F4F2EC; }
.pasos-admin input:checked + span { background: #141A13; color: #fff; }
.pasos-admin input:checked + span i { background: #90C840; color: #141A13; }
.pasos-admin input:focus-visible + span { outline: 2px solid #2F6B3A; outline-offset: 1px; }
.datos-cliente > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #ECEAE3; font-size: .96rem; }
.datos-cliente > div:first-child { padding-top: 0; }
.datos-cliente dt { flex: none; color: #6B7068; }
.datos-cliente dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.datos-cliente a { color: #2F6B3A; }
.panel__botones { display: grid; gap: 10px; margin-top: 16px; }
.panel__botones .pastilla { justify-content: center; min-height: 46px; }
.panel__prueba { display: grid; max-width: 440px; margin: 14px auto 0; }
@media (min-width: 900px) {
  .panel { padding-inline: var(--margen); }
  .panel__filtros { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .panel__rejilla { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
  .panel__lista { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .panel__atras { display: none; }
}
@media (min-width: 1240px) {
  .panel__dgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cambio seguimiento" "cliente seguimiento" "piezas piezas"; align-items: start; }
  .panel__cambio { grid-area: cambio; } .panel__cliente { grid-area: cliente; } .panel__seguimiento { grid-area: seguimiento; } .panel__piezas { grid-area: piezas; }
}
@media (max-width: 899px) {
  .con-detalle .panel__lista, .con-detalle .panel__cab, .con-detalle .panel__filtros { display: none; }
  body:not(.con-detalle) .panel__detalle { display: none; }
  .cuenta-barra__quien { display: none; }
  .cuenta-barra__quien + .pastilla { margin-left: auto !important; }
}
@media (max-width: 599px) { .panel__dtotal { text-align: left; } .panel__dtotal span { margin-left: 2px; } }