@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Public+Sans:wght@400;500;600&display=swap');

.ra-app{
  --ink:#16232b; --tenue:#63757e; --papel:#e9eef0; --sup:#ffffff;
  --linea:#cfd9dd; --linea-suave:#e4ebed;
  --petroleo:#0d5b61; --petroleo-osc:#0a464b; --petroleo-claro:#e2eeee;
  --moss:#2c7a52; --rose:#a63d40; --amber:#a97609;
  --r:6px;
  display:flex; min-height:100vh; width:100%;
  background:var(--papel); color:var(--ink);
  font-family:'Public Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.ra-app *{box-sizing:border-box;}
.ra-app button{font:inherit; color:inherit; cursor:pointer;}
.ra-app :focus-visible{outline:2px solid var(--petroleo); outline-offset:2px;}
.num{font-variant-numeric:tabular-nums;}
.moss{color:var(--moss);} .rose{color:var(--rose);} .amber{color:var(--amber);}

.ra-cargando{margin:auto; color:var(--tenue);}

/* riel */
.ra-riel{
  width:216px; flex:0 0 216px; background:var(--petroleo); color:#dcebea;
  display:flex; flex-direction:column; padding:20px 12px; position:sticky; top:0; height:100vh;
}
.ra-marca{display:flex; gap:10px; align-items:center; padding:0 8px 20px;}
.ra-huella{font-size:20px; line-height:1;}
.ra-marca strong{display:block; font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.01em; color:#fff;}
.ra-marca small{display:block; font-size:11.5px; color:#8fb7b5;}
.ra-nav{display:flex; flex-direction:column; gap:1px;}
.ra-navbtn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; padding:9px 10px; border-radius:var(--r);
  color:#bcd6d4; font-size:14px;
}
.ra-navbtn:hover{background:rgba(255,255,255,.07); color:#fff;}
.ra-navbtn.activo{background:#fff; color:var(--petroleo-osc); font-weight:600;}
.ra-ico{width:16px; text-align:center; opacity:.8; font-size:12px;}
.ra-riel-pie{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:4px; align-items:flex-start;}
.ra-linkbtn{background:none; border:0; padding:4px 8px; font-size:12.5px; color:#8fb7b5; text-decoration:underline; text-underline-offset:3px;}
.ra-linkbtn:hover{color:#fff;}
.ra-linkbtn.oscuro{color:var(--petroleo); text-decoration:none; font-weight:500;}
.ra-linkbtn.oscuro:hover{text-decoration:underline;}

/* main */
.ra-main{flex:1; min-width:0; padding:24px 28px 56px;}
.ra-cab{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between; margin-bottom:18px;}
.ra-cab-acc{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.ra-h1{font-family:'Archivo',sans-serif; font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0;}
.ra-sub{margin:2px 0 0; color:var(--tenue); font-size:13px;}

/* botones */
.ra-btn{
  border:1px solid var(--linea); background:var(--sup); border-radius:var(--r);
  padding:8px 14px; font-size:13.5px; font-weight:500;
}
.ra-btn:hover:not(:disabled){border-color:#a9bcc2;}
.ra-btn.primario{background:var(--petroleo); border-color:var(--petroleo); color:#fff;}
.ra-btn.primario:hover:not(:disabled){background:var(--petroleo-osc);}
.ra-btn.peligro{background:var(--rose); border-color:var(--rose); color:#fff;}
.ra-btn.peligro:hover:not(:disabled){background:#8d3235;}
.ra-btn:disabled{opacity:.45; cursor:not-allowed;}
.ra-confirmar{margin:0; font-size:14px;}

/* buscador */
.ra-buscar{display:flex; align-items:center; gap:6px; background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:0 10px; min-width:220px;}
.ra-buscar span{color:var(--tenue); font-size:15px;}
.ra-buscar input{border:0; outline:0; background:none; padding:8px 0; font:inherit; width:100%;}
.ra-buscar button{border:0; background:none; color:var(--tenue); font-size:11px; padding:4px;}

/* franja KPI */
.ra-franja{display:flex; flex-wrap:wrap; background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); margin-bottom:20px;}
.ra-kpi{flex:1 1 150px; padding:14px 18px; border-right:1px solid var(--linea-suave);}
.ra-kpi:last-child{border-right:0;}
.ra-kpi b{display:block; font-family:'Archivo',sans-serif; font-size:22px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.ra-kpi span{font-size:12px; color:var(--tenue);}

/* paneles */
.ra-dos{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px;}
.ra-panel{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:16px 18px;}
.ra-panel.suelto{margin-bottom:20px;}
.ra-panel-cab{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
.ra-panel-cab h2{font-family:'Archivo',sans-serif; font-size:14px; font-weight:600; margin:0; letter-spacing:.01em;}

.ra-agenda{list-style:none; margin:0; padding:0;}
.ra-agenda li{display:flex; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--linea-suave);}
.ra-agenda li:first-child{border-top:0;}
.ra-hora{font-family:'Archivo',sans-serif; font-weight:600; font-variant-numeric:tabular-nums; min-width:46px;}
.ra-hora.chica{font-size:12.5px; min-width:64px;}
.ra-hora.chica small{display:block; color:var(--tenue); font-weight:400;}
.ra-agenda-txt{flex:1; min-width:0;}
.ra-agenda-txt small{display:block; color:var(--tenue); font-size:12px;}

.ra-lista-stock{list-style:none; margin:0; padding:0;}
.ra-lista-stock li{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--linea-suave);}
.ra-lista-stock li:first-child{border-top:0;}
.ra-lista-stock small{display:block; color:var(--tenue); font-size:12px;}
.ra-lista-stock b{font-variant-numeric:tabular-nums;}

/* tablas */
.ra-tabla-caja{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); overflow-x:auto;}
.ra-tabla{width:100%; border-collapse:collapse; min-width:760px;}
.ra-tabla th{
  text-align:left; font-size:11.5px; font-weight:600; color:var(--tenue);
  padding:10px 14px; border-bottom:1px solid var(--linea); white-space:nowrap;
}
.ra-tabla td{padding:11px 14px; border-bottom:1px solid var(--linea-suave); vertical-align:top;}
.ra-tabla tbody tr:last-child td{border-bottom:0;}
.ra-tabla tbody tr:hover{background:#f7fafa;}
.ra-tabla tr.abierta{background:var(--petroleo-claro);}
.ra-tabla tr.aviso td:first-child{box-shadow:inset 3px 0 0 var(--amber);}
.ra-tabla tfoot td{padding:11px 14px; border-top:1px solid var(--linea); font-weight:600;}
.der{text-align:right;}
.ra-bajo{display:block; color:var(--tenue); font-size:12px; font-weight:400;}
.ra-tenue{color:var(--tenue);}
.ra-acc{white-space:nowrap;}
.ra-acc button{background:none; border:0; padding:2px 6px; font-size:12.5px; color:var(--petroleo); font-weight:500;}
.ra-acc button:hover{text-decoration:underline;}
.ra-acc button.peligro{color:var(--rose);}
.ra-desplegar{background:none; border:0; color:var(--tenue); padding:2px 4px;}

.ra-detalle td{background:#f7fafa; padding:14px 18px 18px 48px;}
.ra-nota{margin:0 0 10px; font-size:13px; color:var(--tenue); border-left:2px solid var(--linea); padding-left:10px;}
.ra-mascotas{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.ra-mascota{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:12px 14px;}
.ra-mascota header{display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin-bottom:8px; font-size:12.5px;}
.ra-mascota dl{display:flex; gap:16px; margin:0 0 8px;}
.ra-mascota dt{font-size:11px; color:var(--tenue); margin:0;}
.ra-mascota dd{margin:0; font-size:13px; font-variant-numeric:tabular-nums;}

/* servicios */
.ra-grupo{margin-bottom:22px;}
.ra-grupo-tit{font-family:'Archivo',sans-serif; font-size:13px; font-weight:600; margin:0 0 10px; display:flex; gap:8px; align-items:center;}
.ra-grupo-tit span{color:var(--tenue); font-weight:400; font-size:12px;}
.ra-cuadricula{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px;}
.ra-cuadricula.chica{grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); margin-top:12px;}
.ra-servicio{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column;}
.ra-servicio.inactivo{opacity:.55;}
.ra-servicio header{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.ra-servicio h3{font-family:'Archivo',sans-serif; font-size:15px; font-weight:600; margin:0;}
.ra-servicio header b{font-family:'Archivo',sans-serif; font-size:15px;}
.ra-servicio p{margin:6px 0 12px; font-size:13px; color:var(--tenue); flex:1;}
.ra-servicio footer{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; border-top:1px solid var(--linea-suave); padding-top:10px;}

/* filtros */
.ra-filtros{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
.ra-filtros.compactos{margin:0;}
.ra-pill{background:var(--sup); border:1px solid var(--linea); border-radius:999px; padding:6px 14px; font-size:13px; color:var(--tenue);}
.ra-pill.on{background:var(--petroleo); border-color:var(--petroleo); color:#fff;}

/* estados */
.ra-marca-est{display:inline-block; border:1px solid var(--linea); border-radius:999px; padding:2px 9px; font-size:12px; color:var(--tenue); background:#f7fafa;}
.ra-marca-est.confirmada{border-color:#a8cfbb; background:#eaf5ef; color:var(--moss);}
.ra-marca-est.pendiente{border-color:#e0cfa0; background:#fbf5e6; color:var(--amber);}
.ra-marca-est.atendida{border-color:#b6ccd2; background:#eef4f6; color:var(--petroleo);}
.ra-marca-est.cancelada{border-color:#e0bcbd; background:#faeeee; color:var(--rose);}
.ra-estado{border:1px solid var(--linea); border-radius:999px; padding:4px 8px; font-size:12.5px; background:#f7fafa; color:var(--tenue);}
.ra-estado.confirmada{border-color:#a8cfbb; background:#eaf5ef; color:var(--moss);}
.ra-estado.pendiente{border-color:#e0cfa0; background:#fbf5e6; color:var(--amber);}
.ra-estado.cancelada{border-color:#e0bcbd; background:#faeeee; color:var(--rose);}

/* vacío */
.ra-vacio{background:var(--sup); border:1px dashed var(--linea); border-radius:var(--r); padding:34px 20px; text-align:center;}
.ra-vacio p{margin:0 0 12px; color:var(--tenue);}

/* formularios */
.ra-input{
  width:100%; border:1px solid var(--linea); border-radius:var(--r); padding:8px 10px;
  font:inherit; background:var(--sup); color:var(--ink);
}
.ra-input:focus{outline:0; border-color:var(--petroleo); box-shadow:0 0 0 3px rgba(13,91,97,.12);}
.ra-input:disabled{background:#f2f5f6; color:var(--tenue);}
.ra-input.compacto{width:auto;}
textarea.ra-input{resize:vertical;}
.ra-form{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
.ra-campo{display:flex; flex-direction:column; gap:4px;}
.ra-campo.full{grid-column:1 / -1;}
.ra-lbl{font-size:12.5px; color:var(--tenue);}
.ra-pista{font-size:12px; color:var(--tenue); font-style:normal;}
.ra-pista.suelta{display:block; margin:12px 0 0;}
.ra-form-pie{display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--linea-suave);}
.ra-alerta{margin:14px 0 0; padding:9px 12px; border-radius:var(--r); background:#fbf5e6; border:1px solid #e0cfa0; color:#7a5807; font-size:13px;}
.ra-resumen-mov{margin:0 0 14px; color:var(--tenue);}

/* modal */
.ra-capa{position:fixed; inset:0; background:rgba(16,35,40,.42); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; z-index:50;}
.ra-modal{background:var(--sup); border-radius:8px; width:100%; max-width:560px; box-shadow:0 18px 48px rgba(10,40,45,.28);}
.ra-modal.ancho{max-width:820px;}
.ra-modal-cab{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--linea-suave);}
.ra-modal-cab h2{font-family:'Archivo',sans-serif; font-size:16px; font-weight:600; margin:0;}
.ra-cerrar{background:none; border:0; color:var(--tenue); font-size:14px; padding:4px 6px;}
.ra-modal-cuerpo{padding:18px 20px 20px;}

/* punto de venta */
.ra-pos{display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start;}
.ra-catalogo{min-width:0;}
.ra-item{
  background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:11px 12px;
  display:flex; flex-direction:column; gap:6px; text-align:left; min-height:104px;
}
.ra-item:hover:not(:disabled){border-color:var(--petroleo);}
.ra-item.agotado{opacity:.5; cursor:not-allowed;}
.ra-item-tipo{font-size:11px; color:var(--tenue);}
.ra-item strong{font-size:13.5px; line-height:1.3; flex:1;}
.ra-item-pie{display:flex; justify-content:space-between; align-items:baseline; gap:6px;}
.ra-item-pie b{font-family:'Archivo',sans-serif; font-variant-numeric:tabular-nums;}
.ra-item-pie small{font-size:11.5px; color:var(--tenue);}

.ra-carrito{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:16px 18px; position:sticky; top:20px;}
.ra-carrito h2{font-family:'Archivo',sans-serif; font-size:14px; font-weight:600; margin:0 0 12px;}
.ra-carrito-vacio{padding:20px 0; text-align:center; font-size:13px;}
.ra-carrito-lista{list-style:none; margin:0 0 14px; padding:0;}
.ra-carrito-lista li{display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--linea-suave);}
.ra-carrito-lista li:first-child{border-top:0;}
.ra-carrito-lista strong{display:block; font-size:13px; font-weight:500;}
.ra-carrito-lista small{color:var(--tenue); font-size:11.5px;}
.ra-cant{display:flex; align-items:center; gap:2px;}
.ra-cant button{width:22px; height:22px; border:1px solid var(--linea); background:var(--sup); border-radius:4px; line-height:1;}
.ra-cant span{min-width:22px; text-align:center; font-size:13px;}
.ra-carrito-form{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; border-top:1px solid var(--linea-suave);}
.ra-carrito-form .ra-campo.full{grid-column:1 / -1;}
.ra-totales{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--linea-suave);}
.ra-totales div{display:flex; justify-content:space-between; padding:3px 0; font-size:13px;}
.ra-totales dt{color:var(--tenue); margin:0;}
.ra-totales dd{margin:0;}
.ra-totales .tot{border-top:1px solid var(--linea); margin-top:6px; padding-top:8px; font-family:'Archivo',sans-serif; font-size:17px; font-weight:600;}
.ra-totales .tot dt{color:var(--ink);}
.ra-carrito-acc{display:flex; gap:8px; margin-top:14px;}
.ra-carrito-acc .ra-btn{flex:1;}
.ra-carrito-acc .ra-btn.primario{flex:2;}

/* ticket */
.ra-ticket table{width:100%; border-collapse:collapse; margin:10px 0;}
.ra-ticket td{padding:5px 4px; border-bottom:1px solid var(--linea-suave); font-size:13px;}
.ra-ticket-cab{margin:0 0 12px;}
.ra-ticket-cab strong{display:block; font-family:'Archivo',sans-serif; font-size:16px;}
.ra-ticket-cab span{display:block; color:var(--tenue); font-size:12.5px;}

/* movimientos y barras */
.ra-movs{list-style:none; margin:0; padding:0; font-size:13px;}
.ra-movs li{display:grid; grid-template-columns:70px 62px 1fr 46px 1fr; gap:10px; align-items:center; padding:7px 0; border-top:1px solid var(--linea-suave);}
.ra-movs li:first-child{border-top:0;}
.ra-mov-tipo{font-size:11.5px; border-radius:999px; padding:1px 8px; text-align:center; border:1px solid var(--linea);}
.ra-mov-tipo.entrada{color:var(--moss); border-color:#a8cfbb; background:#eaf5ef;}
.ra-mov-tipo.salida{color:var(--rose); border-color:#e0bcbd; background:#faeeee;}

.ra-barras{list-style:none; margin:0; padding:0;}
.ra-barras li{display:grid; grid-template-columns:120px 1fr 90px 46px; gap:12px; align-items:center; padding:6px 0; font-size:13px;}
.ra-barra{background:var(--linea-suave); border-radius:2px; height:8px; overflow:hidden;}
.ra-barra i{display:block; height:100%; background:var(--petroleo); border-radius:2px;}
.ra-barras b{text-align:right;}
.ra-barras small{text-align:right;}

/* aviso */
.ra-aviso{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:13.5px; box-shadow:0 8px 24px rgba(10,30,35,.3); z-index:80;}
.ra-aviso.mal{background:var(--rose);}

@media (max-width:1020px){
  .ra-pos{grid-template-columns:1fr;}
  .ra-carrito{position:static;}
}
@media (max-width:800px){
  .ra-app{flex-direction:column;}
  .ra-riel{width:100%; flex:none; height:auto; position:static; padding:14px 12px;}
  .ra-marca{padding-bottom:12px;}
  .ra-nav{flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:4px;}
  .ra-navbtn{white-space:nowrap; padding:7px 12px;}
  .ra-riel-pie{flex-direction:row; gap:12px; padding-top:12px;}
  .ra-main{padding:18px 14px 48px;}
  .ra-form{grid-template-columns:1fr;}
  .ra-h1{font-size:22px;}
  .ra-movs li{grid-template-columns:1fr; gap:2px;}
  .ra-barras li{grid-template-columns:1fr 60px; gap:6px;}
  .ra-barra{grid-column:1 / -1;}
}
@media (prefers-reduced-motion:reduce){
  .ra-app *{transition:none !important; animation:none !important;}
}


/* ============================================================
   Ajustes propios de la versión PHP
   (enlaces que actúan como botones, formularios en línea, login)
   ============================================================ */

html, body { margin:0; padding:0; }

a { color: inherit; }

.ra-btn { display:inline-block; text-decoration:none; text-align:center; }
.ra-btn.ancho { width:100%; }

a.ra-navbtn { text-decoration:none; }

.ra-acc a { color:var(--petroleo); font-weight:500; font-size:12.5px; text-decoration:none; padding:2px 6px; }
.ra-acc a:hover { text-decoration:underline; }
.ra-acc .ra-enlinea { display:inline; }
.ra-acc .ra-enlinea button { background:none; border:0; }

.ra-enlinea { display:inline-flex; gap:6px; align-items:center; margin:0; }
.ra-cab-acc .ra-enlinea { gap:6px; }

a.ra-desplegar, a.ra-cerrar { text-decoration:none; display:inline-block; }

.ra-mascota footer form { display:inline; }

/* catálogo del punto de venta: cada tarjeta va dentro de su formulario */
.ra-item-form { display:contents; }
.ra-item { width:100%; font:inherit; color:inherit; }
.ra-cant form { display:inline-flex; margin:0; }
.ra-vaciar { margin-top:10px; text-align:center; }
.ra-vaciar button { background:none; border:0; }

.ra-buscar { margin:0; }

.ra-usuario { font-size:12.5px; color:#8fb7b5; padding:0 8px; }

.ra-alerta.rojo { background:#faeeee; border-color:#e0bcbd; color:var(--rose); }

.ra-tabla tfoot td:first-child { color:var(--tenue); font-weight:400; }

/* pantalla de acceso */
.ra-app-login { display:block; background:var(--petroleo); }
.ra-login { max-width:340px; margin:0 auto; padding:14vh 20px 40px; }
.ra-login-marca { text-align:center; color:#dcebea; margin-bottom:20px; }
.ra-login-marca span { font-size:30px; display:block; }
.ra-login-marca strong { display:block; font-family:'Archivo',sans-serif; font-size:22px; color:#fff; margin-top:8px; }
.ra-login-marca small { color:#8fb7b5; font-size:12.5px; }
.ra-login-caja { background:var(--sup); border-radius:8px; padding:22px; display:flex; flex-direction:column; gap:12px; }

/* impresión del comprobante */
@media print {
  .ra-riel, .ra-cab, .ra-franja, .ra-filtros, .ra-tabla-caja, .ra-panel, .ra-form-pie, .ra-aviso { display:none !important; }
  .ra-capa { position:static; background:none; padding:0; }
  .ra-modal { box-shadow:none; max-width:100%; }
  .ra-cerrar { display:none; }
  .ra-app { display:block; background:#fff; }
}
.ra-totales div[hidden]{display:none;}