:root {
  /* Paleta de la papeleria */
  --marca-rosa:     #FF6B9D;
  --marca-turquesa: #4ECDC4;
  --marca-amarillo: #FFEE7C;
  --marca-oscuro:   #2C3E50;
  --marca-crema:    #F8F1E9;

  /* El rosa y el turquesa de marca son demasiado claros para llevar texto blanco
     encima (no se leerian). Estas son las mismas tintas, mas oscuras, para los
     botones; el color de marca puro se usa en acentos, bordes y fondos suaves. */
  --rosa-fuerte:     #C91D56;
  --rosa-mas-fuerte: #A81447;
  --turquesa-fuerte: #157570;

  /* Superficies */
  --fondo:  var(--marca-crema);
  --panel:  #ffffff;
  --borde:  #e5dacb;
  --texto:  var(--marca-oscuro);
  --suave:  #6c7a89;
  --hover:  #f5efe7;
  --fila-hover: #fdf9f4;

  /* Acciones y estados. Los de estado siguen siendo semaforo aunque no sean de
     la paleta: el cajero tiene que distinguir un aviso de un boton cualquiera. */
  --primario:     var(--rosa-fuerte);
  --primario-osc: var(--rosa-mas-fuerte);
  --exito:        var(--turquesa-fuerte);
  --peligro:      #c0392b;
  --aviso:        #7a5406;

  /* Fondos suaves para etiquetas y resaltados */
  --tinte-rosa:     #ffe8f0;
  --tinte-turquesa: #dff6f4;
  --tinte-amarillo: #fff8cf;
  --tinte-rojo:     #fbe3e0;
  --tinte-neutro:   #f1eae0;

  --sombra: 0 1px 3px rgba(44, 62, 80, .12);
  --radio: 8px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.45 "Segoe UI", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}
.oculto { display: none !important; }

