/* ==========================================================
   BASE
   ========================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#222;line-height:1.5;
}
a{color:#075e54}
.muted{color:#888;font-size:.9rem;text-align:center;padding:16px}
.btn{
  background:#e0e0e0;color:#222;border:0;padding:9px 16px;border-radius:8px;
  font-size:.9rem;font-weight:500;cursor:pointer;font-family:inherit;
}
.btn:hover{background:#d0d0d0}
.btn.primary{background:#075e54;color:#fff}
.btn.primary:hover{background:#0b7a6c}
.btn.small{padding:5px 10px;font-size:.8rem}
.btn.danger{background:#c62828;color:#fff}
.btn.danger:hover{background:#b71c1c}

/* ==========================================================
   LANDING
   ========================================================== */
.page-landing{background:#f7f4ee}
.landing-wrap{max-width:880px;margin:0 auto;padding:48px 20px}
.landing-wrap h1{font-size:2.2rem;color:#1d3b2a;margin-bottom:16px}
.landing-wrap .lead{font-size:1.05rem;margin-bottom:24px}
.card{background:#fff;border-radius:12px;padding:24px;margin:16px 0;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.card h2{font-size:1.3rem;color:#1d3b2a;margin-bottom:12px}
.card ul{padding-left:24px;margin-bottom:16px}
.card li{margin-bottom:6px}
.card .btn.primary{display:inline-block;text-decoration:none;margin-top:8px}

/* ==========================================================
   LOGIN
   ========================================================== */
.page-login{
  background:#e5ddd5;min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.login-box{
  background:#fff;border-radius:16px;padding:32px 28px;
  width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.15);
}
.login-box h1{color:#075e54;font-size:1.3rem;margin-bottom:4px}
.login-box .sub{color:#666;font-size:.88rem;margin-bottom:24px}
.login-box label{display:block;font-size:.85rem;color:#333;margin-bottom:14px;font-weight:500}
.login-box input{
  width:100%;padding:10px 12px;margin-top:6px;border:1px solid #ccc;
  border-radius:8px;font-size:.95rem;outline:none;font-family:inherit;
}
.login-box input:focus{border-color:#075e54}
.login-box button{
  width:100%;padding:12px;background:#075e54;color:#fff;border:0;
  border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;margin-top:8px;
}
.login-box button:hover{background:#0b7a6c}
.login-box button:disabled{opacity:.5;cursor:not-allowed}
.error{
  margin-top:12px;color:#c62828;font-size:.85rem;
  background:#ffebee;padding:8px 12px;border-radius:6px;
}

/* ==========================================================
   CHAT
   ========================================================== */
.page-chat{
  background:#e5ddd5;
  display:flex;align-items:center;justify-content:center;
  padding:12px;
}
.chat-container{
  width:100%;max-width:440px;height:calc(100vh - 24px);max-height:760px;
  background:#fff;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
}
.chat-header{
  background:#075e54;color:#fff;padding:14px 16px;
  display:flex;align-items:center;gap:12px;
}
.chat-header .avatar{
  width:44px;height:44px;border-radius:50%;background:#0b7a6c;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.chat-header h2{font-size:1rem;font-weight:600}
.chat-header p{font-size:.78rem;opacity:.85}

.chat-messages{
  flex:1;overflow-y:auto;padding:16px 12px;
  background:#ece5dd;
  display:flex;flex-direction:column;gap:8px;
}
.message{display:flex;max-width:85%}
.message.user{align-self:flex-end;justify-content:flex-end}
.message.bot{align-self:flex-start}
.message-content{
  padding:8px 12px;border-radius:12px;font-size:.92rem;line-height:1.35;
  word-wrap:break-word;
}
.message.bot .message-content{background:#fff;border-top-left-radius:2px}
.message.user .message-content{background:#dcf8c6;border-top-right-radius:2px}

.options-container{
  display:flex;flex-direction:column;gap:6px;
  align-self:stretch;margin-top:4px;
}
.option-btn{
  background:#fff;border:1px solid #c8e6c9;color:#075e54;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  font-size:.9rem;text-align:left;font-weight:500;
  transition:background .15s;font-family:inherit;
}
.option-btn:hover{background:#f0fff4}
.option-btn.special{background:#075e54;color:#fff;border-color:#075e54;font-weight:600}
.option-btn.special:hover{background:#0b7a6c}

.producto-card{
  background:#fff;border:1px solid #e0e0e0;border-radius:10px;
  padding:10px 12px;cursor:pointer;transition:border-color .15s;
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
}
.producto-card:hover{border-color:#075e54}
.producto-card .info{flex:1;min-width:0}
.producto-card strong{display:block;color:#075e54;font-size:.95rem;margin-bottom:2px}
.producto-card .precio{font-size:.85rem;color:#333}
.producto-card .oferta{
  display:inline-block;background:#fff3cd;color:#856404;
  padding:1px 8px;border-radius:6px;font-size:.75rem;margin-top:4px;
}
.producto-card.agotado{opacity:.5;cursor:not-allowed}

.typing-indicator{
  display:none;padding:8px 16px;background:#ece5dd;
}
.typing-indicator span{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#999;margin-right:4px;animation:bounce 1.2s infinite;
}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes bounce{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-6px)}
}

.chat-input{
  display:flex;gap:8px;padding:10px;background:#f0f0f0;border-top:1px solid #ddd;
}
.chat-input input{
  flex:1;border:1px solid #ccc;border-radius:20px;
  padding:10px 14px;font-size:.92rem;outline:none;font-family:inherit;
}
.chat-input input:focus{border-color:#075e54}
.chat-input button{
  background:#075e54;color:#fff;border:0;border-radius:20px;
  padding:0 18px;font-weight:600;cursor:pointer;font-family:inherit;
}
.chat-input button:disabled{opacity:.5;cursor:not-allowed}

.resumen{
  background:#fff;padding:10px 12px;border-radius:10px;font-size:.88rem;line-height:1.5;
}
.resumen ul{list-style:none;padding:0;margin:6px 0}
.resumen li{display:flex;justify-content:space-between;padding:2px 0}
.resumen .total{border-top:1px solid #eee;margin-top:6px;padding-top:6px;font-weight:700}

/* ==========================================================
   ADMIN
   ========================================================== */
.page-admin{background:#f7f4ee}
.topbar{
  background:#075e54;color:#fff;padding:16px 24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.topbar h1{font-size:1.15rem}
.topbar .sub{font-size:.8rem;opacity:.8}
.topbar nav{display:flex;gap:16px;font-size:.9rem}
.topbar a{color:#fff;text-decoration:none;opacity:.9}
.topbar a:hover{opacity:1;text-decoration:underline}

.wrap{max-width:1100px;margin:0 auto;padding:24px}
.page-admin .card{
  background:#fff;border-radius:12px;padding:20px;
  margin-bottom:24px;box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.card-head h2{color:#075e54;font-size:1.1rem}
.filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.table-wrap{overflow-x:auto}
.page-admin table{width:100%;border-collapse:collapse;font-size:.9rem}
.page-admin th{
  text-align:left;padding:10px 8px;border-bottom:2px solid #eee;
  font-size:.8rem;color:#666;text-transform:uppercase;letter-spacing:.03em;
}
.page-admin td{padding:8px;border-bottom:1px solid #f0f0f0}
.page-admin td input{
  width:100%;border:1px solid #ddd;border-radius:6px;
  padding:6px 8px;font-size:.9rem;font-family:inherit;
}
.page-admin td input[type=number]{max-width:110px}

.pedido{
  border:1px solid #e0e0e0;border-radius:10px;padding:14px 16px;margin-bottom:12px;
  display:flex;flex-direction:column;gap:8px;
}
.pedido-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px}
.pedido-head strong{font-size:1rem;color:#075e54}
.pedido-head .meta{font-size:.82rem;color:#666}
.pedido-lineas{list-style:none;padding:0;font-size:.9rem}
.pedido-lineas li{display:flex;justify-content:space-between;padding:3px 0}
.pedido-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.estado-pendiente{background:#fff3cd;color:#856404;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:600}
.estado-preparado{background:#d1ecf1;color:#0c5460;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:600}
.estado-entregado{background:#d4edda;color:#155724;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:600}

.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.modal[hidden]{display:none}
.modal-box{
  background:#fff;border-radius:12px;padding:24px;
  width:100%;max-width:420px;
}
.modal-box h3{margin-bottom:16px;color:#075e54}
.modal-box label{display:block;margin-bottom:12px;font-size:.85rem;color:#333;font-weight:500}
.modal-box input{
  width:100%;padding:9px 12px;border:1px solid #ccc;border-radius:8px;
  font-size:.95rem;margin-top:4px;font-family:inherit;
}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

.print-only{display:none}
.ticket{
  font-family:'Courier New',monospace;font-size:12pt;line-height:1.3;
  padding:10mm;page-break-after:always;max-width:80mm;margin:0 auto;
}
.ticket h2{font-size:14pt;text-align:center;margin-bottom:6px}
.ticket .head{margin-bottom:8px;border-bottom:1px dashed #000;padding-bottom:8px}
.ticket .head div{display:flex;justify-content:space-between;font-size:11pt}
.ticket ul{list-style:none;padding:0;margin:8px 0;border-bottom:1px dashed #000;padding-bottom:8px}
.ticket li{display:flex;justify-content:space-between;padding:2px 0}
.ticket .total{display:flex;justify-content:space-between;font-weight:bold;font-size:12pt;margin-top:6px}
.ticket .foot{margin-top:10px;text-align:center;font-size:10pt}

@media print{
  body > *:not(#printContainer){display:none !important}
  .print-only{display:block !important}
  .ticket{page-break-after:always}
  .ticket:last-child{page-break-after:auto}
}

/* ==========================================================
   AJUSTES PANEL ADMIN
   ========================================================== */
.acciones-producto {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.pedido-estado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ==========================================================
   PRESETS DE HORARIO
   ========================================================== */
.horario-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #f0f7f5;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  margin-bottom: 14px;
}
.presets-label {
  font-size: .85rem;
  font-weight: 600;
  color: #075e54;
  margin-right: 4px;
}
.preset-btn {
  background: #fff;
  border: 1px solid #c8e6c9;
  color: #075e54;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background .15s;
}
.preset-btn:hover {
  background: #075e54;
  color: #fff;
}
.preset-clear {
  border-color: #ffcdd2;
  color: #c62828;
  margin-left: auto;
}
.preset-clear:hover {
  background: #c62828;
  color: #fff;
}