* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --fuente-sistema: Arial, sans-serif;
  --tamano-fuente-sistema: 16px;
  --color-principal-sistema: #d4af37;
  --padding-bloque-sistema: 20px;
  --radio-bloque-sistema: 15px;
}

body {
  background: #f5f1e8;
  font-family: var(--fuente-sistema);
  font-size: var(--tamano-fuente-sistema);
  color: #1f1f1f;
}

body.bloqueado-login{
  overflow:hidden;
}

body.bloqueado-login .barra-superior,
body.bloqueado-login .contenedor{
  display:none;
}

.login-portada{
  display:none;
}

body.bloqueado-login .login-portada{
  display:block;
}

.login-portada-fondo{
  min-height:100vh;
  width:100%;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.22), transparent 34%),
    linear-gradient(145deg, #101318 0%, #1f1f1f 42%, #f7f2e6 42%, #fff 100%);
}

.login-portada-card{
  width:min(440px, 100%);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(212,175,55,.55);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  padding:24px;
  display:grid;
  gap:18px;
}

.login-portada-logos{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.login-logo-principal{
  width:78px;
  height:78px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid #d4af37;
  background:#fff;
}

.login-logo-rcpos{
  width:220px;
  height:78px;
  object-fit:contain;
}

.login-portada-titulo{
  display:grid;
  gap:5px;
}

.login-portada-titulo h1{
  font-size:1.55rem;
  color:#151515;
}

.login-portada-titulo p,
.login-recuperacion p,
.login-portada-api{
  color:#6b7280;
  font-size:.9rem;
  line-height:1.35;
}

.login-portada-contenido,
.login-recuperacion{
  display:grid;
  gap:11px;
}

.login-portada input{
  width:100%;
  min-height:46px;
  border:1px solid #d6d9df;
  border-radius:10px;
  padding:0 13px;
  font-size:.95rem;
  background:#fff;
}

.login-portada input:focus{
  outline:2px solid rgba(212,175,55,.35);
  border-color:#d4af37;
}

.login-portada-boton{
  min-height:46px;
  border-radius:10px;
  box-shadow:none;
  justify-content:center;
}

.login-portada-opciones{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.login-portada-opciones button,
.login-link-boton{
  background:transparent;
  color:#6b520b;
  border:1px solid transparent;
  box-shadow:none;
  padding:7px 6px;
  font-size:.86rem;
}

.login-portada-opciones button:hover,
.login-link-boton:hover{
  background:#fff7db;
  border-color:#ead282;
}

.login-recuperacion h2{
  font-size:1.08rem;
}

.login-portada-api{
  text-align:center;
  font-size:.74rem;
  color:#8a7a4c;
}

.tarjeta,
.estado-caja,
.mesa-card,
.historial-delivery,
.delivery-cerrado,
.resumen-ventas div,
.resumen-cierres div,
.detalle-cierre-grid section,
.formulario-compras,
.resumen-compras div,
.compra-card,
.detalle-factura-panel{
  border-radius: var(--radio-bloque-sistema);
}

.tarjeta,
.estado-caja,
.mesa-card,
.historial-delivery,
.resumen-ventas div,
.resumen-cierres div,
.detalle-cierre-grid section,
.formulario-compras,
.resumen-compras div,
.compra-card,
.detalle-factura-panel{
  padding: var(--padding-bloque-sistema);
}

.barra-superior,
.menu-lateral,
.estado-caja,
.mesa-card,
.historial-delivery,
.resumen-ventas div,
.resumen-cierres div,
.detalle-cierre-grid section,
.formulario-compras,
.resumen-compras div,
.compra-card,
.detalle-factura-panel{
  border-color: var(--color-principal-sistema);
}

button,
.boton-importar,
.formulario-caja button,
.formulario-usuarios button,
.formulario-productos button,
.formulario-compras button,
.acciones-pedido button,
.tabla-compras button{
  background-color: var(--color-principal-sistema);
}

.barra-superior {
  height: 90px;
  background: #1f1f1f;
  border-bottom: 4px solid #d4af37;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 25px;
}

.logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #d4af37;
  background: white;
}

.menu-superior {
  display: flex;
  gap: 10px;
}

.area-ayuda-logo{
  align-items:center;
  display:flex;
  gap:10px;
  height:100%;
  justify-content:flex-end;
  min-width:360px;
}

.usuario-sesion-area{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.usuario-sesion-boton{
  min-width:128px;
  min-height:42px;
  padding:7px 10px;
  border-radius:9px;
  border:1px solid #d4af37;
  background:#fff8e1;
  color:#1f1f1f;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1px;
  box-shadow:none;
  cursor:pointer;
}

.usuario-sesion-boton span{
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
}

.usuario-sesion-boton small{
  font-size:10px;
  color:#5f5121;
}

.usuario-sesion-boton.sin-usuario{
  background:#1f1f1f;
  color:#fff8e1;
}

.usuario-sesion-boton.sin-usuario small{
  color:#e5c95a;
}

.logo-ayuda{
  height:76px;
  width:210px;
  object-fit:contain;
  border-radius:10px;
  display:block;
}

.login-usuario-panel{
  max-width:720px;
}

.login-usuario-form{
  margin-bottom:0;
}

.nota-login-api{
  margin:2px 0 0;
  color:#6b5a1f;
  font-size:12px;
  font-weight:700;
}

.menu-superior button,
.ayuda {

  background:#d4af37;
  color:#1f1f1f;

  border:none;

  padding:12px 18px;

  border-radius:12px;

  font-weight:bold;

  cursor:pointer;

  display:flex;
  align-items:center;
  gap:8px;

}

.menu-superior button:hover,
.ayuda:hover {
  background: #f1d36b;
}

.contenedor {
  display: flex;
  min-height: calc(100vh - 90px);
}

.menu-lateral {
  width: 260px;
  background: #ffffff;
  border-right: 3px solid #d4af37;
  padding: 25px;
}

.menu-lateral h3 {
  margin-bottom: 20px;
  color: #1f1f1f;
}

.menu-lateral button {
  width: 100%;
  display: block;
  margin-bottom: 12px;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: #1f1f1f;
  color: white;
  cursor: pointer;
  text-align: left;
}

.menu-lateral button:hover {
  background: #d4af37;
  color: #1f1f1f;
}

.contenido {
  flex: 1;
  padding: 35px;
}

.tarjeta {
  background: white;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}
/* APERTURA CAJA */

.formulario-caja{

    display:flex;
    flex-direction:column;

    gap:15px;

    max-width:400px;

    margin-top:20px;

}

.formulario-caja input{

    padding:14px;

    border-radius:10px;

    border:1px solid #ccc;

}

.formulario-caja button{

    background:#d4af37;

    border:none;

    padding:14px;

    border-radius:10px;

    font-weight:bold;

    cursor:pointer;

}

.estado-caja{

    margin-top:25px;

    background:#fff8e1;

    border:1px solid #d4af37;

    padding:20px;

    border-radius:15px;

}

.lista-categorias-gastos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
  margin-top:14px;
}

.categoria-gasto-card{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:14px;
}

.categoria-gasto-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.categoria-gasto-header small{
  display:block;
  color:#6b6250;
  font-size:12px;
  margin-bottom:3px;
}

.categoria-gasto-header h3{
  font-size:18px;
  line-height:1.2;
}

.estado-categoria-gasto{
  border-radius:999px;
  padding:4px 9px;
  font-size:12px;
  font-weight:bold;
  border:1px solid #d4af37;
  background:#fff6d6;
}

.estado-categoria-gasto.inactivo{
  border-color:#cfcfcf;
  background:#f1f1f1;
  color:#666;
}

.subcategorias-gasto{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}

.subcategorias-gasto span{
  background:#1f1f1f;
  color:white;
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
}

.acciones-categoria-gasto{
  display:flex;
  gap:8px;
}

.acciones-categoria-gasto button{
  min-width:82px;
  padding:8px 10px;
  border-radius:7px;
  box-shadow:none;
}

.categoria-gasto-vacia{
  background:#fffdf7;
  border:1px dashed #d4af37;
  border-radius:8px;
  padding:14px;
  color:#6b6250;
}

.datos-admin-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.config-page{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.config-panel{
  background:#fff;
  border:1px solid #e4d39a;
  border-radius:10px;
  padding:14px;
}

.config-selector-rol{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.config-selector-rol label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
  min-width:260px;
}

.config-selector-rol select{
  min-height:40px;
  padding:9px 11px;
  border:1px solid #ccc;
  border-radius:8px;
}

.config-selector-rol button,
.config-formulario button{
  background:#d4af37;
  border:1px solid #c59b18;
  border-radius:7px;
  box-shadow:none;
  font-weight:700;
  min-height:38px;
  padding:9px 14px;
}

#matrizPermisosSistema{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:12px;
}

.permiso-modulo-card{
  border:1px solid #e4d39a;
  border-radius:8px;
  overflow:hidden;
  background:#fffdf7;
}

.permiso-modulo-header{
  background:#fff8e1;
  border-bottom:1px solid #e4d39a;
  padding:10px 12px;
  font-weight:700;
}

.permiso-modulo-header label,
.permiso-opciones-grid label{
  display:flex;
  align-items:center;
  gap:8px;
}

.permiso-opciones-grid{
  display:grid;
  gap:8px;
  padding:12px;
  font-size:13px;
}

.config-formulario{
  max-width:none;
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:10px;
  padding:14px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px;
  align-items:end;
}

.config-formulario h2{
  grid-column:1 / -1;
}

.config-formulario input,
.config-formulario select{
  min-height:40px;
  padding:9px 11px;
  border:1px solid #ccc;
  border-radius:8px;
}

.datos-admin-encabezado{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#1f1f1f;
  color:white;
  border-left:5px solid #d4af37;
  border-radius:8px;
  padding:18px 20px;
}

.datos-admin-encabezado h2{
  margin-bottom:4px;
}

.datos-admin-encabezado p{
  color:#f1e6bf;
  line-height:1.35;
}

.datos-admin-contador{
  min-width:110px;
  text-align:center;
  background:#d4af37;
  color:#1f1f1f;
  border-radius:8px;
  padding:10px 12px;
}

.datos-admin-contador span{
  display:block;
  font-size:12px;
}

.datos-admin-contador strong{
  display:block;
  font-size:24px;
  line-height:1;
}

.datos-admin-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-bottom:0;
}

