/* Estilo general de CotiMaker. Colores de la marca: azul #302070 y verde #409050. */
:root {
  --azul: #302070; --azul-claro: #ece9f7; --verde: #409050; --verde-claro: #e6f4e9;
  --rojo: #c0392b; --rojo-claro: #fbeae8; --ambar: #a15c00; --ambar-claro: #fff4e0;
  --texto: #1e1e2a; --gris: #5b5b6b; --borde: #d9d9e3; --fondo: #f5f5f9; --blanco: #fff;
  --radio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--texto); background: var(--fondo); }
a { color: var(--azul); }
h1 { font-size: 1.6rem; margin: 0 0 4px; color: var(--azul); }
h2 { font-size: 1.15rem; margin: 0 0 12px; color: var(--azul); }
p.ayuda, .ayuda { color: var(--gris); font-size: .9rem; margin: 2px 0 0; }

/* Barra superior */
.barra { background: var(--azul); color: #fff; border-bottom: 4px solid var(--verde); }
.barra .in { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.barra .marca { font-weight: 800; font-size: 1.1rem; color: #fff; text-decoration: none; margin-right: 10px; }
.barra nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.barra nav a { color: #e4e0f5; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: .95rem; }
.barra nav a:hover, .barra nav a.activo { background: rgba(255,255,255,.16); color: #fff; }
.barra .yo { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.barra .yo a { color: #fff; }
.barra .yo button { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.etiqueta-admin { background: var(--verde); color: #fff; border-radius: 99px; font-size: .72rem; padding: 2px 8px; font-weight: 700; letter-spacing: .5px; }

.pagina { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
.estrecha { max-width: 640px; }

/* Tarjetas */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin-bottom: 16px; }
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.acceso { display: block; text-decoration: none; color: var(--texto); background: var(--blanco); border: 2px solid var(--borde); border-radius: 14px; padding: 22px 18px; transition: .12s; }
.acceso:hover { border-color: var(--azul); box-shadow: 0 4px 14px #30207022; transform: translateY(-1px); }
.acceso .icono { font-size: 2rem; }
.acceso b { display: block; font-size: 1.15rem; color: var(--azul); margin-top: 6px; }
.acceso span { color: var(--gris); font-size: .92rem; }
.acceso.principal { background: var(--azul); border-color: var(--azul); }
.acceso.principal b, .acceso.principal span { color: #fff; }
.numero { font-size: 1.8rem; font-weight: 800; color: var(--azul); }

/* Formularios */
label { display: block; font-weight: 600; margin-top: 12px; font-size: .93rem; }
input, select, textarea { width: 100%; padding: 10px 12px; margin-top: 4px; font: inherit; border: 1px solid #bdbdcc; border-radius: 8px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 3px solid #302070; outline-offset: -1px; border-color: transparent; }
input[type=checkbox], input[type=radio] { width: auto; margin: 0 8px 0 0; }
.casilla { display: flex; align-items: flex-start; font-weight: 500; }
.casilla input { margin-top: 5px; }
.fila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fila.dos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Botones */
.btn { display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--azul); background: var(--azul); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; }
.btn:hover { filter: brightness(1.12); }
.btn.verde { background: var(--verde); border-color: var(--verde); }
.btn.claro { background: #fff; color: var(--azul); }
.btn.rojo { background: #fff; color: var(--rojo); border-color: var(--rojo); }
.btn.chico { padding: 5px 11px; font-size: .88rem; }
.btn.ancho { width: 100%; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Avisos */
.aviso { padding: 12px 14px; border-radius: 8px; margin: 0 0 14px; border: 1px solid; }
.aviso.ok { background: var(--verde-claro); border-color: #a9d6b2; color: #1d5a2b; }
.aviso.error { background: var(--rojo-claro); border-color: #e8b4ae; color: #8f261b; }
.aviso.info { background: var(--azul-claro); border-color: #cfc8ec; color: var(--azul); }
.aviso.alerta { background: var(--ambar-claro); border-color: #f0d49b; color: var(--ambar); }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #ececf3; vertical-align: middle; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--gris); background: #fafafd; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.apagado td { color: #999; }
.pastilla { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .8rem; font-weight: 700; border: 1px solid; }
.pastilla.verde { color: #1d5a2b; background: var(--verde-claro); border-color: #a9d6b2; }
.pastilla.ambar { color: var(--ambar); background: var(--ambar-claro); border-color: #f0d49b; }
.pastilla.gris { color: var(--gris); background: #f0f0f5; border-color: var(--borde); }
.pastilla.azul { color: var(--azul); background: var(--azul-claro); border-color: #cfc8ec; }
details.editar { margin: 0; }
details.editar > summary { cursor: pointer; color: var(--azul); font-weight: 600; font-size: .92rem; list-style: none; }
details.editar[open] > summary { margin-bottom: 8px; }
details.editar .caja { background: #fafafd; border: 1px solid var(--borde); border-radius: 8px; padding: 12px; min-width: 260px; }

/* Cotizador */
.cotizador { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cotizador { grid-template-columns: 1.15fr .85fr; align-items: start; } .lateral { position: sticky; top: 12px; } }
#lista_productos { max-height: 260px; overflow: auto; border: 1px solid var(--borde); border-radius: 8px; margin-top: 8px; background: #fff; }
#lista_productos button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eee; background: transparent; padding: 9px 12px; cursor: pointer; font: inherit; }
#lista_productos button:hover, #lista_productos button:focus { background: var(--azul-claro); outline: none; }
#lista_productos small { color: var(--gris); display: block; }
.sin-resultados { padding: 12px; color: var(--gris); }
.carrito-vacio { color: var(--gris); text-align: center; padding: 22px 8px; }
.carrito-linea { border-bottom: 1px solid #eee; padding: 10px 0; }
.carrito-linea .nombre { font-weight: 600; font-size: .95rem; }
.carrito-linea .controles { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.carrito-linea input[type=number] { width: 84px; margin: 0; padding: 6px 8px; }
.carrito-linea select { width: auto; margin: 0; padding: 6px 8px; }
.fijo { font-size: .8rem; color: var(--verde); font-weight: 700; }
.resumen-linea { display: flex; justify-content: space-between; padding: 3px 0; }
.resumen-linea.total { font-size: 1.3rem; font-weight: 800; color: var(--azul); border-top: 2px solid var(--azul); margin-top: 6px; padding-top: 8px; }
.pestanas { display: flex; gap: 6px; margin-bottom: 16px; }
.pestanas a { padding: 10px 16px; border-radius: 10px 10px 0 0; text-decoration: none; font-weight: 700; background: #e3e3ee; color: var(--gris); }
.pestanas a.activo { background: var(--azul); color: #fff; }

/* Acceso */
.centrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(160deg, var(--azul), #1b1245); }
.centrada .tarjeta { width: 100%; max-width: 400px; padding: 28px; }
.centrada h1 { text-align: center; }
.oculto { display: none !important; }

/* ---------- Celular: cómodo, rápido, a un toque ---------- */
.tabbar, .hoja-mas, .barra-calc { display: none; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: #1e1e2a; color: #fff; padding: 10px 18px; border-radius: 99px; font-weight: 700; z-index: 60; box-shadow: 0 4px 14px #0005; }
.paso { display: inline-flex; align-items: center; gap: 4px; }
.paso button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--azul); background: #fff; color: var(--azul); font-size: 1.3rem; font-weight: 800; cursor: pointer; padding: 0; }
.paso input[type=number] { width: 64px; margin: 0; text-align: center; }
.paso input[type=number]::-webkit-outer-spin-button, .paso input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paso input[type=number] { -moz-appearance: textfield; }

@media (max-width: 760px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
  .barra .in { padding: 8px 14px; flex-wrap: nowrap; }
  .barra nav, .barra .yo { display: none; }
  .barra .marca { margin: 0; }
  .pagina { padding: 14px 12px 24px; }
  h1 { font-size: 1.35rem; }

  /* Controles grandes: el dedo no es un cursor. 16px evita el zoom automático de iPhone. */
  input, select, textarea { font-size: 16px; min-height: 46px; }
  .btn { min-height: 46px; padding: 11px 18px; }
  .btn.chico { min-height: 40px; padding: 8px 14px; font-size: .95rem; }
  .acciones .btn { flex: 1 1 140px; }
  .tarjeta { padding: 14px; }
  .pestanas a { flex: 1; text-align: center; }

  /* Barra inferior */
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--borde);
            padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 12px #0002; }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px; font-size: .68rem; font-weight: 700;
            color: var(--gris); text-decoration: none; background: transparent; border: 0; font-family: inherit; cursor: pointer; min-height: 56px; }
  .tabbar span { font-size: 1.35rem; line-height: 1; }
  .tabbar a.activo { color: var(--azul); box-shadow: inset 0 3px 0 var(--verde); background: var(--azul-claro); }
  .hoja-mas { display: block; position: fixed; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 50; background: #fff; border: 1px solid var(--borde);
              border-radius: 14px; box-shadow: 0 8px 28px #0004; min-width: 230px; overflow: hidden; }
  .hoja-mas.oculto { display: none !important; }
  .hoja-mas .quien { padding: 12px 16px; background: var(--azul); color: #fff; font-weight: 700; }
  .hoja-mas a, .hoja-mas button { display: block; width: 100%; text-align: left; padding: 15px 16px; font: inherit; font-weight: 600; color: var(--texto); background: #fff;
              border: 0; border-top: 1px solid #eee; text-decoration: none; cursor: pointer; }
  .hoja-mas form { margin: 0; }

  /* Tablas como tarjetas */
  .tabla-scroll { overflow: visible; }
  table.cards, table.cards tbody { display: block; width: 100%; background: transparent; }
  table.cards thead { display: none; }
  table.cards tr { display: block; background: #fff; border: 1px solid var(--borde); border-radius: 12px; margin: 0 0 10px; padding: 6px 12px; }
  table.cards td { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; padding: 7px 0; border: 0; border-bottom: 1px dashed #ececf3; }
  table.cards td:last-child { border-bottom: 0; }
  table.cards td::before { content: attr(data-label); font-weight: 700; color: var(--gris); font-size: .74rem; text-transform: uppercase; text-align: left; flex: 0 0 34%; }
  table.cards td[data-label=""]::before { display: none; }
  table.cards td[colspan] { display: block; text-align: center; }
  table.cards td.num { white-space: normal; }
  table.cards td, table.cards td > * { min-width: 0; overflow-wrap: anywhere; }
  table.cards td:last-child:not([data-label]):not([colspan]) { justify-content: flex-start; flex-wrap: wrap; }
  .tarjeta.tabla-scroll { background: transparent; border: 0; padding: 0 !important; }

  /* Cotizador: primero los productos (lo que más se usa), luego los datos del cliente */
  .cotizador > div:first-child { display: flex; flex-direction: column; }
  .cotizador > div:first-child > section:nth-of-type(2) { order: -1; }
  #lista_productos { max-height: 46vh; }
  #lista_productos button { padding: 13px 12px; min-height: 52px; font-size: 1rem; }
  .carrito-linea { padding: 12px 0; }
  .carrito-linea .controles select { flex: 1 1 140px; min-width: 0; }
  .barra-calc { display: flex; position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 35; align-items: center; gap: 12px;
                background: var(--azul); color: #fff; padding: 10px 14px; box-shadow: 0 -3px 14px #0003; }
  .barra-calc.oculto { display: none !important; }
  .barra-calc .n { flex: 1; font-weight: 700; }
  .barra-calc button { background: var(--verde); color: #fff; border: 0; border-radius: 10px; padding: 12px 22px; font: inherit; font-weight: 800; min-height: 46px; }
  .toast { bottom: 150px; }
}

@media (max-width: 760px) {
  .pestanas-admin { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pestanas-admin::-webkit-scrollbar { display: none; }
  .pestanas-admin a { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }
}

.etiqueta { display:inline-block; border-radius:99px; font-size:.72rem; padding:2px 8px; font-weight:700; background:#e8eef5; color:#234; }
.etiqueta.muni { background:#fff1c9; color:#6b4a00; }