:root{font-family:'DM Sans',system-ui,sans-serif;color:#252724;background:#f6f5f0;--red:#b83c2e;--line:#dedfd6}*{box-sizing:border-box}body{margin:0}header{height:88px;padding:20px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff}.brand{text-decoration:none;color:var(--red);font-size:37px;display:flex;gap:13px;align-items:center}.brand span{font-size:14px;letter-spacing:2px;color:#262a26}.brand b{display:block}.local{font-size:12px;color:#62715d}main{max-width:1200px;margin:0 auto;padding:45px 28px}h1{font-size:36px;letter-spacing:-1.2px;margin:10px 0}h2{font-size:23px;margin-top:0}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--red);font-weight:700}.muted{color:#71786e;line-height:1.6}.hero{max-width:730px;margin:60px auto}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:35px}.card,.panel{background:white;border:1px solid var(--line);border-radius:15px;padding:28px}.card{text-align:left;cursor:pointer;color:inherit;transition:.2s}.card:hover{border-color:var(--red);transform:translateY(-3px)}.card .symbol{font-size:35px;display:block;margin-bottom:28px;color:var(--red)}.card h2{margin-bottom:9px}.card p{color:#71786e}.arrow{float:right;color:var(--red)}button,.button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:white;padding:11px 17px;color:inherit;text-decoration:none}button:hover{border-color:#adada0}.primary{background:var(--red);color:white;border-color:var(--red)}.danger{color:#a33228}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:25px}.nav{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.nav .active{background:#293b32;color:white}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-size:13px;font-weight:600;margin-bottom:17px}input,select{display:block;width:100%;font:inherit;border:1px solid var(--line);border-radius:7px;padding:11px;background:#fff;margin-top:7px}input[type=checkbox]{width:auto;display:inline;margin-right:8px}.check{font-weight:400;padding:8px 0;margin:0}.actions{display:flex;gap:10px;margin-top:25px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;padding:17px 12px;border-bottom:1px solid #edede7}th{color:#777e71;font-size:11px;text-transform:uppercase;letter-spacing:1px}.badge{background:#eef1e8;color:#4d6645;border-radius:5px;padding:4px 8px;font-size:11px}.inactive{opacity:.55}.empty{text-align:center;padding:55px;color:#747b6c}.login{max-width:460px;margin:50px auto}.notice{padding:15px;background:#f7edd9;border-radius:8px;font-size:13px;line-height:1.6}.stats{display:flex;gap:15px;margin:25px 0}.stats>div{padding:16px 25px;border:1px solid var(--line);background:#fff;border-radius:10px}.stats b{font-size:25px;display:block}.search{max-width:330px;margin:0}.component{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:10px;padding:7px}.component label{margin:0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#293b32;color:#fff;padding:14px 22px;border-radius:9px;display:none;max-width:90%;z-index:5}.error{color:#a33228;margin:12px 0}small{color:#71786e}@media(max-width:650px){.cards,.grid{grid-template-columns:1fr}.local{display:none}main{padding:25px 15px}.hero{margin:20px auto}.toolbar{align-items:flex-start;gap:15px;flex-wrap:wrap}h1{font-size:29px}.stats{flex-wrap:wrap}.panel{padding:20px}}

/* Ventas de mostrador */
.counter-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:25px;align-items:start}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}.product-tile{text-align:left;padding:22px;min-height:170px;background:white}.product-tile h3{font-size:16px;line-height:1.5}.product-tile strong{font-size:22px;color:var(--red)}.product-tile small{display:block;margin-top:12px}.order-panel{position:sticky;top:15px}.order-line{padding:20px 0;border-bottom:1px solid var(--line)}.order-line .toolbar{margin-bottom:8px;align-items:start}.order-line .actions{margin-top:12px}.order-line .actions button{font-size:12px;padding:6px 10px}.order-total{display:flex;justify-content:space-between;align-items:center;padding:25px 0;font-size:21px}.order-total strong{font-size:30px}.wide{width:100%;margin-bottom:10px}.modal-backdrop{position:fixed;inset:0;background:#18251fd9;z-index:3;overflow:auto;padding:30px 15px;display:flex;align-items:flex-start;justify-content:center}.pos-modal{width:760px;max-width:100%;box-shadow:0 20px 100px #0004}.pos-modal fieldset{border:1px solid var(--line);border-radius:10px;margin:25px 0;padding:18px}.pos-modal legend{font-weight:700;padding:0 8px}.modifier-head,.modifier-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.modifier-head{color:#757d70;font-size:12px;margin-top:14px}.modifier-row{padding:10px 0;border-bottom:1px solid #eee}.modifier-row label{margin:0}.modifier-row small{display:block;margin-left:25px}.multipliers{display:flex;gap:15px;flex-shrink:0}.multipliers label{display:flex;align-items:center;white-space:nowrap;font-size:13px}.multipliers input{margin:0 5px 0 0}.none-choice{background:#f1f3ec;padding:12px;border-radius:7px}.sticky-actions{position:sticky;bottom:0;background:white;border-top:1px solid var(--line);padding-top:15px;margin:0}.note{font-size:13px;background:#faf0db;padding:9px}button:disabled{opacity:.45;cursor:not-allowed}#print-area{display:none}@media(max-width:900px){.counter-layout{grid-template-columns:1fr}.order-panel{position:static}}@media(max-width:500px){.product-grid{grid-template-columns:1fr}.modifier-row{align-items:flex-start}.pos-modal{padding:18px}}@media print{body>header,body>main,body>#toast{display:none!important}#print-area{display:block;font-family:monospace;color:black;max-width:76mm;margin:auto;font-size:11px}#print-area h2{font-size:17px}#print-area h3{font-size:13px}#print-area article{border-top:1px dashed black;padding:8px 0;break-inside:avoid}@page{margin:7mm}}
/* Pantallas horizontales: conservar catálogo y orden visibles. */
@media screen and (min-width:700px) and (orientation:landscape){
 body:has(.counter-layout)>header{height:58px;padding:8px 20px}
 body:has(.counter-layout) .brand{font-size:29px;gap:9px}
 body:has(.counter-layout) .brand span{font-size:11px}
 main:has(.counter-layout){max-width:none;height:calc(100dvh - 58px);padding:12px 18px;display:flex;flex-direction:column;overflow:hidden}
 main:has(.counter-layout)> .toolbar{flex-shrink:0;margin-bottom:10px;gap:12px}
 main:has(.counter-layout)> .toolbar h1{font-size:24px;margin:4px 0}
 main:has(.counter-layout)> .toolbar .eyebrow{font-size:10px;letter-spacing:1px}
 main:has(.counter-layout)> .toolbar .actions{margin:0;flex-wrap:wrap}
 .counter-layout{grid-template-columns:minmax(0,1fr) clamp(280px,32vw,380px);gap:14px;flex:1;min-height:0;align-items:stretch}
 .counter-layout>section{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
 .counter-layout .nav{flex-wrap:nowrap;overflow-x:auto;flex-shrink:0;margin:0 0 10px;padding-bottom:5px}
 .counter-layout .nav button{white-space:nowrap;flex-shrink:0}
 #pos-search{margin:0;flex-shrink:0;min-height:44px}
 .product-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));overflow-y:auto;align-content:start;gap:10px;margin-top:12px;padding:0 5px 8px 0;min-height:0}
 .product-tile{padding:16px;min-height:140px;overflow-wrap:anywhere}
 .product-tile h3{font-size:15px;margin:12px 0;line-height:1.35}
 .product-tile strong{font-size:21px}.product-tile small{margin-top:8px}
 .order-panel{position:static;min-width:0;min-height:0;overflow-y:auto;padding:17px;border-radius:12px;overscroll-behavior:contain}
 .order-panel h2{font-size:20px;margin:0}.order-panel>.toolbar{margin-bottom:10px}
 .order-panel .empty{padding:25px 8px}.order-line{padding:14px 0}
 .order-line .toolbar{flex-wrap:wrap;gap:5px}.order-line small{overflow-wrap:anywhere}
 .order-total{padding:16px 0}.order-total strong{font-size:26px}
 .counter-layout button,.pos-modal button{min-height:44px}
 .order-line .actions button{font-size:13px;min-height:44px;padding:9px 12px}
 .modal-backdrop{padding:12px;align-items:stretch}
 .pos-modal{width:min(1100px,96vw);max-height:calc(100dvh - 24px);overflow-y:auto;padding:20px}
 .pos-modal>.toolbar{margin-bottom:15px}.pos-modal h2{font-size:21px}
 #configure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;align-items:start}
 #configure>label,#configure>.error,#configure>.sticky-actions{grid-column:1/-1}
 #configure>fieldset{min-width:0;margin:0;padding:12px}
 #configure legend{font-size:14px;overflow-wrap:anywhere}
 .modifier-row{gap:6px}.modifier-row>.check{min-width:0;font-size:13px;line-height:1.4}
 .modifier-row input[type=checkbox],.none-choice input[type=checkbox]{width:20px;height:20px;vertical-align:middle;flex-shrink:0}
 .multipliers{gap:6px}.multipliers label{min-height:44px;padding:4px}
 #configure>.sticky-actions{padding:12px 0 2px;z-index:1;box-shadow:0 -8px 12px #fff}
}
@media screen and (min-width:700px) and (max-width:850px) and (orientation:landscape){
 main:has(.counter-layout){padding:10px}.counter-layout{grid-template-columns:minmax(0,1fr) 280px;gap:10px}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-tile{padding:12px}
 main:has(.counter-layout)> .toolbar h1{font-size:20px}
 body:has(.counter-layout) .local{display:none}
}
/* Identidad original de Estación Ramen, sin alterar el archivo del logo. */
:root{--red:#906019}
.brand>.logo-frame,.welcome-brand>.logo-frame{display:block;overflow:hidden;background:white;border-radius:6px;width:92px;height:65px;letter-spacing:normal}
.logo-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.welcome-brand{display:flex;justify-content:center;margin:0 0 20px}
.welcome-brand>.logo-frame{width:280px;height:198px;border-radius:12px}
.hero:has(.welcome-brand){margin:22px auto}.hero:has(.welcome-brand)>h1,.hero:has(.welcome-brand)>.eyebrow,.hero:has(.welcome-brand)>.muted{text-align:center}
.brand{flex-shrink:0}
@media screen and (min-width:700px) and (orientation:landscape){body:has(.counter-layout) .brand>.logo-frame{width:67px;height:47px}}
@media screen and (max-height:650px) and (orientation:landscape){.welcome-brand>.logo-frame{width:180px;height:127px}.welcome-brand{margin-bottom:10px}.hero:has(.welcome-brand){margin:0 auto}.hero .cards{margin-top:18px}.hero .card{padding:20px}.hero .card .symbol{margin-bottom:12px}}
@media screen and (min-width:700px) and (orientation:landscape){
 main:has(.welcome-brand){padding-top:18px;padding-bottom:18px}
 .hero:has(.welcome-brand){margin:0 auto}
 .welcome-brand>.logo-frame{width:235px;height:166px}
 .hero:has(.welcome-brand) .cards{margin-top:22px}
 .hero:has(.welcome-brand) .card{padding:22px}
 .hero:has(.welcome-brand) .card .symbol{margin-bottom:15px;font-size:28px}
}
/* Botones compactos en todas las pantallas. */
@media screen{
 button,.button{padding:7px 11px;font-size:13px;border-radius:6px;min-height:32px}
 .card{padding:18px;min-height:0}
 .card .symbol{font-size:27px;margin-bottom:14px}
 .card h2{font-size:19px}.card p{font-size:13px;margin:9px 0}
 .product-tile{padding:12px;min-height:115px}
 .product-tile h3{font-size:14px;margin:9px 0;line-height:1.35}
 .product-tile strong{font-size:19px}.product-tile small{margin-top:6px;font-size:11px}
 .order-line .actions button{padding:5px 8px;min-height:30px;font-size:12px}
 .counter-layout button,.pos-modal button{min-height:32px}
 .counter-layout .nav{gap:6px}
 .wide{padding:8px 10px;margin-bottom:7px}
 .actions{gap:7px}
 .hero:has(.welcome-brand) .card{padding:18px}
 .hero:has(.welcome-brand) .card .symbol{font-size:25px;margin-bottom:10px}
}
@media screen{
 .checkout-grid,.print-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1fr);gap:24px}
 .checkout-summary{background:#f7f6f1;padding:18px;border-radius:10px;max-height:60vh;overflow:auto}
 .checkout-line{padding:12px 0;border-bottom:1px solid var(--line)}.checkout-line small{display:block;line-height:1.6;margin-top:8px}
 #cash-shortcuts{flex-wrap:wrap;margin:8px 0}.cash-change{background:#eff3e9;border-radius:8px;padding:15px;font-size:20px;font-weight:700}
 .paper-preview-wrap{background:#e9e9e2;padding:18px;overflow:auto;max-height:65vh;display:flex;justify-content:center;align-items:flex-start}
 .receipt-paper{background:white;padding:4mm;box-shadow:0 2px 10px #0002;flex-shrink:0}
 [hidden]{display:none!important}
 @media(max-width:700px){.checkout-grid,.print-layout{grid-template-columns:1fr}.checkout-summary{max-height:35vh}}
}
.receipt-paper{font-family:monospace;color:#000;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.paper-heading{text-align:center}.paper-heading h2{font-size:17px;margin:8px 0}.paper-heading h3{font-size:13px;margin:8px 0}
.paper-heading p{margin:6px 0}.paper-heading .folio{font-size:19px;font-weight:bold}
.paper-logo{width:34mm;height:24mm;overflow:hidden;margin:auto}.paper-logo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.paper-row{display:flex;justify-content:space-between;gap:10px;align-items:start}.paper-row>:first-child{min-width:0}.paper-row>:last-child:not(:first-child){flex-shrink:0}
.paper-item{border-top:1px dashed #000;padding:12px 0;break-inside:avoid}.paper-group{margin:8px 0}.paper-note{font-size:13px;border:1px solid black;padding:5px;font-weight:bold}
.paper-total{border-top:2px solid #000;font-size:18px;padding-top:10px}.paper-end{text-align:center;margin:16px 0}.receipt-paper small{color:black;font-size:10px}
@media print{#print-area.receipt-paper{font-size:11px;padding:0;box-shadow:none;margin:0 auto}.paper-logo{print-color-adjust:exact}#print-area .paper-heading h2{font-size:17px}}
@media screen{.simulation-documents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.simulation-documents h3{text-align:center}.simulation-documents .paper-preview-wrap{max-height:57vh}.pos-modal:has(.simulation-documents){width:min(1050px,96vw)}@media(max-width:700px){.simulation-documents{grid-template-columns:1fr}}}
@media screen{
 .didi-cash-control{background:#fff1d7;border:1px solid #c79a4e;border-radius:7px;padding:8px 12px;white-space:nowrap}
 .didi-mode .product-tile>strong,.didi-mode .order-panel>.order-total,.didi-mode .order-line>.toolbar>b,.didi-mode #config-total,.didi-mode .modifier-row small,.didi-mode .pos-modal>.toolbar>div>span{color:#c5c5c0}
}
.paper-heading .paper-platform{font-family:Arial,sans-serif;font-size:30px;font-weight:900;line-height:1.15;text-align:center;border-top:3px solid #000;border-bottom:3px solid #000;padding:8px 0;margin-bottom:10px;letter-spacing:1px}