.datos-admin-grupo{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:12px;
}

.datos-admin-grupo h3{
  font-size:15px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid #ead58a;
}

.datos-admin-grupo > div{
  display:grid;
  gap:8px;
}

.datos-admin-grid button{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  text-align:left;
  border:1px solid #c8a42f;
  border-radius:8px;
  background:#fff8e1;
  color:#1f1f1f;
  box-shadow:none;
  padding:10px 12px;
}

.datos-admin-grid button:hover{
  background:#d4af37;
}

.datos-admin-grid .flecha-stock{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#1f1f1f;
  color:white;
  flex:0 0 22px;
}

.datos-admin-page > div[id^="panelDatos"]{
  background:white;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:18px;
}

.datos-admin-page > div[id^="panelDatos"] > h2{
  margin:18px 0 10px;
}

.datos-admin-page .formulario-productos{
  max-width:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  align-items:end;
  gap:12px;
  margin-bottom:18px;
}

.datos-admin-page .formulario-productos h2{
  grid-column:1 / -1;
  font-size:20px;
}

.datos-admin-page .formulario-productos button{
  min-height:45px;
}

.finanzas-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.finanzas-header{
  background:#1f1f1f;
  color:white;
  border-left:5px solid #d4af37;
  border-radius:8px;
  padding:18px 20px;
}

.finanzas-header h2{
  margin-bottom:4px;
}

.finanzas-header p{
  color:#f1e6bf;
  line-height:1.35;
}

.finanzas-resumen{
  margin:0;
}

.finanzas-formulario{
  max-width:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  align-items:end;
  gap:12px;
  margin:0;
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:16px;
}

.finanzas-formulario h2{
  grid-column:1 / -1;
  font-size:20px;
}

.finanzas-tablas{
  display:grid;
  grid-template-columns:minmax(260px, 0.8fr) minmax(420px, 1.6fr);
  gap:16px;
  align-items:start;
}

.finanzas-tablas section{
  background:white;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:14px;
  overflow:auto;
}

.banco-ingreso-layout{
  display:grid;
  grid-template-columns:minmax(300px, 0.75fr) minmax(480px, 1.25fr);
  gap:16px;
  align-items:start;
}

.banco-ingreso-layout section{
  background:white;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:14px;
  overflow:auto;
}

.finanzas-formulario-compacto{
  grid-template-columns:1fr;
  padding:14px;
}

.finanzas-formulario-compacto h2{
  font-size:18px;
}

.banco-movimientos-layout{
  grid-template-columns:1fr;
}

.finanzas-tablas h2{
  font-size:19px;
  margin-bottom:10px;
}

.resumen-admin-tablas{
  grid-template-columns:1fr;
}

.encabezado-tabla-resumen{
  align-items:center;
  display:flex;
  gap:12px;
  justify-content:space-between;
  margin-bottom:10px;
}

.encabezado-tabla-resumen h2,
.encabezado-tabla-resumen h3{
  margin:0;
}

.encabezado-tabla-resumen button{
  background:#d4af37;
  border:1px solid #c49d22;
  border-radius:6px;
  box-shadow:none;
  cursor:pointer;
  font-weight:700;
  padding:8px 11px;
}

.filtros-resumen-admin{
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}

.filtros-resumen-admin button{
  min-height:44px;
}

.filtros-resumen-admin-compactos{
  align-items:end;
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  display:grid;
  gap:10px;
  grid-template-columns:auto repeat(4, minmax(135px, 1fr)) repeat(2, minmax(115px, auto));
  padding:10px 12px;
}

.filtros-resumen-admin-compactos h2{
  font-size:17px;
  margin:0 8px 7px 0;
  white-space:nowrap;
}

.filtros-resumen-admin-compactos div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.filtros-resumen-admin-compactos label{
  color:#444;
  font-size:12px;
  font-weight:700;
}

.filtros-resumen-admin-compactos input{
  border:1px solid #ccc;
  border-radius:7px;
  min-height:38px;
  padding:8px 10px;
}

.filtros-resumen-admin-compactos button{
  background:#d4af37;
  border:1px solid #c49d22;
  border-radius:7px;
  cursor:pointer;
  font-weight:700;
  min-height:38px;
  padding:8px 12px;
}

.cuentas-pagar-filtros{
  grid-template-columns:minmax(220px, 1fr) minmax(160px, 220px) minmax(140px, 180px) minmax(190px, 230px);
  padding:12px;
}

.cuentas-pagar-filtros h2{
  font-size:17px;
  margin:0;
}

.cuentas-pagar-filtros input,
.cuentas-pagar-filtros select,
.cuentas-pagar-filtros button{
  min-height:40px;
  padding:10px 12px;
}

.resumen-admin-bloques{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}

.finanzas-bloques{
  display:grid;
  grid-template-columns:repeat(3, minmax(240px, 1fr));
  gap:14px;
}

.finanzas-bloques section,
.resumen-admin-bloques section{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:12px;
}

.finanzas-bloques h3,
.resumen-admin-bloques h3{
  font-size:16px;
  margin-bottom:10px;
}

.resumen-admin-grupo{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}

.resumen-admin-grupo > div{
  background:white;
  border:1px solid #ead58d;
  border-radius:8px;
  padding:12px;
}

.resumen-admin-grupo span{
  color:#4f4f4f;
  display:block;
  font-size:13px;
  margin-bottom:6px;
}

.resumen-admin-grupo strong{
  color:#111;
  display:block;
  font-size:20px;
}

.resumen-modos-pago-ventas{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  margin:14px 0;
  padding:12px;
}

.resumen-modos-pago-ventas h2{
  font-size:18px;
  margin-bottom:10px;
}

.resultado-admin{
  background:#f7df86 !important;
  border-color:#d4af37 !important;
}

.resultado-admin.negativo{
  background:#ffe4df !important;
  border-color:#d66954 !important;
}

.total-rojo-resumen{
  background:#ffe4df !important;
  border-color:#d66954 !important;
}

.total-rojo-resumen span,
.total-rojo-resumen strong{
  color:#9f1f12 !important;
}

.estado-aceptado-cierre{
  background:#e8f5df;
  border:1px solid #77a85b;
  border-radius:6px;
  color:#315f1e;
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:7px 9px;
}

.fila-resumen-desplegable td{
  vertical-align:middle;
}

.fila-resumen-link{
  cursor:pointer;
}

.fila-resumen-link:hover td{
  background:#fff6d8;
}

.bloque-resumen-click{
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}

.bloque-resumen-click:hover{
  transform:translateY(-1px);
  border-color:#b88b16;
  background:#fff6d8;
}