/* ---------- Ingreso ---------- */
.login {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(155deg, #2c3e50 0%, #24404b 55%, #15514f 100%);
}
.login-caja {
  width: 340px; background: #fff; padding: 32px; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(20, 30, 40, .35); display: grid; gap: 14px;
  border-top: 5px solid var(--marca-rosa);
}
.login-caja h1 { margin: 0; font-size: 21px; }
.login-sub { margin: -8px 0 4px; color: var(--suave); font-size: 13px; }
.error-login { color: var(--peligro); font-size: 13px; min-height: 18px; text-align: center; }

label { display: grid; gap: 4px; font-size: 13px; color: var(--suave); }
input, select, textarea {
  font: inherit; padding: 9px 10px; border: 1px solid var(--borde);
  border-radius: 6px; background: #fff; color: var(--texto); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: -1px; }
input[type=checkbox] { width: auto; }

/* ---------- Estructura ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.barra {
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--marca-oscuro); color: #fff; height: 52px; flex-shrink: 0;
}
.marca { font-size: 15px; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.logo-barra { height: 26px; width: auto; border-radius: 4px; background: #fff; padding: 2px; }
.logo-login { text-align: center; }
.logo-login img { max-width: 160px; max-height: 80px; }
.logo-login:empty { display: none; }
.logo-vista {
  width: 120px; height: 90px; flex: 0 0 auto;
  border: 1px dashed var(--borde); border-radius: var(--radio);
  display: grid; place-items: center; padding: 6px; background: var(--fondo);
}
.logo-vista img { max-width: 100%; max-height: 100%; }

/* Casilla de "pide factura" en la pantalla de venta */
.pide-factura {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  margin-top: 14px; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--fondo); color: var(--texto); font-size: 14px;
}
.pide-factura:has(input:checked) {
  border-color: var(--primario); background: var(--tinte-rosa);
}
.menu { display: flex; gap: 2px; flex: 1; }
.tab {
  background: none; border: 0; color: #b8c4d0; font: inherit; padding: 8px 14px;
  border-radius: 6px 6px 0 0; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.tab:hover { background: rgba(255, 255, 255, .09); color: #fff; }
/* La pestana activa se marca con el rosa de la marca en el borde, no en el fondo:
   el rosa claro con letra blanca encima no se leeria. */
.tab.activo {
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600;
  border-bottom-color: var(--marca-rosa);
}
.barra-derecha { display: flex; align-items: center; gap: 10px; }
.usuario { font-size: 13px; color: #b8c4d0; }
.pill {
  font-size: 12px; padding: 3px 9px; border-radius: 20px;
  background: #7c2f27; color: #ffdcd7;
}
.pill.abierta { background: var(--turquesa-fuerte); color: #d6f7f4; }

main { padding: 16px; flex: 1; }
.panel {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px;
}
.panel + .panel { margin-top: 14px; }
.panel h2 { margin: 0 0 12px; font-size: 16px; }
.panel h3 { margin: 0 0 8px; font-size: 14px; color: var(--suave); font-weight: 600; }
.fila { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fila > * { flex: 0 0 auto; }
.crece { flex: 1 1 180px; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.suave { color: var(--suave); font-size: 13px; }
.vacio { padding: 24px; text-align: center; color: var(--suave); }

/* ---------- Botones ---------- */
.btn {
  font: inherit; padding: 9px 14px; border-radius: 6px; border: 1px solid var(--borde);
  background: #fff; color: var(--texto); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-osc); }
.btn-verde { background: var(--exito); border-color: var(--exito); color: #fff; }
.btn-verde:hover { filter: brightness(.92); }
.btn-rojo { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn-rojo:hover { filter: brightness(.92); }
.btn-plano { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; padding: 6px 10px; font-size: 13px; }
.btn-plano:hover { background: rgba(255, 255, 255, .14); }
.btn-grande { padding: 12px; font-size: 16px; }
.btn-mini { padding: 4px 8px; font-size: 12px; }

/* Atajos de "lo que mas se vende": un boton por opcion, con el precio y lo que
   queda debajo del nombre. Se dejan angostos para que quepan varios por fila y
   el cajero los abarque de una mirada, sin volverse una pared de texto. */
/* stretch para que todas queden de la misma altura aunque un nombre ocupe dos
   renglones: una fila pareja se recorre de una mirada. */
.atajos { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.atajo {
  flex: 0 1 auto; min-width: 150px; max-width: 220px; line-height: 1.25;
  white-space: normal; font-size: 13px; font-weight: 600;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
}
.atajo .suave { font-size: 12px; }
/* Los nombres largos se cortan a dos renglones; el nombre completo queda en el
   title, y para eso esta el buscador. */
.atajo-nombre {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.atajo-agotado { opacity: .55; }

@media (max-width: 700px) {
  /* En el mostrador con celular vale mas que quepan dos por fila que leer el
     nombre completo. */
  .atajo { flex: 1 1 45%; min-width: 0; max-width: none; }
}


/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--borde); text-align: left; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--suave); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--fila-hover); }
.tabla-scroll { max-height: 62vh; overflow: auto; }

.etq { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--tinte-neutro); color: var(--suave); }
.etq.rojo { background: var(--tinte-rojo); color: var(--peligro); }
.etq.verde { background: var(--tinte-turquesa); color: var(--turquesa-fuerte); }
.etq.ambar { background: var(--marca-amarillo); color: var(--aviso); }

/* ---------- Pantalla de venta ---------- */
.venta { display: grid; grid-template-columns: 1fr 380px; gap: 14px; align-items: start; }

.buscador { position: relative; }
#entradaBuscar { font-size: 17px; padding: 13px 14px; }
.sugerencias {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 10px 30px rgba(44, 62, 80, .18); max-height: 320px; overflow: auto;
}
.sug { padding: 9px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.sug:hover, .sug.marcada { background: var(--tinte-rosa); }
.sug-sin { color: var(--suave); padding: 12px; }

.carrito td { padding: 6px 8px; }
.carrito input { padding: 5px 7px; text-align: right; }
.cant { width: 78px; }
.precio { width: 96px; }

.totales { display: grid; gap: 8px; }
.total-linea { display: flex; justify-content: space-between; align-items: center; }
.total-grande { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.metodo {
  padding: 9px; border: 1px solid var(--borde); border-radius: 6px; background: #fff;
  cursor: pointer; font: inherit; text-align: center;
}
.metodo.activo {
  border-color: var(--primario); background: var(--tinte-rosa);
  color: var(--primario-osc); font-weight: 600;
}

/* ---------- Avisos y modal ---------- */
.avisos { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 100; }
.aviso {
  padding: 11px 15px; border-radius: 7px; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  max-width: 380px; font-size: 14px; animation: entra .18s ease-out;
}
.aviso.ok { background: var(--exito); }
.aviso.mal { background: var(--peligro); }
.aviso.info { background: var(--marca-oscuro); }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } }

.modal {
  position: fixed; inset: 0; background: rgba(44, 62, 80, .55);
  display: grid; place-items: center; z-index: 90; padding: 20px;
}
.modal-caja {
  background: #fff; border-radius: 10px; padding: 20px; width: min(560px, 100%);
  max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.modal-caja h2 { margin: 0 0 14px; font-size: 17px; }
.acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rejilla .ancho { grid-column: 1 / -1; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.tarjeta .valor { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.tarjeta .rotulo { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .3px; }

/* ---------- Recibo impreso ---------- */
#recibo { display: none; }
/* ===========================================================================
   Pantallas pequenas (celular y tablet)
   El sistema se usa de pie, con una mano, para consultar precios y stock en el
   mostrador; por eso en movil manda el contenido y desaparece lo decorativo.
   =========================================================================== */

/* Tablet: la venta ya cae a una columna desde 1100px */
@media (max-width: 1100px) { .venta { grid-template-columns: 1fr; } }

@media (max-width: 820px) {
  main { padding: 10px; }
  .panel { padding: 13px; }
  .panel + .panel { margin-top: 10px; }

  /* --- Barra: la marca y los botones arriba, las pestanas abajo deslizables --- */
  .barra {
    height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px;
    position: sticky; top: 0; z-index: 50;
  }
  .marca { font-size: 15px; }
  .barra-derecha { margin-left: auto; gap: 6px; }
  .usuario { display: none; }          /* el nombre no cabe; el rol se ve en Ajustes */

  .menu {
    order: 3; flex: 0 0 100%; overflow-x: auto; gap: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .menu::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 9px 13px; }

  /* --- Formularios y modales a pantalla completa --- */
  .rejilla { grid-template-columns: 1fr; }
  .modal { padding: 0; place-items: stretch; }
  .modal-caja {
    width: 100%; max-width: none; height: 100%; max-height: none;
    border-radius: 0; padding: 16px 16px 0;   /* sin fondo: lo cierran las acciones */
  }
  /* Los botones quedan siempre a la vista, sin tener que bajar hasta el final
     del formulario. El contenido se desliza por detras. */
  .acciones {
    position: sticky; bottom: 0; background: #fff;
    margin: 16px -16px 0; padding: 12px 16px;
    border-top: 1px solid var(--borde);
  }
  .acciones .btn { flex: 1 1 auto; }

  /* 16px evita que el navegador del celular haga zoom al tocar un campo */
  input, select, textarea { font-size: 16px; padding: 11px 12px; }

  /* Area tactil: un dedo necesita mas que un puntero */
  .btn { padding: 11px 15px; }
  .btn-mini { padding: 9px 12px; font-size: 13px; }
  .btn-plano { padding: 6px 9px; font-size: 12px; }
  .fila { gap: 8px; }

  /* --- Listados como tarjetas ---
     Una tabla de 6 columnas no cabe en un celular. Cada fila pasa a ser una
     tarjeta y cada dato lleva delante su titulo, tomado del encabezado. */
  .tabla-scroll { max-height: none; overflow: visible; }
  .tabla-scroll > table thead { display: none; }
  .tabla-scroll > table,
  .tabla-scroll > table tbody,
  .tabla-scroll > table tr,
  .tabla-scroll > table td { display: block; width: 100%; }

  .tabla-scroll > table tr {
    border: 1px solid var(--borde); border-radius: var(--radio);
    margin-bottom: 10px; padding: 10px 12px; background: var(--panel);
  }
  .tabla-scroll > table tr:hover { background: var(--panel); }

  .tabla-scroll > table td {
    border: 0; padding: 5px 0; text-align: right;
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  }
  .tabla-scroll > table td::before {
    content: attr(data-label);
    color: var(--suave); font-size: 11px; text-transform: uppercase;
    letter-spacing: .3px; text-align: left; flex: 0 0 auto;
  }
  /* La primera celda es el titulo de la tarjeta: ocupa el ancho y no lleva rotulo */
  .tabla-scroll > table td:first-child {
    display: block; text-align: left; font-size: 15px;
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px dashed var(--borde);
  }
  .tabla-scroll > table td:first-child::before { content: none; }

  /* Los botones de la fila, en su propia linea y repartidos */
  .tabla-scroll > table td.num:last-child,
  .tabla-scroll > table td:last-child:has(.btn) {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start;
    padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--borde);
  }
  .tabla-scroll > table td:last-child:has(.btn)::before { content: none; }
  .tabla-scroll > table td:empty { display: none; }
  .tabla-scroll > table .vacio { display: block; text-align: center; }

  /* --- Venta: cada renglon del carrito es una tarjeta ---
     Nombre arriba, quitar a la derecha, y debajo cantidad x precio = total. */
  .carrito thead { display: none; }
  .carrito, .carrito tbody, .carrito tr { display: block; width: 100%; }
  .carrito tr {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 10px 12px; margin-bottom: 8px;
    display: grid; gap: 8px 10px; align-items: end;
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "nombre nombre quitar"
      "cant   precio total";
  }
  .carrito tr:hover { background: transparent; }
  .carrito td { display: block; border: 0; padding: 0; }
  .carrito td:nth-child(1) { grid-area: nombre; }
  .carrito td:nth-child(2) { grid-area: cant; }
  .carrito td:nth-child(3) { grid-area: precio; }
  .carrito td:nth-child(4) { grid-area: total; text-align: right; font-weight: 600; }
  .carrito td:nth-child(5) { grid-area: quitar; text-align: right; }
  .carrito td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 11px; color: var(--suave); text-transform: uppercase;
    letter-spacing: .3px; margin-bottom: 3px; text-align: left;
  }
  .carrito input { padding: 9px 10px; }
  .cant, .precio { width: 100%; }
  .total-grande { font-size: 26px; }
  .metodos { grid-template-columns: 1fr 1fr; }

  /* --- Tarjetas de indicadores --- */
  .tarjetas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .tarjeta { padding: 11px; }
  .tarjeta .valor { font-size: 20px; }

  .entre { flex-wrap: wrap; }
  .entre > .fila { width: 100%; }
  .fila > .crece { flex: 1 1 220px; }
  .subtabs { overflow-x: auto; }
  .subtab { flex: 0 0 auto; }
}

/* Celular angosto */
@media (max-width: 430px) {
  .marca { font-size: 14px; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .metodos { grid-template-columns: 1fr; }
  .login-caja { width: 100%; border-radius: 0; min-height: 100vh; align-content: center; }
  .login { padding: 0; }
}

@media print {
  body > *:not(#recibo) { display: none !important; }
  #recibo { display: block !important; font-family: "Consolas", monospace; font-size: 12px; width: 72mm; }
  #recibo table { width: 100%; }
  #recibo td { border: 0; padding: 1px 0; font-size: 12px; }
  @page { margin: 4mm; }
}

/* Discriminacion del IVA en el panel de cobro */
.desglose {
  border-top: 1px dashed var(--borde);
  border-bottom: 1px dashed var(--borde);
  padding: 8px 0;
  margin: 2px 0;
  display: grid;
  gap: 3px;
}
.desglose:empty { display: none; }
.desglose-linea {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums;
}
.desglose-linea.fuerte { color: var(--texto); font-weight: 600; }

/* Aviso de margen en el cargue de facturas */
.aviso-margen {
  margin-top: 10px; padding: 8px 11px; border-radius: 6px; font-size: 13px;
  background: var(--tinte-amarillo); color: var(--aviso);
}
.aviso-margen.grave { background: var(--tinte-rojo); color: var(--peligro); }

/* Sub-pestanas dentro de una pantalla */
.subtabs { display: flex; gap: 4px; margin-bottom: 14px; }
.subtab {
  font: inherit; padding: 7px 16px; border: 1px solid var(--borde); background: #fff;
  color: var(--suave); border-radius: 6px; cursor: pointer;
}
.subtab:hover { background: var(--hover); }
.subtab.activo {
  background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 600;
}

/* Selector de lista de precios en la venta */
.lista-btn.activo {
  background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 600;
}
.lista-btn.activo .suave { color: #ffd6e5; }

/* Filas de formas de venta dentro del formulario de producto */
.forma-fila {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 10px; margin-bottom: 8px; background: #fbf7f1;
}
.forma-fila .rejilla { gap: 8px; }

/* ---------- Abejita del modulo de ingreso de facturas ---------- */
/* La ilustracion viene con fondo blanco, igual que el panel, asi que se funde
   sin recorte. En pantallas angostas se apila encima del texto. */
.abeja-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.abeja-hero .abeja {
  width: 132px; height: 132px; flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(44, 62, 80, .12));
}
.abeja-hero .abeja-texto { flex: 1 1 280px; min-width: 0; }

@media (max-width: 560px) {
  .abeja-hero { gap: 10px; }
  .abeja-hero .abeja { width: 84px; height: 84px; }
}

/* ---------- Aviso de cuentas por pagar ---------- */
/* El globo rojo de la pestana: es lo unico que se ve sin entrar a buscar. */
.globo {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  background: var(--peligro); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.menu .tab .globo { background: var(--marca-rosa); color: var(--marca-oscuro); }

.recordatorio { border-left: 4px solid var(--peligro); background: var(--tinte-rojo); }

/* ---------- Bodegas ---------- */
/* Las tarjetas de arriba son el selector: se toca una y abajo sale lo que hay
   en ese sitio. Por eso tienen cursor y estado activo. */
.bodega-tarjeta { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.bodega-tarjeta:hover { border-color: var(--marca-turquesa); }
.bodega-tarjeta.activa {
  border-color: var(--turquesa-fuerte);
  box-shadow: inset 0 0 0 1px var(--turquesa-fuerte);
  background: var(--tinte-turquesa);
}
.bodega-tarjeta .rotulo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- Cotizacion impresa ---------- */
/* El recibo de venta sale en la termica de 72mm; una cotizacion se entrega en
   papel carta, asi que su hoja pisa el ancho del ticket cuando se imprime. */
@media print {
  #recibo.hoja-carta {
    width: auto; font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px; color: #000;
  }
  #recibo.hoja-carta td, #recibo.hoja-carta th { font-size: 12px; }
  @page { margin: 14mm; }
}

.cot-encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.cot-logo { max-width: 42mm; max-height: 22mm; display: block; margin-bottom: 6px; }
.cot-negocio { line-height: 1.5; }
.cot-titulo { text-align: right; }
.cot-titulo h1 { margin: 0; font-size: 22px; letter-spacing: 2px; }

.cot-para {
  margin: 18px 0 12px; padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 4px; line-height: 1.6;
}

.cot-tabla { width: 100%; border-collapse: collapse; margin-top: 6px; }
.cot-tabla th {
  text-align: left; border-bottom: 2px solid #333; padding: 6px 4px; font-size: 12px;
}
.cot-tabla th:not(:first-child), .cot-tabla td:not(:first-child) { text-align: right; }
.cot-tabla td { border-bottom: 1px solid #eee; padding: 6px 4px; }

.cot-totales { width: 62mm; margin-left: auto; margin-top: 10px; border-collapse: collapse; }
.cot-totales td { padding: 4px; }
.cot-totales td:last-child { text-align: right; }
.cot-totales tr:last-child td { border-top: 2px solid #333; font-size: 14px; }

.cot-nota { margin-top: 14px; font-style: italic; }
.cot-pie { margin-top: 18px; font-size: 10px; color: #555; line-height: 1.5; }
.cot-firma { margin-top: 24px; border-top: 1px solid #999; width: 60mm; padding-top: 4px; font-size: 11px; }