*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { touch-action: manipulation; }
/* Sin "rebote" al arrastrar: solo se desliza si el contenido realmente no entra en la pantalla. */
html, body { overscroll-behavior: none; }
:root {
    --naranja: #e87a3c;
    --naranja-oscuro: #c65e26;
    --crema: #fdf6ee;
    --marron: #5a3d2b;
    --gris: #777;
    --rojo: #e74c3c;
    --verde: #2e9e5b;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--crema);
    color: var(--marron);
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
.btn { display: inline-block; background: var(--marron); color: #fff; padding: 13px 30px; border-radius: 30px; font-weight: 700; border: none; cursor: pointer; font-size: 14px; transition: transform .15s, background .15s; }
.btn:hover { background: #452e21; transform: translateY(-2px); }
.btn-secundario { display: inline-block; padding: 11px 24px; color: var(--marron); font-weight: 700; font-size: 14px; background: #fff; border: 2px solid var(--marron); border-radius: 30px; cursor: pointer; text-align: center; transition: background .15s, color .15s; }
.btn-secundario:hover { background: var(--marron); color: #fff; }

.seccion { max-width: 1100px; margin: 0 auto; padding: 60px 20px; }
.seccion h2 { font-size: 30px; margin-bottom: 28px; color: var(--naranja-oscuro); }
.foto-placeholder { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; font-size: 48px; background: #ffe9d2; }

.producto-unico { display: flex; gap: 32px; max-width: 820px; margin: 0 auto; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.producto-unico img, .foto-placeholder-grande { width: 340px; flex-shrink: 0; object-fit: cover; }
.foto-placeholder-grande { display: flex; align-items: center; justify-content: center; font-size: 80px; background: #ffe9d2; }
.producto-unico-info { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.producto-unico-info h3 { font-size: 24px; }
.producto-unico-info .desc { color: var(--gris); font-size: 15px; }
.producto-unico-info .precio { font-size: 26px; font-weight: 800; color: var(--naranja-oscuro); }
.producto-unico-info label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--gris); }
.producto-unico-info input[type=number] { width: 100px; padding: 10px; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; margin: 6px 0 12px; display: block; }
.producto-unico-info button { align-self: flex-start; padding: 13px 30px; background: var(--naranja); color: #fff; border: none; border-radius: 30px; font-weight: 700; cursor: pointer; font-size: 14px; }
.producto-unico-info button:hover:not(:disabled) { background: var(--naranja-oscuro); }
.producto-unico-info button:disabled { background: #ccc; cursor: not-allowed; }

.vacio { color: var(--gris); }
.alert { background: rgba(231,76,60,.1); border-left: 3px solid var(--rojo); color: var(--rojo); padding: 10px 14px; font-size: 13px; border-radius: 0 8px 8px 0; margin-bottom: 16px; }
.alert.exito { background: rgba(46,158,91,.1); border-left-color: var(--verde); color: var(--verde); }
.btn-quitar { display: inline-block; padding: 8px 18px; background: #fff; border: 2px solid var(--rojo); border-radius: 30px; color: var(--rojo); cursor: pointer; font-weight: 700; font-size: 13px; transition: background .15s, color .15s; }
.btn-quitar:hover { background: var(--rojo); color: #fff; }
.total-carrito { font-size: 20px; font-weight: 800; margin-bottom: 20px; }

/* ---------- Login (admin y clientes) ---------- */
.login-body { display: flex; min-height: 100vh; min-height: 100dvh; padding: 20px; background: var(--naranja-oscuro); }
.login-wrap { width: 100%; max-width: 480px; margin: auto; }
.logo-area { text-align: center; margin-bottom: 6px; color: #fff; }
.logo-area h1 { font-size: 28px; }
.logo-area p { opacity: .85; margin-top: 6px; }
.logo-login { width: 302px; max-width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.box { background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,.15); }
.box h2 { font-size: 20px; margin-bottom: 4px; }
.subtitulo { font-size: 13px; color: var(--gris); margin-bottom: 20px; }
.box form { display: flex; flex-direction: column; }
.box label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 700; margin: 10px 0 6px; }
.box input, .box select { padding: 12px 14px; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; font-family: inherit; font-size: 14px; background: #fff; }
.box button { margin-top: 18px; padding: 13px; background: var(--naranja); color: #fff; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; }
.box button:hover { background: var(--naranja-oscuro); }
.back { display: block; text-align: center; margin-top: 18px; font-size: 12px; color: var(--gris); }
.box label.check-recordar { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--gris); cursor: pointer; }
.box label.check-recordar input { width: auto; padding: 0; margin: 0; flex: none; }
.tabs { display: flex; margin-bottom: 20px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0,0,0,.1); }
.tabs .tab { flex: 1; text-align: center; padding: 10px; font-weight: 700; font-size: 13px; color: var(--gris); background: #f4f4f4; }
.tabs .tab.activo { background: var(--naranja); color: #fff; }

/* ---------- Panel admin ---------- */
.admin-body { background: #f6f2ec; }
.admin-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.admin-menu { width: 220px; background: var(--marron); color: #fff; display: flex; flex-direction: column; padding: 20px 0; flex-shrink: 0; }
.admin-brand { font-weight: 800; font-size: 18px; padding: 0 20px 20px; }
.admin-brand img { max-width: 100%; height: auto; display: block; border-radius: 12px; }
.admin-menu nav { display: flex; flex-direction: column; flex: 1; }
.admin-menu nav a { padding: 12px 20px; font-size: 14px; color: rgba(255,255,255,.75); }
.admin-menu nav a:hover, .admin-menu nav a.activo { background: rgba(255,255,255,.08); color: #fff; }
.admin-menu .salir { padding: 12px 20px; font-size: 13px; color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.1); }
.admin-contenido { flex: 1; padding: 24px 30px; overflow-x: auto; }
.banner-impersonando { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff3cd; border: 1px solid #ffe08a; color: #7a5b00; padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.banner-impersonando form { margin: 0; }
.banner-impersonando .btn-secundario { padding: 6px 14px; background: #7a5b00; color: #fff; border-radius: 6px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.admin-header h1 { font-size: 24px; }
.admin-usuario { font-size: 13px; color: var(--gris); }

.grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.tarjeta { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 4px; }
.tarjeta .valor { font-size: 26px; font-weight: 800; color: var(--naranja-oscuro); }
.tarjeta .etiqueta { font-size: 12px; color: var(--gris); text-transform: uppercase; }

.panel { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.05); margin-bottom: 24px; }
.panel h2 { font-size: 18px; margin-bottom: 16px; }
.panel h3 { font-size: 15px; margin: 16px 0 10px; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 14px; }
.tabla th { font-size: 12px; text-transform: uppercase; color: var(--gris); }
.tabla-centrada th, .tabla-centrada td { text-align: center; }
.fila-alerta td { background: rgba(231,76,60,.06); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--gris); }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid label.checkbox { flex-direction: row; align-items: center; text-transform: none; font-weight: 400; font-size: 13px; }
.form-grid input, .form-grid textarea, .form-grid select { padding: 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; font-family: inherit; font-size: 14px; }
.form-grid .btn, .form-grid .btn-secundario { grid-column: span 1; align-self: start; }

.form-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.form-inline label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.form-inline input, .form-inline select { padding: 8px 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; font-family: inherit; }

.link-eliminar { display: inline-block; padding: 5px 12px; background: #fff; border: 1.5px solid var(--rojo); border-radius: 20px; color: var(--rojo); cursor: pointer; font-size: 12px; font-weight: 700; margin: 2px 0 2px 6px; line-height: 1.3; transition: background .15s, color .15s; }
.link-eliminar:hover { background: var(--rojo); color: #fff; }
.link-accion { display: inline-block; padding: 5px 12px; background: #fff; border: 1.5px solid var(--naranja-oscuro); border-radius: 20px; color: var(--naranja-oscuro); cursor: pointer; font-size: 12px; font-weight: 700; margin: 2px 0 2px 6px; line-height: 1.3; text-decoration: none; transition: background .15s, color .15s; }
.link-accion:hover { background: var(--naranja-oscuro); color: #fff; }

.filtros { display: flex; gap: 8px; }
.filtros a { padding: 6px 14px; border-radius: 20px; background: #f1f1f1; color: #555; text-decoration: none; font-size: 13px; }
.filtros a.activo { background: var(--naranja-oscuro); color: #fff; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; background: #eee; color: #555; }
.badge-pendiente, .badge-sin_asignar { background: #fde8d2; color: #b06a12; }
.badge-asignado { background: #dbe9ff; color: #2557a7; }
.badge-en_preparacion { background: #f3e2ff; color: #7a3ab0; }
.badge-en_camino { background: #fff3b0; color: #8a6d00; }
.badge-entregado { background: #d9f3e0; color: var(--verde); }
.badge-error { background: #fdd; color: var(--rojo); }
.badge-emitida { background: #d9f3e0; color: var(--verde); }

.pedido-card { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.pedido-head { margin-bottom: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.items-pedido { margin: 8px 0; padding-left: 18px; font-size: 13px; color: var(--gris); }
.notas { font-size: 13px; color: var(--gris); font-style: italic; }

@media (max-width: 720px) {
    .admin-shell { flex-direction: column; }
    .admin-menu { width: 100%; flex-direction: row; overflow-x: auto; }
    .admin-menu nav { flex-direction: row; }
    .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Responsive: app de clientes ---------- */
@media (max-width: 780px) {
    .seccion { padding: 40px 16px; }
    .seccion h2 { font-size: 24px; margin-bottom: 20px; }

    input, select, textarea { font-size: 16px; }

    .producto-unico { flex-direction: column; }
    .producto-unico img, .foto-placeholder-grande { width: 100%; height: 220px; }
    .producto-unico-info button { align-self: stretch; text-align: center; }
}

/* ---------- Responsive: carrito ---------- */
@media (max-width: 640px) {
    .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline select, .form-inline input { width: 100%; }
}

/* ---------- Responsive: login / panel admin ---------- */
@media (max-width: 480px) {
    .box { padding: 24px 20px; }
    .logo-area h1 { font-size: 24px; }
}

@media (max-width: 900px) {
    .admin-contenido { padding: 18px; }
    .admin-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .grid-tarjetas { grid-template-columns: repeat(2, 1fr); }
    .tabla { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 480px) {
    .grid-tarjetas { grid-template-columns: 1fr; }
    .pedido-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- App de clientes (menú lateral) ---------- */
.cliente-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.cliente-menu-btn { width: 42px; height: 42px; border: none; border-radius: 10px; background: var(--marron); color: #fff; font-size: 20px; cursor: pointer; flex-shrink: 0; }
.cliente-topbar-logo { height: 46px; width: auto; display: block; }
.cliente-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; max-width: 80vw; z-index: 60; background: var(--marron); color: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s ease; }
html.cliente-menu-abierto .cliente-menu { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.25); }
.cliente-menu-fondo { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s; }
html.cliente-menu-abierto .cliente-menu-fondo { opacity: 1; pointer-events: auto; }
.cliente-menu-brand { padding: 20px; text-align: center; }
.cliente-menu-brand img { width: 70%; height: auto; }
.cliente-menu nav { flex: 1; overflow-y: auto; }
.cliente-menu nav a { display: block; padding: 14px 22px; color: rgba(255,255,255,.85); font-weight: 600; font-size: 15px; border-left: 4px solid transparent; }
.cliente-menu nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.cliente-menu nav a.activo { background: rgba(255,255,255,.14); color: #fff; border-left-color: var(--naranja); }
.cliente-menu nav hr { border: none; border-top: 1px solid rgba(255,255,255,.15); margin: 8px 0; }
.cliente-menu-pie { padding: 16px 22px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; text-align: center; }
.cliente-menu-pie strong { display: block; margin-bottom: 6px; }
.cliente-menu-pie a.cliente-salir { display: inline-block; margin-top: 4px; padding: 8px 26px; border: 2px solid #fff; border-radius: 30px; color: #fff; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.cliente-menu-pie a.cliente-salir:hover { background: #fff; color: var(--marron); }
.cliente-contenido { padding-top: 24px; }

/* Carrito de la app: una sola columna centrada. */
.cliente-centro { max-width: 460px; margin: 0 auto; text-align: center; }
.cliente-app .producto-unico { flex-direction: column; gap: 0; max-width: 460px; margin-bottom: 20px; }
.cliente-app .producto-unico img, .cliente-app .foto-placeholder-grande { width: 100%; height: 230px; }
.cliente-app .producto-unico-info { align-items: center; text-align: center; padding: 22px 22px 26px; gap: 8px; }
.cliente-app .producto-unico-info form { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.cliente-app .producto-unico-info button { align-self: center; width: 100%; max-width: 280px; padding: 15px 30px; font-size: 16px; }
.cliente-app .producto-unico-info .btn-quitar { width: auto; padding: 8px 18px; font-size: 13px; background: #fff; color: var(--rojo); border: 2px solid var(--rojo); }
.cliente-app .producto-unico-info .btn-quitar:hover { background: var(--rojo); color: #fff; }
.cliente-app .producto-unico-info .btn-secundario { background: #fff; color: var(--marron); padding: 11px 24px; font-size: 14px; border: 2px solid var(--marron); }
.cliente-app .producto-unico-info .btn-secundario:hover { background: var(--marron); color: #fff; }
.selector-cantidad { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.selector-cantidad select, .selector-cantidad input { width: 180px; padding: 12px 14px; font-size: 18px; font-weight: 700; text-align: center; text-align-last: center; color: var(--marron); background: #fff; border: 2px solid var(--naranja); border-radius: 12px; font-family: inherit; }
.cliente-app .producto-unico-info input[type=number].js-cantidad-otra { width: 180px; margin: 0; display: block; }
.cliente-topbar-titulo { flex: 1; min-width: 0; margin: 0; font-size: 21px; line-height: 1.15; font-weight: 800; color: var(--naranja-oscuro); text-align: center; }
.cliente-app .cliente-contenido { padding-top: 20px; }

/* Checkout por pasos (app de clientes) */
.checkout { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.checkout-paso { background: #fff; border-radius: 16px; padding: 22px 18px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.checkout-paso h3 { font-size: 20px; color: var(--marron); margin-bottom: 14px; }
.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opcion { cursor: pointer; display: block; min-width: 0; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span { display: block; padding: 18px 8px; border: 2px solid #eadfd3; border-radius: 14px; background: var(--crema); font-weight: 800; font-size: 14px; line-height: 1.6; color: var(--marron); transition: all .15s; overflow-wrap: anywhere; }
.opcion span::first-line { font-size: 30px; }
.opcion input:checked + span { border-color: var(--naranja); background: #fff1e5; box-shadow: 0 0 0 3px rgba(232,122,60,.2); transform: translateY(-2px); }
.checkout-detalle { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #eadfd3; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.checkout-genial { font-size: 22px; font-weight: 800; color: var(--naranja-oscuro); }
.dato-copiable { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; background: var(--crema); border-radius: 12px; text-align: left; }
.dato-copiable small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--gris); }
.dato-copiable strong { font-size: 15px; word-break: break-all; }
.btn-copiar { flex-shrink: 0; padding: 8px 14px; border: none; border-radius: 20px; background: var(--naranja); color: #fff; font-weight: 700; cursor: pointer; }
.checkout-mapa { width: 100%; height: 220px; border: 0; border-radius: 12px; }
.checkout-detalle label { width: 100%; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--gris); }
.checkout-detalle input, .checkout-detalle select, .checkout-detalle textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 16px; font-family: inherit; color: var(--marron); border: 2px solid #eadfd3; border-radius: 10px; background: #fff; text-transform: none; font-weight: 400; }
.checkout-detalle input:focus, .checkout-detalle select:focus, .checkout-detalle textarea:focus { outline: none; border-color: var(--naranja); }
.btn-confirmar { align-self: center; width: 100%; max-width: 320px; padding: 17px; font-size: 17px; }

/* Ventana de confirmación del pedido */
.modal-fondo { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-caja { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 26px 22px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-caja h3 { font-size: 21px; color: var(--marron); margin-bottom: 16px; }
.modal-resumen { list-style: none; text-align: left; background: var(--crema); border-radius: 12px; padding: 6px 14px; margin-bottom: 20px; }
.modal-resumen li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #eadfd3; font-size: 15px; }
.modal-resumen li:last-child { border-bottom: none; }
.modal-resumen span { color: var(--gris); flex-shrink: 0; }
.modal-resumen strong { text-align: right; }
.modal-botones { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.modal-botones .btn, .modal-botones .btn-secundario { width: 100%; max-width: 280px; }
.pedido-entrega { margin: 8px 0 4px; padding: 8px 12px; background: var(--crema); border-radius: 10px; font-size: 14px; }

/* Seguimiento de pedidos: etiqueta de estado + pasos con color */
.cliente-app .pedido-card { background: #fff; }
.cliente-app .pedido-head { justify-content: space-between; }
.estado-pedido { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 800; color: #fff; }
.estado-pendiente      { --estado: #e8902c; }
.estado-en_preparacion { --estado: #8e44c9; }
.estado-en_camino      { --estado: #d4a106; }
.estado-entregado      { --estado: #2e9e5b; }
.estado-pedido { background: var(--estado); }
.seguimiento { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 10px; padding: 0; }
.seguimiento li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.seguimiento li::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 4px; background: #eee3d8; z-index: 0; }
.seguimiento li:first-child::before { display: none; }
.seguimiento li.hecho::before, .seguimiento li.actual::before { background: var(--estado); }
.seguimiento-punto { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #eee3d8; border: 3px solid #fff; }
.seguimiento li.hecho .seguimiento-punto, .seguimiento li.actual .seguimiento-punto { background: var(--estado); }
.seguimiento li.actual .seguimiento-punto { box-shadow: 0 0 0 4px color-mix(in srgb, var(--estado) 30%, transparent); transform: scale(1.12); }
.seguimiento-texto { font-size: 11px; font-weight: 700; line-height: 1.2; color: #b5a796; }
.seguimiento li.hecho .seguimiento-texto, .seguimiento li.actual .seguimiento-texto { color: var(--marron); }
.seguimiento li.actual .seguimiento-texto { color: var(--estado); }
.cliente-app .pedido-head { flex-direction: row; align-items: center; }
.pedido-fecha { display: block; font-size: 12px; color: var(--gris); margin-top: 2px; }
.seguimiento-texto { font-size: 9.5px; padding: 0; letter-spacing: -.2px; overflow-wrap: normal; hyphens: manual; }
.opcion span small { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--gris); line-height: 1.3; }
.checkout-detalle .opcion { text-transform: none; text-align: center; color: inherit; font-size: inherit; font-weight: inherit; }
.checkout-detalle .opcion span small { text-transform: none; }

/* Ojito para ver la contraseña (js/ver-password.js) */
.campo-password { position: relative; display: flex; flex-direction: column; width: 100%; }
.campo-password input { width: 100%; padding-right: 46px !important; }
.campo-password .btn-ver-password { position: absolute; margin: 0 !important; box-shadow: none !important; min-width: 0; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--gris); cursor: pointer; }
.campo-password .btn-ver-password:hover { color: var(--naranja-oscuro); background: rgba(0,0,0,.04); }
.total-vivo { font-size: 18px; color: var(--marron); margin: 2px 0; }
.total-vivo strong { color: var(--naranja-oscuro); font-size: 22px; }
/* Campo de cantidad sin flechitas de subir/bajar */
.selector-cantidad input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.selector-cantidad input[type=number]::-webkit-outer-spin-button,
.selector-cantidad input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* En pantallas anchas el título va centrado respecto de la página (alineado con el contenido). */
@media (min-width: 700px) {
    .cliente-topbar { position: sticky; }
    .cliente-topbar-titulo { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 320px); pointer-events: none; }
}
/* Mi cuenta: misma columna centrada que Comprar. */
.mis-datos { text-align: center; }
.mis-datos-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 16px; }
.mis-datos-head h3 { margin: 0; font-size: 20px; }
.mis-datos p { margin: 6px 0; }
.cliente-centro .form-grid { grid-template-columns: 1fr; text-align: left; }
.cliente-centro .form-grid label, .cliente-centro .form-grid > div { grid-column: 1 / -1; }
/* Seguimiento: encabezado "Pedido  07/10/2026 11:16" y tarjetas dentro de la columna centrada */
.pedido-titulo { font-size: 15px; }
.pedido-titulo span { color: var(--gris); }
.pedido-titulo strong { color: var(--marron); }
.cliente-centro .pedido-card { text-align: left; }
.cliente-centro .panel > h3 { text-align: center; }

/* Transferencias Mercado Pago (admin) */
.mp-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mp-filtros { margin-bottom: 14px; gap: 14px; }
.mp-resumen { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; background: #009ee3; color: #fff; border-radius: 12px; padding: 14px 20px; margin-bottom: 16px; font-weight: 700; }
.mp-chip { margin-left: auto; background: rgba(255,255,255,.22); border-radius: 20px; padding: 5px 14px; font-size: 13px; }
.mp-validado { color: var(--verde); font-weight: 700; }
.mp-validar { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.mp-validar select { padding: 6px 8px; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; font-size: 13px; max-width: 280px; }
.pago-estado { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.pago-validado { background: #d9f3e0; color: var(--verde); }
.pago-pendiente { background: #fde8d2; color: #b06a12; }

/* Facturación personal / Configuración del facturador / Padrón (páginas copiadas del estudio) */
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.05); margin-bottom: 20px; max-width: 860px; }
.card.card-full { max-width: none; }
.card h2 { font-size: 18px; margin: 0 0 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.form-row { margin-bottom: 12px; }
.form-row label, .etiqueta { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--gris); margin-bottom: 5px; }
.card input[type=text], .card input[type=number], .card input[type=date], .card input:not([type]), .card select, .card textarea {
    width: 100%; padding: 9px 10px; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; color: var(--marron); }
.card input:disabled, .card select:disabled { background: #f4f1ee; color: var(--gris); }
.hint { font-size: 12px; color: var(--gris); margin: 4px 0 10px; }
.opcion-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; text-transform: none; font-weight: 400; color: var(--marron); }
.opcion-radio input { width: auto; margin: 0; }
.btn.btn-sec { background: #fff; color: var(--marron); border: 2px solid var(--marron); padding: 11px 24px; }
.btn.btn-sec:hover { background: var(--marron); color: #fff; }
.btn.btn-sm { padding: 7px 14px; font-size: 13px; }
.badge.bg-green { background: #d9f3e0; color: var(--verde); }
.badge.bg-red { background: #fdd; color: var(--rojo); }
.chip-actividad { display: inline-flex; align-items: center; gap: 6px; background: #f3e9df; border-radius: 20px; padding: 5px 8px 5px 12px; font-size: 13px; }
.chip-actividad .btnQuitarActividad { background: transparent; border: none; color: var(--rojo); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.tabla-estado td { padding: 6px 10px; border-bottom: 1px solid #f3ece4; }
.tabla-estado td:first-child { color: var(--gris); white-space: nowrap; }
@media (max-width: 720px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* Pedidos (admin): estados como botones, el actual relleno */
.estados-pedido { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-estado { padding: 8px 14px; border-radius: 20px; border: 2px solid var(--estado); background: #fff; color: var(--estado); font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.btn-estado:hover:not(:disabled) { background: color-mix(in srgb, var(--estado) 12%, #fff); }
.btn-estado.activo { background: var(--estado); color: #fff; cursor: default; }
.btn-estado.guardando { opacity: .6; }
.btn-estado:disabled:not(.activo) { opacity: .45; cursor: default; }