.bloque-resumen-click.activo{
  background:#f7df86;
  border-color:#b88b16;
}

.resumen-admin-vacio{
  background:#fffdf7;
  border:1px dashed #d4af37;
  border-radius:8px;
  color:#555;
  padding:18px;
}

.boton-detalle-resumen{
  background:#d4af37;
  border:1px solid #c49d22;
  border-radius:6px;
  box-shadow:none;
  color:#111;
  cursor:pointer;
  font-weight:700;
  padding:7px 10px;
}

.boton-detalle-resumen .flecha-resumen{
  display:inline-block;
  font-size:11px;
  margin-right:5px;
  transition:transform .18s ease;
}

.boton-detalle-resumen.abierto .flecha-resumen{
  transform:rotate(180deg);
}

.detalle-resumen-admin > td{
  background:#fffdf7;
  padding:10px;
}

.tabla-detalle-resumen{
  margin:0;
}

.tabla-detalle-resumen th,
.tabla-detalle-resumen td{
  font-size:13px;
  padding:8px;
}

@media (max-width: 1100px){
  .finanzas-tablas,
  .banco-ingreso-layout,
  .finanzas-bloques,
  .resumen-admin-bloques,
  .filtros-resumen-admin-compactos,
  .formulario-trabajadores{
    grid-template-columns:1fr;
  }

  .filtros-resumen-admin-compactos h2{
    margin:0;
  }
}

@media (max-width: 1000px){
  .datos-admin-grid{
    grid-template-columns:1fr;
  }

  .datos-admin-encabezado{
    align-items:flex-start;
    flex-direction:column;
  }
}
.formulario-usuarios {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 450px;
  margin-bottom: 30px;
}

.formulario-usuarios input,
.formulario-usuarios select {
  padding: 13px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.formulario-usuarios button {
  background: #d4af37;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}
/* APERTURA CAJA */

.formulario-caja{

    display:flex;
    flex-direction:column;

    gap:15px;

    max-width:400px;

    margin-top:20px;

}

.formulario-caja input,
.formulario-caja select{

    padding:14px;

    border-radius:10px;

    border:1px solid #ccc;

}

.formulario-caja button{

    background:#d4af37;

    border:none;

    padding:14px;

    border-radius:10px;

    font-weight:bold;

    cursor:pointer;

}

.estado-caja{

    margin-top:25px;

    background:#fff8e1;

    border:1px solid #d4af37;

    padding:20px;

    border-radius:15px;

}
.alerta {
  background: #fff3cd;
  border: 1px solid #d4af37;
  padding: 25px;
  border-radius: 15px;
}

.formulario-mesas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 25px;
}

.formulario-mesas input {
  padding: 13px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.formulario-mesas button,
.mesa-card button,
.detalle-mesa button {
  background: #d4af37;
  border: none;
  padding: 13px 18px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.contenedor-mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.mesa-card {
  background: #fff8e1;
  border: 1px solid #d4af37;
  border-radius: 15px;
  padding: 14px;
}
.barra-venta {
  background: white;
  padding: 25px;
  border-radius: 18px;
}

.formulario-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.formulario-barra input,
.formulario-barra select {
  padding: 13px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.formulario-barra button,
.boton-pagar {
  background: #d4af37;
  border: none;
  padding: 13px 18px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.total-barra {
  margin: 25px 0;
  background: #fff8e1;
  border: 1px solid #d4af37;
  padding: 20px;
  border-radius: 15px;
}
.formulario-productos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 450px;
  margin-bottom: 30px;
}

.formulario-productos input,
.formulario-productos select {
  padding: 13px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.formulario-productos button {
  background: #d4af37;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.productos-page,
.stock-page{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.productos-toolbar{
  align-items:flex-start;
  gap:14px;
}

.producto-formulario{
  max-width:none;
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:10px;
  padding:14px;
}

.stock-formulario{
  max-width:none;
}

.producto-formulario h2,
.stock-formulario h2,
.panel-stock h2{
  margin:0;
  font-size:20px;
}

.producto-form-grid,
.stock-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px;
  width:100%;
}

.producto-form-grid label,
.stock-form-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:700;
}

.producto-formulario input,
.producto-formulario select,
.stock-formulario input,
.stock-formulario select,
.stock-formulario textarea{
  width:100%;
  min-height:40px;
  padding:9px 11px;
  border-radius:8px;
}

.stock-formulario textarea{
  min-height:40px;
  resize:vertical;
}

.producto-formulario > button,
.stock-formulario > button{
  align-self:flex-start;
  min-width:170px;
  padding:11px 16px;
  border-radius:8px;
}

.panel-lista-productos,
.panel-stock{
  background:#fff;
  border:1px solid #e4d39a;
  border-radius:10px;
  padding:14px;
  overflow-x:auto;
}

.encabezado-panel-lista{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.encabezado-panel-lista h2{
  margin:0;
}

.encabezado-panel-lista .buscador-tabla{
  margin:0;
  width:min(360px, 100%);
}

.stock-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.stock-header h2{
  margin:0;
}

.stock-acciones-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:10px;
}

.stock-acciones-grid button{
  min-height:48px;
  border:none;
  border-radius:8px;
  background:#d4af37;
  color:#111;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 12px;
}

.stock-acciones-grid button:hover{
  filter:brightness(.97);
}

.formulario-trabajadores{
  grid-template-columns:repeat(2, minmax(320px, 1fr));
  align-items:start;
  gap:14px;
  max-width:none;
}

.formulario-trabajadores h2{
  grid-column:1 / -1;
  margin-bottom:0;
}

.grupo-trabajador-form{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:14px;
}

.grupo-trabajador-form h3{
  font-size:16px;
  margin-bottom:12px;
}

.grupo-trabajador-form > div{
  display:grid;
  grid-template-columns:repeat(2, minmax(180px, 1fr));
  gap:12px 12px;
}

.formulario-trabajadores label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  font-weight:700;
  margin-bottom:0;
}

.formulario-trabajadores input,
.formulario-trabajadores select{
  min-height:40px;
  padding:9px 11px;
  width:100%;
}

.ayuda-campo-trabajador{
  color:#666;
  font-size:11px;
  margin-top:-5px;
}

.formulario-trabajadores button{
  align-self:end;
  min-height:42px;
}

.cumpleanos-page{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.calendario-cumpleanos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
}

.mes-cumpleanos-card{
  background:#fff;
  border:1px solid #e4d39a;
  border-radius:10px;
  overflow:hidden;
}

.mes-cumpleanos-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:#fff8e1;
  border-bottom:1px solid #e4d39a;
}

.mes-cumpleanos-header h3{
  margin:0;
  font-size:16px;
}

.mes-cumpleanos-header span{
  min-width:28px;
  min-height:28px;
  border-radius:50%;
  background:#d4af37;
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.tabla-cumpleanos{
  width:100%;
}

.tabla-cumpleanos th,
.tabla-cumpleanos td{
  padding:8px 9px;
  font-size:13px;
}

.trabajadores-sin-fecha h2{
  margin:0 0 12px;
}

@media (max-width: 1100px){
  .formulario-trabajadores{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .grupo-trabajador-form > div{
    grid-template-columns:1fr;
  }
}

.contratos-layout{
  display:grid;
  grid-template-columns:minmax(300px, 420px) 1fr;
  gap:14px;
  align-items:start;
}

.sueldos-page .contratos-layout{
  grid-template-columns:minmax(360px, 560px) 1fr;
}

.sueldos-page .herramienta-laboral-layout{
  grid-template-columns:minmax(420px, 640px) 1fr;
}

.grid-sueldos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(155px, 1fr));
  gap:9px;
}

.grid-sueldos label{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.liquidacion-sueldo h2{
  margin-bottom:12px;
  text-align:center;
}

.tabla-sueldos th{
  background:#fff1e6;
  color:#111;
}

.tabla-sueldos td:last-child{
  font-weight:700;
  text-align:right;
}

.nota-legal-sueldos{
  color:#555;
  font-size:12px;
  line-height:1.4;
  margin-top:10px;
}

.vista-contrato-panel{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:12px;
}

.documento-contrato{
  background:white;
  border:1px solid #ddd;
  border-radius:6px;
  color:#111;
  line-height:1.45;
  max-height:620px;
  overflow:auto;
  padding:22px;
}

.contrato-documento h1{
  font-size:24px;
  text-align:center;
  text-transform:uppercase;
}

.contrato-documento h2{
  font-size:16px;
  margin:18px 0 8px;
}

.contrato-documento table{
  border-collapse:collapse;
  width:100%;
}

.contrato-documento th,
.contrato-documento td{
  border:1px solid #ddd;
  padding:7px;
  text-align:left;
}

.contrato-documento th{
  background:#fff8e1;
  width:32%;
}

.contrato-fecha{
  text-align:right;
}

.firmas-contrato{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:70px;
}

.firmas-contrato div{
  text-align:center;
}

.firmas-contrato span{
  border-top:1px solid #111;
  display:block;
  margin-bottom:8px;
}

@media (max-width: 1000px){
  .contratos-layout{
    grid-template-columns:1fr;
  }
}
.formulario-caja textarea {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ccc;
  min-height: 90px;
  font-family: Arial, sans-serif;
}
.acciones-delivery{
  display:flex;
  gap:15px;
  margin-bottom:25px;
}

.acciones-delivery button{
  background:#d4af37;
  border:none;
  padding:14px 18px;
  border-radius:12px;
  cursor:pointer;
  font-weight:bold;
}

.estado-delivery{
  padding:8px 12px;
  border-radius:10px;
  color:white;
  font-weight:bold;
  display:inline-block;
  margin-top:10px;
}

.preparacion{
  background:#28a745;
}

.despacho{
  background:#ffc107;
  color:black;
}

.entregado{
  background:#007bff;
}

.cancelado{
  background:#dc3545;
}
.encabezado-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.encabezado-barra button,
.acciones-pedido button {
  background: #d4af37;
  border: none;
  padding: 13px 18px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.tabla-espaciada th,
.tabla-espaciada td {
  padding: 9px 12px;
  text-align: center;
}

.resumen-pedido {
  margin-top: 25px;
  background: #fff8e1;
  border: 1px solid #d4af37;
  padding: 20px;
  border-radius: 15px;
  text-align: right;
}

.acciones-pedido {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 18px;
}

.boton-importar{
  background:#d4af37;
  border:none;
  padding:8px 10px;
  border-radius:7px;
  font-weight:bold;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#1f1f1f;
  text-decoration:none;
  width:150px;
  min-height:32px;
  font-size:12px;
  line-height:1;
  box-shadow:none;
}

.boton-importar input{
  display:none;
}

.barra-acciones-area{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.barra-acciones-area .acciones-pedido{
  margin-top:0;
  margin-bottom:0;
}

.barra-acciones-area .boton-importar{
  margin-left:auto;
}

.grupo-importar{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-left:auto;
  align-items:stretch;
}

.productos-page .acciones-pedido,
.productos-toolbar .acciones-pedido{
  gap:8px;
  flex-wrap:wrap;
}

.productos-page .acciones-pedido button,
.productos-toolbar .acciones-pedido button,
.productos-toolbar .boton-importar,
.stock-acciones-grid button,
.stock-header .boton-stock-excel{
  background:#fffdf7;
  border:1px solid #d4af37;
  color:#1f1f1f;
  min-height:36px;
  padding:8px 12px;
  border-radius:7px;
  box-shadow:none;
  font-size:13px;
  font-weight:700;
  line-height:1.15;
}

.productos-toolbar .boton-importar{
  width:138px;
}

.productos-page .acciones-pedido button:hover,
.productos-toolbar .acciones-pedido button:hover,
.productos-toolbar .boton-importar:hover,
.stock-acciones-grid button:hover,
.stock-header .boton-stock-excel:hover{
  background:#fff6d8;
  border-color:#c59b18;
  filter:none;
}

.producto-formulario > button,
.stock-formulario > button{
  background:#d4af37;
  border:1px solid #c59b18;
  min-height:38px;
  min-width:150px;
  padding:9px 14px;
  border-radius:7px;
  box-shadow:none;
}

.stock-acciones-grid{
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:8px;
}

.stock-acciones-grid button{
  justify-content:flex-start;
  text-align:left;
}

.opciones-sistema{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.panel-opcion-sistema{
  flex-direction:column;
  gap:12px;
  background:#fff8e1;
  border:1px solid var(--color-principal-sistema);
  border-radius:var(--radio-bloque-sistema);
  padding:var(--padding-bloque-sistema);
}
.layout-delivery{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:25px;
}

.operacion-venta{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.operacion-header{
  align-items:center;
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.operacion-header button{
  background:#d4af37;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  padding:10px 14px;
}

.resumen-operacion{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
}

.resumen-operacion div{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:12px;
}

.resumen-operacion span{
  color:#555;
  display:block;
  font-size:12px;
  margin-bottom:5px;
}

.resumen-operacion strong{
  font-size:20px;
}

.barra-operacion{
  align-items:center;
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
}

.barra-operacion input,
.barra-operacion select{
  border:1px solid #ccc;
  border-radius:8px;
  min-height:40px;
  padding:10px 12px;
}

.barra-operacion button{
  background:#d4af37;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  min-height:40px;
  padding:10px 14px;
}

.tarjetas-operacion{
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:12px;
}

.tarjeta-operacion,
.tarjetas-operacion .mesa-card{
  background:white;
  border:1px solid #d4af37;
  border-radius:8px;
  box-shadow:none;
  padding:12px;
}

.tarjeta-operacion h3,
.tarjetas-operacion .mesa-card h3{
  font-size:17px;
  margin-bottom:6px;
}

.estado-operacion{
  background:#fff3cd;
  border:1px solid #d4af37;
  border-radius:999px;
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:4px 8px;
}

.acciones-operacion,
.tarjetas-operacion .acciones-pedido{
  gap:8px;
  margin:10px 0 0;
}

.acciones-operacion button,
.tarjetas-operacion .acciones-pedido button{
  border-radius:7px;
  box-shadow:none;
  padding:8px 10px;
}

.boton-peligro{
  background:#f2d6cf !important;
  color:#7a1f11 !important;
}

.vacio-operacion{
  background:#fffdf7;
  border:1px dashed #d4af37;
  border-radius:8px;
  color:#555;
  padding:16px;
}

.layout-delivery-operacion{
  gap:16px;
}

.detalle-pedido-venta{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.detalle-pedido-venta .resumen-operacion{
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}

.detalle-pedido-venta .resumen-operacion strong{
  font-size:18px;
  overflow-wrap:anywhere;
}

.carga-producto-pedido{
  display:grid;
  grid-template-columns:minmax(360px, 1fr) minmax(240px, 320px);
  gap:12px;
  align-items:stretch;
}

.carga-producto-pedido section,
.carga-producto-pedido aside,
.tabla-pedido-panel{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  box-shadow:none;
  padding:12px;
}

.formulario-carga-productos{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) 120px auto;
  gap:10px;
  align-items:end;
}

.formulario-carga-productos label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-weight:700;
}

.formulario-carga-productos label span,
.carga-producto-pedido aside span{
  color:#555;
  font-size:12px;
  font-weight:700;
}

.formulario-carga-productos select,
.formulario-carga-productos input{
  border:1px solid #cfcfcf;
  border-radius:8px;
  min-height:42px;
  padding:10px 12px;
  width:100%;
}

.formulario-carga-productos select{
  min-width:0;
}

.formulario-carga-productos button,
.acciones-estado-pedido button{
  background:#d4af37;
  border:none;
  border-radius:8px;
  box-shadow:none;
  cursor:pointer;
  font-weight:700;
  min-height:42px;
  padding:10px 14px;
}

.carga-producto-pedido aside{
  display:flex;
  flex-direction:column;
  gap:7px;
  justify-content:center;
}

.carga-producto-pedido aside strong{
  font-size:26px;
}

.carga-producto-pedido aside p{
  color:#555;
  font-size:13px;
  line-height:1.35;
  margin:0;
}

.acciones-estado-pedido{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

.tabla-pedido-panel{
  overflow-x:auto;
}

.tabla-carga-productos{
  margin-top:8px;
}

.acciones-finales-pedido{
  justify-content:flex-start;
  margin-top:0;
}

.pago-venta{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.pago-venta-header p{
  color:#555;
  margin-top:4px;
}

.resumen-pago-venta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:10px;
}

.resumen-pago-venta div{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:12px;
}

.resumen-pago-venta span,
.panel-pago-venta label span,
.propina-pago-venta span{
  color:#555;
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:5px;
}

.resumen-pago-venta strong{
  font-size:22px;
}

.propina-pago-venta{
  align-items:end;
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  display:flex;
  justify-content:flex-start;
  padding:12px;
}

.propina-pago-venta label{
  max-width:180px;
  width:100%;
}

.propina-pago-venta input,
.panel-pago-venta input,
.panel-pago-venta select{
  border:1px solid #cfcfcf;
  border-radius:8px;
  min-height:42px;
  padding:10px 12px;
  width:100%;
}

.opciones-pago-venta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px;
}

.opciones-pago-venta button{
  align-items:flex-start;
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  box-shadow:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:120px;
  padding:14px;
  text-align:left;
}

.opciones-pago-venta i{
  color:#a9820a;
  font-size:20px;
}

.opciones-pago-venta span{
  font-size:16px;
  font-weight:800;
}

.opciones-pago-venta small{
  color:#555;
  line-height:1.35;
}

.panel-pago-venta{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
}

.panel-pago-venta label{
  font-weight:700;
}

.documento-venta-panel{
  background:white;
  border:1px solid #ead99b;
  border-radius:8px;
  display:grid;
  grid-template-columns:minmax(190px, 1fr) minmax(170px, 1fr) auto;
  gap:10px;
  align-items:end;
  padding:10px;
}

.check-documento-venta{
  align-items:center;
  display:flex;
  gap:8px;
  min-height:42px;
}

.check-documento-venta input{
  height:18px;
  width:18px;
}

.check-documento-venta span{
  margin:0;
}

.documento-venta-panel input,
.documento-venta-panel select{
  border:1px solid #cfcfcf;
  border-radius:8px;
  min-height:42px;
  padding:10px 12px;
  width:100%;
}

.acciones-pago-venta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.acciones-pago-venta button,
.panel-pago-venta > button{
  background:#d4af37;
  border:none;
  border-radius:8px;
  box-shadow:none;
  cursor:pointer;
  font-weight:700;
  min-height:40px;
  padding:10px 14px;
}

.grid-pagos-mixtos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}

.formulario-pago-monto{
  display:grid;
  grid-template-columns:minmax(150px, 220px) minmax(220px, 1fr) auto;
  gap:10px;
  align-items:end;
}

.lista-pagos-separados{
  background:white;
  border:1px dashed #d4af37;
  border-radius:8px;
  padding:10px;
}

.lista-pagos-separados div{
  align-items:center;
  border-bottom:1px solid #eee;
  display:flex;
  justify-content:space-between;
  padding:7px 0;
}

.lista-pagos-separados div:last-child{
  border-bottom:none;
}

.lista-pagos-separados .total-pago-separado{
  color:#111;
  font-size:16px;
  font-weight:800;
}

.tabla-pago-productos{
  overflow-x:auto;
}

.tabla-pago-productos input[type="checkbox"]{
  height:18px;
  width:18px;
}

.formulario-productos-pago{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto;
  gap:10px;
  align-items:end;
}

@media (max-width: 760px){
  .documento-venta-panel,
  .formulario-pago-monto,
  .formulario-productos-pago{
    grid-template-columns:1fr;
  }
}

.caja-operacion{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.layout-caja-operacion,
.layout-cierre-caja{
  display:grid;
  grid-template-columns:minmax(320px, 1fr) minmax(260px, 340px);
  gap:12px;
  align-items:stretch;
}

.resumen-caja-operacion{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
}

.resumen-caja-operacion div,
.panel-caja-formulario,
.estado-caja-panel{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  box-shadow:none;
  padding:12px;
}

.resumen-caja-operacion span,
.panel-caja-formulario label span,
.estado-caja-panel span{
  color:#555;
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:5px;
}

.resumen-caja-operacion strong{
  font-size:19px;
  overflow-wrap:anywhere;
}

.panel-caja-formulario{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.panel-caja-formulario label{
  font-weight:700;
}

.panel-caja-formulario input,
.panel-caja-formulario select,
.panel-caja-formulario textarea{
  border:1px solid #cfcfcf;
  border-radius:8px;
  min-height:42px;
  padding:10px 12px;
  width:100%;
}

.panel-caja-formulario textarea{
  min-height:92px;
  resize:vertical;
}

.panel-caja-formulario button,
.estado-caja-panel button,
.caja-alerta button{
  background:#d4af37;
  border:none;
  border-radius:8px;
  box-shadow:none;
  cursor:pointer;
  font-weight:700;
  min-height:40px;
  padding:10px 14px;
}

.estado-caja-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;
}

.estado-caja-panel strong{
  font-size:24px;
}

.estado-caja-panel p,
.mini-resumen-caja p{
  color:#555;
  line-height:1.35;
  margin:0;
}

.mini-resumen-caja{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.grid-campos-cierre{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}

.tabla-cierre-caja{
  margin-top:8px;
}

.tabla-cierre-caja td,
.tabla-cierre-caja th{
  white-space:nowrap;
}

@media (max-width: 1050px){
  .carga-producto-pedido,
  .formulario-carga-productos,
  .formulario-pago-monto,
  .formulario-productos-pago,
  .layout-caja-operacion,
  .layout-cierre-caja{
    grid-template-columns:1fr;
  }
}

.historial-delivery{
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:15px;
  padding:20px;
}

.delivery-cerrado{
  background:white;
  border-radius:12px;
  padding:9px;
  margin-bottom:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.10);
}

.resumen-ventas{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
  margin-bottom:25px;
}

.resumen-ventas div{
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:15px;
  padding:18px;
}

.resumen-ventas span{
  display:block;
  margin-bottom:8px;
  color:#555;
  font-size:14px;
}

.resumen-ventas strong{
  font-size:22px;
}

.tabla-ventas{
  width:100%;
  border-collapse:collapse;
}

.tabla-ventas th{
  background:#1f1f1f;
  color:white;
}

.tabla-ventas td,
.tabla-ventas th{
  border:1px solid #ddd;
}

.rango-fechas{
  display:flex;
  gap:10px;
}

.panel-cierres{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:24px;
  align-items:start;
}

.filtros-cierres{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:15px;
  padding:20px;
}

.filtros-cierres input{
  padding:13px;
  border:1px solid #ccc;
  border-radius:10px;
}

.resumen-cierres{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
  margin-bottom:22px;
}

.resumen-cierres div{
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:15px;
  padding:18px;
}

.resumen-cierres span{
  display:block;
  margin-bottom:8px;
  color:#555;
  font-size:14px;
}

.resumen-cierres strong{
  font-size:20px;
}

.tabla-cierres{
  width:100%;
  border-collapse:collapse;
}

.tabla-cierres th{
  background:#1f1f1f;
  color:white;
}

.tabla-cierres td,
.tabla-cierres th{
  border:1px solid #ddd;
}

.tabla-cierres button,
.encabezado-detalle-cierre button{
  background:#d4af37;
  border:none;
  padding:11px 15px;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
}

.tabla-cierres td:last-child{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:148px;
}

.tabla-cierres td:last-child button{
  min-width:auto;
  width:auto;
  padding:6px 9px;
  border-radius:7px;
  font-size:12px;
  line-height:1.1;
  box-shadow:none;
  white-space:nowrap;
}

.tabla-cierres td:last-child button:nth-child(3){
  flex-basis:auto;
}

.tabla-cierres .estado-aceptado-cierre{
  padding:5px 8px;
  border-radius:6px;
  font-size:11px;
  line-height:1.1;
  box-shadow:none;
  white-space:nowrap;
}

.detalle-cierre{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.encabezado-detalle-cierre{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.detalle-cierre-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.detalle-cierre-grid section{
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:15px;
  padding:18px;
}

.diferencia-ok{
  color:#126c2f;
  font-weight:bold;
}

.diferencia-alerta{
  color:#b00020;
  font-weight:bold;
}

@media (max-width:900px){
  .panel-cierres{
    grid-template-columns:1fr;
  }

  .encabezado-detalle-cierre{
    align-items:flex-start;
    flex-direction:column;
  }
}

.formulario-compras{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:480px;
  margin-bottom:28px;
}

.formulario-compras input,
.formulario-compras select,
.formulario-compras textarea{
  padding:13px;
  border:1px solid #ccc;
  border-radius:10px;
  font-family:Arial, sans-serif;
}

.formulario-compras textarea{
  min-height:90px;
}

.formulario-compras button,
.tabla-compras button{
  background:#d4af37;
  border:none;
  padding:7px 10px;
  border-radius:7px;
  cursor:pointer;
  font-weight:bold;
  box-shadow:none;
  font-size:12px;
}

.tabla-compras{
  width:100%;
  border-collapse:collapse;
}

.tabla-compras th{
  background:#1f1f1f;
  color:white;
}

.tabla-compras td,
.tabla-compras th{
  border:1px solid #ddd;
}

.resumen-compras{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:16px;
  margin-bottom:25px;
}

.resumen-compras div,
.compra-card{
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:15px;
  padding:13px;
}

.resumen-compras span{
  display:block;
  margin-bottom:8px;
  color:#555;
  font-size:14px;
}

.resumen-compras strong{
  font-size:22px;
}

.contenedor-compras{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:18px;
  margin:14px 0 28px;
}

.inventario-pedidos-page{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.inventario-pedidos-page .stock-header{
  background:#fffdf7;
  border:1px solid #e4d39a;
  border-radius:10px;
  padding:14px;
}

.inventario-pedidos-page .stock-header h2{
  margin:0 0 4px;
}

.inventario-pedidos-page .stock-header p{
  margin:0;
  color:#555;
  font-size:13px;
}

.inventario-pedidos-panel{
  padding:0;
}

.tabla-inventario-pedidos th,
.tabla-inventario-pedidos td{
  vertical-align:middle;
}

.tabla-inventario-pedidos input{
  width:100%;
  min-width:160px;
  padding:9px 10px;
  border:1px solid #ccc;
  border-radius:7px;
  background:#fff;
}

.tabla-inventario-pedidos td:first-child{
  text-align:left;
  font-weight:700;
}

.buscador-tabla{
  margin:18px 0 16px;
  max-width:360px;
}

.buscador-tabla input{
  width:100%;
  padding:13px;
  border:1px solid #ccc;
  border-radius:10px;
}

.tabla-compras .boton-icono{
  width:34px;
  height:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  background:transparent;
  box-shadow:none;
  border:none;
  color:#1f1f1f;
}

.tabla-compras .boton-icono:hover{
  background:#fff8e1;
  color:#b00020;
}

#listaProductosPanel{
  margin-top:22px;
}

.tabla-productos{
  width:100%;
  border-collapse:collapse;
}

.tabla-productos th,
.tabla-productos td{
  padding:13px 16px;
  border:1px solid #ddd;
  text-align:center;
}

.tabla-productos th{
  background:#1f1f1f;
  color:white;
}

.filtros-stock{
  max-width:none;
  display:grid;
  grid-template-columns:130px minmax(150px, 210px) 130px minmax(150px, 210px) 130px minmax(260px, 1fr) 130px minmax(170px, 230px);
  align-items:center;
  margin-top:12px;
}

.flecha-stock{
  display:inline-block;
  width:12px;
  margin-right:6px;
  font-size:11px;
  line-height:1;
}

.boton-stock-excel{
  width:118px;
  min-height:30px;
  padding:7px 9px;
  flex:0 0 auto;
}

.costos-productos{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.costos-config,
.detalle-costo-form{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px;
  align-items:end;
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:12px;
  padding:14px;
}

.costos-productos > .costos-config{
  max-width:360px;
}

.costos-config label,
.detalle-costo-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:bold;
}

.costos-config input,
.costos-config select,
.detalle-costo-form input,
.detalle-costo-form select{
  padding:11px;
  border:1px solid #ccc;
  border-radius:8px;
  background:white;
}

.detalle-costo-form button{
  background:#d4af37;
  border:none;
  padding:12px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:bold;
}

.receta-vinculada-form{
  background:#fff1e6;
  border-color:#f07f2f;
}

.receta-vinculada-form button{
  background:#f07f2f;
  color:white;
}

.tabla-costos{
  width:100%;
  border-collapse:collapse;
}

.tabla-costos th{
  background:#1f1f1f;
  color:white;
}

.tabla-costos td,
.tabla-costos th{
  border:1px solid #d4af37;
  padding:9px 10px;
  text-align:center;
}

.resumen-costos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}

.resumen-costos div{
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:10px;
  padding:12px;
}

.resumen-costos span{
  display:block;
  color:#555;
  font-size:12px;
  margin-bottom:6px;
}

.resumen-costos strong{
  font-size:18px;
}

.resumen-costos div:nth-last-child(2),
.resumen-costos div:nth-last-child(1){
  background:#f5e08a;
}

.planilla-resumen-costos{
  max-width:560px;
  margin-left:auto;
}

.planilla-resumen-costos .tabla-costos{
  table-layout:fixed;
}

.planilla-resumen-costos th{
  width:45%;
  background:#fff8e1;
  color:#1f1f1f;
  text-align:right;
  font-size:12px;
  padding:6px 8px;
}

.planilla-resumen-costos td{
  background:white;
  font-weight:bold;
  font-size:12px;
  padding:6px 8px;
}

.planilla-resumen-costos td:nth-child(2){
  width:20%;
  color:#555;
}

.planilla-resumen-costos td:nth-child(3){
  width:35%;
  text-align:right;
}

.fila-total-costos th,
.fila-total-costos td{
  background:#fff1b8;
}

.fila-precio-costos th,
.fila-precio-costos td{
  background:#f5e08a;
  color:#008f2f;
  font-size:13px;
}

.input-resumen-costo{
  width:58px;
  padding:4px 6px;
  border:1px solid #d4af37;
  border-radius:6px;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  background:white;
}

.input-precio-aplicado-costo{
  width:115px;
  padding:5px 7px;
  border:1px solid #008f2f;
  border-radius:6px;
  font-size:12px;
  font-weight:bold;
  text-align:right;
  color:#008f2f;
  background:white;
}

.fila-precio-aplicado-costos th,
.fila-precio-aplicado-costos td{
  background:#e9f8ee;
  color:#008f2f;
}

.receta-config,
.receta-form{
  border-color:#f07f2f;
  background:#fff1e6;
}

.tabla-receta-basica{
  width:100%;
  border-collapse:collapse;
}

.tabla-receta-basica th{
  background:#f07f2f;
  color:white;
}

.tabla-receta-basica td,
.tabla-receta-basica th{
  border:1px solid #f07f2f;
  padding:8px 10px;
  text-align:center;
}

.tabla-receta-basica tbody tr:nth-child(odd){
  background:#fff1e6;
}

.resumen-receta-basica{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  border-top:2px solid #1f1f1f;
  border-bottom:2px solid #1f1f1f;
  padding:10px 0;
}

.resumen-receta-basica div{
  background:#fff1e6;
  border:1px solid #f07f2f;
  border-radius:8px;
  padding:12px;
}

.resumen-receta-basica span{
  display:block;
  color:#555;
  font-size:12px;
  margin-bottom:6px;
}

.resumen-receta-basica strong{
  font-size:18px;
  color:#1f1f1f;
}

.produccion-modulo{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.produccion-form,
.produccion-aprobacion{
  background:#fff8e1;
  border:1px solid #d4af37;
}

.resumen-harina-produccion{
  background:#fffdf7;
  border:1px solid #d4af37;
  border-radius:8px;
  padding:12px;
}

.resumen-harina-produccion .encabezado-tabla-resumen{
  margin-bottom:8px;
}

.resumen-harina-produccion .encabezado-tabla-resumen strong{
  color:#008f2f;
  font-size:20px;
}

.resumen-harina-produccion input[type="checkbox"]{
  height:18px;
  width:18px;
}

.total-harina-seleccionada{
  align-items:center;
  background:#e9f8ee;
  border:1px solid #008f2f;
  border-radius:8px;
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto auto;
  gap:12px;
  margin-top:10px;
  padding:10px 12px;
}

.total-harina-seleccionada label{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.total-harina-seleccionada input{
  border:1px solid #9ac9a7;
  border-radius:7px;
  min-height:38px;
  padding:9px 10px;
}

.total-harina-seleccionada div{
  text-align:right;
}

.total-harina-seleccionada span{
  color:#245b33;
  display:block;
  font-weight:700;
  margin-bottom:4px;
}

.total-harina-seleccionada strong{
  color:#008f2f;
  font-size:22px;
}

.total-harina-seleccionada button{
  background:#d4af37;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  min-height:40px;
  padding:10px 14px;
}

.sumas-harina-creadas{
  margin-top:12px;
}

.tabla-produccion{
  width:100%;
  border-collapse:collapse;
}

.tabla-produccion th{
  background:#1f1f1f;
  color:white;
}

.tabla-produccion td,
.tabla-produccion th{
  border:1px solid #d4af37;
  padding:9px 10px;
  text-align:center;
}

.tabla-produccion button{
  background:#d4af37;
  border:none;
  border-radius:6px;
  padding:7px 10px;
  font-weight:bold;
  cursor:pointer;
}

.filtros-produccion{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  align-items:end;
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:10px;
  padding:12px;
}

.filtros-produccion label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-weight:bold;
}

.filtros-produccion input{
  padding:9px;
  border:1px solid #ccc;
  border-radius:7px;
}

.filtros-produccion button{
  background:#d4af37;
  border:none;
  border-radius:7px;
  padding:10px 12px;
  font-weight:bold;
  cursor:pointer;
}

#tablaFacturasCompras button{
  box-shadow:none !important;
  filter:none;
  text-shadow:none;
  outline:none;
  border:none;
  background:#d4af37;
  padding:6px 9px;
  border-radius:6px;
  font-size:12px;
  line-height:1;
  min-height:28px;
}

#tablaFacturasCompras button:hover{
  box-shadow:none !important;
  filter:none;
  background:#f1d36b;
}

.layout-compras{
  display:grid;
  grid-template-columns:minmax(280px, 480px) minmax(260px, 1fr);
  gap:24px;
  align-items:start;
}

.formulario-compras input[readonly]{
  background:#f4f4f4;
  font-weight:bold;
}

.factura-compra{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:30px;
}

.cargar-nota-factura{
  display:grid;
  grid-template-columns:180px minmax(260px, 1fr);
  gap:12px;
  align-items:center;
  background:#fff8e1;
  border:1px solid var(--color-principal-sistema);
  border-radius:var(--radio-bloque-sistema);
  padding:14px;
}

.cargar-nota-factura label{
  font-weight:bold;
}

.cargar-nota-factura select{
  padding:12px;
  border:1px solid #ccc;
  border-radius:10px;
}

.factura-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  border:1px solid #1f1f1f;
}

.factura-grid label,
.factura-grid input,
.factura-grid select,
.factura-grid p{
  min-height:32px;
  padding:7px 10px;
  border-bottom:1px solid #d4af37;
}

.factura-grid label{
  background:#fff8e1;
  color:#1f1f1f;
  font-weight:bold;
}

.factura-grid input,
.factura-grid select,
.factura-grid p{
  border-left:1px solid #d4af37;
  border-top:none;
  border-right:none;
  background:white;
}

.factura-totales{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  border-top:2px solid #1f1f1f;
  border-bottom:2px solid #1f1f1f;
}

.factura-totales div{
  display:flex;
  justify-content:center;
  gap:14px;
  padding:9px 12px;
  border-bottom:1px solid #d4af37;
  background:#fff8e1;
}

.factura-totales span,
.factura-totales strong{
  color:#1f1f1f;
  font-weight:bold;
}

.detalle-factura-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:#fff8e1;
  border:1px solid #d4af37;
  border-radius:15px;
  padding:16px;
}

.crear-insumo-rapido{
  max-width:520px;
}

.crear-insumo-rapido label,
.detalle-factura-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:bold;
}

.detalle-factura-form{
  display:grid;
  grid-template-columns:minmax(320px, 1.5fr) 110px 160px 90px 145px 160px auto;
  gap:10px;
  align-items:end;
}

.detalle-factura-form-insumos{
  grid-template-columns:minmax(320px, 1.5fr) 110px 160px 90px 145px 160px auto;
}

#insumoItemFactura{
  width:100%;
  min-width:320px;
  padding:14px;
  font-size:15px;
}

.campo-inline{
  display:flex;
  gap:10px;
}

.campo-inline input{
  flex:1;
}

.detalle-factura-form input,
.detalle-factura-form select{
  padding:12px;
  border:1px solid #ccc;
  border-radius:10px;
  font-weight:normal;
}

#ivaMontoItemFactura,
#netoItemFactura{
  background:#f4f4f4;
  font-weight:bold;
}

.detalle-factura-form button{
  background:#d4af37;
  border:none;
  padding:12px 15px;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
}

@media (max-width:900px){
  .layout-compras{
    grid-template-columns:1fr;
  }

  .factura-grid{
    grid-template-columns:1fr;
  }

  .factura-grid input,
  .factura-grid select,
  .factura-grid p{
    border-left:none;
  }

  .detalle-factura-form{
    grid-template-columns:1fr;
  }

  .detalle-factura-form-insumos{
    grid-template-columns:1fr;
  }
}

/* =========================
   PIEL MODERNA GLOBAL
========================= */

:root{
  --rc-bg:#f4f7fb;
  --rc-surface:#ffffff;
  --rc-surface-soft:#f8fafc;
  --rc-ink:#172033;
  --rc-muted:#667085;
  --rc-line:#d8e0ea;
  --rc-line-strong:#bdc8d8;
  --rc-dark:#111827;
  --rc-dark-2:#1f2937;
  --rc-accent:#d7ad2f;
  --rc-accent-soft:#fff6d7;
  --rc-cyan:#1aa6b7;
  --rc-green:#1f9d55;
  --rc-red:#c24135;
  --rc-shadow:0 10px 28px rgba(16, 24, 40, .08);
  --rc-shadow-soft:0 4px 14px rgba(16, 24, 40, .06);
}

html{
  background:var(--rc-bg);
}

body{
  background:
    radial-gradient(circle at top left, rgba(26,166,183,.09), transparent 31rem),
    linear-gradient(180deg, #f9fbfd 0%, var(--rc-bg) 48%, #eef3f8 100%);
  color:var(--rc-ink);
  min-height:100vh;
  letter-spacing:0;
}

.barra-superior{
  height:82px;
  background:linear-gradient(90deg, #111827 0%, #172033 46%, #0f172a 100%);
  border-bottom:1px solid rgba(215,173,47,.65);
  box-shadow:0 12px 30px rgba(15, 23, 42, .22);
  padding:0 14px 0 20px;
  position:sticky;
  top:0;
  z-index:30;
}

.logo{
  width:62px;
  height:62px;
  border:2px solid rgba(215,173,47,.9);
  box-shadow:0 0 0 5px rgba(215,173,47,.12);
}

.menu-superior{
  gap:8px;
  align-items:center;
}

.menu-superior button,
.ayuda{
  min-height:42px;
  padding:9px 13px;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#f8fafc;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:none;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.menu-superior button i,
.ayuda i{
  color:#f2c94c;
}

.menu-superior button:hover,
.ayuda:hover{
  background:rgba(215,173,47,.18);
  border-color:rgba(215,173,47,.75);
  color:#fff;
  transform:translateY(-1px);
}

.area-ayuda-logo{
  min-width:330px;
  gap:8px;
}

.usuario-sesion-boton{
  background:rgba(255,255,255,.09);
  color:#fff;
  border:1px solid rgba(215,173,47,.55);
  border-radius:8px;
}

.usuario-sesion-boton small{
  color:#d8e0ea;
}

.usuario-sesion-boton.sin-usuario{
  background:rgba(255,255,255,.07);
  color:#fff;
}

.logo-ayuda{
  height:68px;
  width:184px;
  border-radius:6px;
}

.contenedor{
  min-height:calc(100vh - 82px);
}

.menu-lateral{
  width:250px;
  background:rgba(255,255,255,.88);
  border-right:1px solid var(--rc-line);
  box-shadow:6px 0 18px rgba(16,24,40,.04);
  padding:22px 16px;
  backdrop-filter:blur(10px);
}

.menu-lateral h3{
  color:var(--rc-muted);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 15px;
}

.menu-lateral button{
  min-height:42px;
  margin-bottom:8px;
  padding:10px 12px;
  border-radius:8px;
  background:transparent;
  color:var(--rc-ink);
  border:1px solid transparent;
  font-weight:750;
  display:flex;
  align-items:center;
  gap:10px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.menu-lateral button i{
  color:var(--rc-cyan);
  width:18px;
}

.menu-lateral button:hover{
  background:var(--rc-accent-soft);
  color:var(--rc-ink);
  border-color:rgba(215,173,47,.55);
  transform:translateX(2px);
}

.contenido{
  padding:24px;
}

.tarjeta{
  background:rgba(255,255,255,.94);
  border:1px solid var(--rc-line);
  border-radius:10px;
  box-shadow:var(--rc-shadow);
  padding:24px;
}

#tituloContenido,
.tarjeta h1{
  color:var(--rc-ink);
  font-size:26px;
  line-height:1.15;
  margin-bottom:18px;
}

#areaDinamica{
  display:block;
}

h2{
  color:var(--rc-ink);
  letter-spacing:0;
}

h3{
  color:var(--rc-ink);
}

p{
  color:inherit;
}

button,
.boton-importar,
.formulario-caja button,
.formulario-usuarios button,
.formulario-productos button,
.formulario-compras button,
.acciones-pedido button,
.tabla-compras button,
.tabla-produccion button,
.filtros-produccion button{
  border:1px solid rgba(215,173,47,.78);
  border-radius:8px;
  background:linear-gradient(180deg, #e3bd43 0%, #cfa129 100%);
  color:#101828;
  box-shadow:var(--rc-shadow-soft);
  min-height:36px;
  font-weight:800;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

button:hover,
.boton-importar:hover,
.formulario-caja button:hover,
.formulario-usuarios button:hover,
.formulario-productos button:hover,
.formulario-compras button:hover,
.acciones-pedido button:hover,
.tabla-compras button:hover{
  background:linear-gradient(180deg, #efcc58 0%, #d8ab31 100%);
  box-shadow:0 8px 18px rgba(16,24,40,.12);
  transform:translateY(-1px);
}

button:active{
  transform:translateY(0);
}

.boton-peligro,
button[onclick*="eliminar"],
button[onclick*="Eliminar"]{
  background:#fff;
  color:var(--rc-red);
  border-color:#f2b8b5;
  box-shadow:none;
}

.boton-peligro:hover,
button[onclick*="eliminar"]:hover,
button[onclick*="Eliminar"]:hover{
  background:#fff1f0;
  color:#9f1f12;
  border-color:#e28a84;
}

input,
select,
textarea{
  border:1px solid var(--rc-line-strong) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--rc-ink);
  min-height:38px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--rc-cyan) !important;
  box-shadow:0 0 0 3px rgba(26,166,183,.14);
}

textarea{
  min-height:86px;
}

label{
  color:var(--rc-ink);
}

table{
  border-collapse:separate !important;
  border-spacing:0;
  width:100%;
  background:var(--rc-surface);
  border:1px solid var(--rc-line);
  border-radius:9px;
  overflow:hidden;
  box-shadow:var(--rc-shadow-soft);
}

thead th,
table th{
  background:#111827 !important;
  color:#fff !important;
  border:none !important;
  padding:10px 11px !important;
  font-size:13px;
  line-height:1.2;
  text-align:left;
}

tbody td,
table td{
  border:none !important;
  border-bottom:1px solid #eef2f7 !important;
  padding:9px 11px !important;
  vertical-align:middle;
}

tbody tr:nth-child(even){
  background:#fafcff;
}

tbody tr:hover{
  background:#f2f8fb;
}

.estado-caja,
.mesa-card,
.historial-delivery,
.delivery-cerrado,
.formulario-caja,
.formulario-usuarios,
.formulario-productos,
.formulario-compras,
.detalle-mesa,
.detalle-factura-panel,
.compra-card,
.panel-stock,
.config-panel,
.panel-caja-formulario,
.estado-caja-panel,
.datos-admin-grupo,
.finanzas-card,
.resumen-ventas div,
.resumen-cierres div,
.resumen-compras div,
.detalle-cierre-grid section{
  background:var(--rc-surface) !important;
  border:1px solid var(--rc-line) !important;
  border-radius:9px !important;
  box-shadow:var(--rc-shadow-soft);
}

.estado-caja,
.formulario-caja,
.formulario-usuarios,
.formulario-productos,
.formulario-compras,
.detalle-mesa,
.panel-caja-formulario,
.estado-caja-panel{
  padding:18px !important;
}

.datos-admin-encabezado,
.finanzas-header,
.stock-header,
.encabezado-barra,
.encabezado-detalle-cierre,
.operacion-header{
  background:linear-gradient(90deg, #111827 0%, #172033 100%) !important;
  color:#fff !important;
  border:1px solid rgba(215,173,47,.45) !important;
  border-radius:10px !important;
  box-shadow:var(--rc-shadow-soft);
}

.datos-admin-encabezado h2,
.datos-admin-encabezado p,
.finanzas-header h2,
.finanzas-header p,
.stock-header h2,
.stock-header p,
.encabezado-barra h2,
.operacion-header h2,
.operacion-header p{
  color:#fff !important;
}

.datos-admin-contador,
.resumen-caja-operacion div,
.factura-totales div,
.tarjeta-kpi,
.kpi-card{
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border:1px solid var(--rc-line) !important;
  border-radius:9px !important;
  box-shadow:var(--rc-shadow-soft);
}

.datos-admin-contador span,
.resumen-caja-operacion span,
.factura-totales span{
  color:var(--rc-muted) !important;
  font-size:12px;
  font-weight:700;
}

.datos-admin-contador strong,
.resumen-caja-operacion strong,
.factura-totales strong{
  color:var(--rc-ink) !important;
}

.acciones-pedido{
  gap:8px;
  align-items:center;
}

.acciones-pedido button,
td button,
.tabla-compras button,
#tablaFacturasCompras button{
  min-height:30px;
  padding:7px 10px;
  border-radius:7px;
  font-size:12px;
  box-shadow:none !important;
}

.boton-icono{
  width:32px !important;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px !important;
  background:#fff !important;
  color:var(--rc-red) !important;
  border:1px solid #f2b8b5 !important;
}

.alerta,
.caja-alerta{
  background:#fff8e6 !important;
  border:1px solid #f0c65a !important;
  color:#7a5200 !important;
  border-radius:9px !important;
  box-shadow:var(--rc-shadow-soft);
}

.estado-aceptado-cierre{
  background:#ecfdf3;
  color:#167042;
  border:1px solid #8bd3aa;
  border-radius:7px;
  padding:6px 8px;
  font-weight:800;
  display:inline-flex;
}

.factura-grid{
  border:1px solid var(--rc-line) !important;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
}

.factura-grid label{
  background:#f6f8fb !important;
  border-color:var(--rc-line) !important;
  color:var(--rc-muted);
}

.factura-grid input,
.factura-grid select,
.factura-grid p{
  border-color:var(--rc-line) !important;
}

.factura-totales{
  border:0 !important;
  gap:10px;
}

.detalle-factura-panel,
.cargar-nota-factura,
.filtros-produccion{
  background:#f8fafc !important;
  border-color:var(--rc-line) !important;
}

.buscador-tabla input{
  min-width:min(520px, 100%);
}

.seguridad-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}

.seguridad-card{
  background:#fff;
  border:1px solid var(--rc-line);
  border-radius:10px;
  padding:14px;
  display:grid;
  gap:10px;
}

.seguridad-card h3{
  margin:0;
  font-size:1rem;
}

.seguridad-card p,
.texto-ayuda-seguridad{
  color:var(--rc-muted);
  font-size:.84rem;
}

.texto-ayuda-seguridad{
  display:block;
  margin-top:-3px;
}

.tabla-compacta th,
.tabla-compacta td{
  padding:8px 10px;
}

.usuarios-maximos-resumen div{
  min-height:78px;
}

.badge-maestro{
  background:#101318;
  border-radius:999px;
  color:#f8e08b;
  display:inline-flex;
  font-size:.7rem;
  font-weight:800;
  margin-left:6px;
  padding:3px 7px;
}

.boton-mini-tabla{
  border-radius:8px;
  box-shadow:none;
  font-size:.78rem;
  min-height:30px;
  padding:6px 9px;
}

.check-linea{
  align-items:center;
  color:#3f3f46;
  display:flex;
  font-size:.9rem;
  font-weight:700;
  gap:8px;
}

.check-linea input{
  width:auto;
  min-height:auto;
}

.lista-categorias-gastos,
.contenedor-mesas,
.layout-delivery,
.resumen-caja-operacion,
.resumen-ventas,
.resumen-cierres,
.resumen-compras{
  gap:12px;
}

@media (max-width:1100px){
  .barra-superior{
    height:auto;
    min-height:82px;
    flex-wrap:wrap;
    gap:10px;
    padding:10px 14px;
  }

  .menu-superior{
    order:3;
    width:100%;
    overflow-x:auto;
    padding-bottom:4px;
  }

  .menu-superior button{
    white-space:nowrap;
  }

  .area-ayuda-logo{
    min-width:auto;
  }

  .contenedor{
    min-height:calc(100vh - 130px);
  }
}

@media (max-width:760px){
  .contenedor{
    flex-direction:column;
  }

  .menu-lateral{
    width:100%;
    border-right:0;
    border-bottom:1px solid var(--rc-line);
  }

  #subMenu{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:8px;
  }

  .menu-lateral button{
    margin:0;
  }

  .contenido{
    padding:14px;
  }

  .tarjeta{
    padding:16px;
  }

  .logo-ayuda{
    width:138px;
    height:52px;
  }
}