/* Minification failed. Returning unminified contents.
(2,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,25): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(26,38): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(35,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(38,20): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(40,26): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(43,20): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(47,21): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(48,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(49,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(52,21): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(63,21): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(105,21): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(127,23): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(153,22): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(160,20): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(184,61): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(192,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(207,44): run-time error CSS1039: Token not allowed after unary operator: '-navy'
(268,27): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(277,75): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(327,33): run-time error CSS1039: Token not allowed after unary operator: '-line'
(344,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(345,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(351,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(352,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(364,20): run-time error CSS1039: Token not allowed after unary operator: '-line'
(370,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(394,22): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(395,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(404,17): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(448,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(449,23): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(458,24): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(461,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(464,23): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(469,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(472,22): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(476,22): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(477,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(483,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(487,23): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(492,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(493,23): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(515,20): run-time error CSS1039: Token not allowed after unary operator: '-navy2'
(536,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(540,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(569,49): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(573,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(579,33): run-time error CSS1039: Token not allowed after unary operator: '-line'
(599,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(607,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(610,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(611,29): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(627,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(628,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(634,33): run-time error CSS1039: Token not allowed after unary operator: '-line'
(639,33): run-time error CSS1039: Token not allowed after unary operator: '-line'
(654,26): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(679,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(681,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(694,20): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(704,20): run-time error CSS1039: Token not allowed after unary operator: '-navy2'
(714,20): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(721,20): run-time error CSS1039: Token not allowed after unary operator: '-navy2'
(762,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(766,23): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(774,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(798,43): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(798,56): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(811,23): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(822,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(823,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(825,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(832,22): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(833,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(852,27): run-time error CSS1039: Token not allowed after unary operator: '-line'
(854,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(859,15): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(872,33): run-time error CSS1039: Token not allowed after unary operator: '-line'
(874,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(881,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(899,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(903,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(918,30): run-time error CSS1039: Token not allowed after unary operator: '-line'
(919,33): run-time error CSS1039: Token not allowed after unary operator: '-line'
(930,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(931,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(939,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(947,20): run-time error CSS1039: Token not allowed after unary operator: '-navy'
(958,23): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(1001,33): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1002,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1009,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(1020,33): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1022,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1038,44): run-time error CSS1039: Token not allowed after unary operator: '-navy'
(1038,57): run-time error CSS1039: Token not allowed after unary operator: '-navy2'
(1088,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(1089,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1100,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1114,15): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(1135,26): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(1140,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(1150,20): run-time error CSS1039: Token not allowed after unary operator: '-navy'
(1170,26): run-time error CSS1039: Token not allowed after unary operator: '-navy'
(1231,20): run-time error CSS1039: Token not allowed after unary operator: '-navy'
(1261,21): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(1264,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1266,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1273,22): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(1276,20): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(1277,22): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(1299,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1308,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(1320,23): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(1321,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1330,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1337,20): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(1344,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1357,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1385,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1398,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(1421,23): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(1422,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1427,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1432,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1444,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1448,15): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1451,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1458,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(1459,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(1465,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1470,20): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(1483,20): run-time error CSS1039: Token not allowed after unary operator: '-blue2'
(1491,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1505,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1520,15): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(1526,23): run-time error CSS1039: Token not allowed after unary operator: '-serif'
(1527,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1532,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1538,23): run-time error CSS1039: Token not allowed after unary operator: '-sans'
(1539,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(1543,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1545,28): run-time error CSS1030: Expected identifier, found ':'
(1545,36): run-time error CSS1031: Expected selector, found ')'
(1545,36): run-time error CSS1025: Expected comma or open brace, found ')'
(1554,20): run-time error CSS1039: Token not allowed after unary operator: '-navy'
(1573,62): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(1599,22): run-time error CSS1039: Token not allowed after unary operator: '-ice'
(1733,26): run-time error CSS1039: Token not allowed after unary operator: '-line'
(1746,44): run-time error CSS1039: Token not allowed after unary operator: '-navy'
(1746,57): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(1760,15): run-time error CSS1039: Token not allowed after unary operator: '-ink'
 */
:root {
  --navy: #071a33;
  --navy2: #0b2748;
  --blue: #276fb7;
  --blue2: #5d9dd1;
  --ice: #edf5fb;
  --ink: #0b1f3a;
  --muted: #5c6f85;
  --line: #cfe0ee;
  --white: #fff;
  --ivory: #fbfcfd;
  --serif: Georgia, "Times New Roman", serif;
  --sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  /* Firefox: ancho/color del scrollbar. Hereda a todo lo de adentro, no hace falta repetirlo
     por cada contenedor con scroll propio (tablas, sidebars, modales). */
  scrollbar-width: thin;
  scrollbar-color: var(--blue2) var(--ice);
}
/* Chrome/Edge/Safari: sin selector de ancestro, aplica por igual al scroll de la pagina y al
   de cualquier contenedor con overflow propio en toda la app. */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--ice);
}
::-webkit-scrollbar-thumb {
  background: var(--blue2);
  border-radius: 20px;
  border: 2px solid var(--ice);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--blue);
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ice);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
}
h1 { font-size: clamp(2.2rem, 4vw, 4.3rem); line-height: 1; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 1rem; }
label {
  font-family: var(--sans);
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
.hidden {
  display: none !important;
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
}
.login-view {
  min-height: 100svh;
  background:
    linear-gradient(rgba(5, 21, 42, 0.78), rgba(5, 21, 42, 0.88)),
    url(/Content/images/brand/hero-plato.png) 72% 50%/cover;
  display: grid;
  place-items: center;
  padding: 30px;
  color: #fff;
  position: relative;
}
.back-public {
  position: absolute;
  top: 28px;
  left: 30px;
  border: 0;
  color: #fff;
  background: transparent;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 15px;
}
.login-panel {
  width: min(480px, calc(100vw - 60px));
  padding: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(7, 26, 51, 0.78);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.login-panel > img {
  display: block;
  width: 310px;
  max-width: 90%;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 26px;
  filter: brightness(0) invert(1);
}
.login-panel h2 {
  font: 400 52px var(--serif);
  margin: 7px 0;
}
.login-panel p {
  color: #c4d2df;
}
.login-panel form {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}
.login-panel label {
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.login-panel input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  padding: 14px;
  border-radius: 9px;
  outline: none;
}
.login-panel input:focus {
  border-color: var(--blue2);
  box-shadow: 0 0 0 3px rgba(93, 157, 209, 0.18);
}
.primary {
  border: 0;
  border-radius: 9px;
  padding: 15px;
  background: var(--blue2);
  color: #fff;
  font-weight: 700;
}
.login-panel > small {
  display: block;
  text-align: center;
  color: #9eb4c8;
  margin-top: 20px;
}
.field-validation-error {
  display: block;
  color: #f3a3a3;
  font-size: 13px;
  margin-top: -8px;
}
.app-view {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 250px 1fr;
  /* dividido en vez de un solo color: .sidebar ya no se estira a la altura de .workspace
     (ver comentario en .sidebar) para que el sticky si tenga donde desplazarse, asi que en
     paginas largas su caja real solo mide un viewport - este fondo es lo que se ve detras,
     a la izquierda, en el resto de la pagina, para que no se corte a color hielo a la mitad */
  background: linear-gradient(to right, #0a2b50 250px, var(--ice) 250px);
  transition: grid-template-columns .25s ease;
}
.app-view.nav-collapsed {
  grid-template-columns: 0px 1fr;
  /* el fondo dividido de .app-view pinta navy en los primeros 250px a lo largo de TODA la
     altura sin importar el ancho real de la columna - al colapsar el menu esa columna pasa
     a 0px pero el fondo seguia fijo en 250px, tapando el contenido del lado izquierdo. */
  background: var(--ice);
}
.app-view.nav-collapsed .sidebar {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
/* Oculto por default en todo tamaño de pantalla - solo se muestra como overlay dentro
   del @media movil (abajo). Sin esto, el div queda como bloque normal y el grid de 2
   columnas de .app-view lo cuenta como un tercer item, empujando el resto del layout
   (topbar + contenido) a una fila nueva en escritorio. */
.nav-backdrop {
  display: none;
}
.sidebar {
  background: linear-gradient(180deg, var(--navy), #0a2b50);
  padding: 26px 16px;
  display: flex;
  flex-direction: column;
  color: #fff;
  position: sticky;
  top: 0;
  min-height: 100svh;
  /* align-self:stretch (el default de grid) hacia que .sidebar midiera lo mismo que
     .workspace en paginas largas - un elemento sticky que ya ocupa el 100% de su propio
     contenedor de scroll no tiene margen para "pegarse", asi que el logo/nav se quedaban
     en su posicion original del documento y desaparecian al hacer scroll (el bug reportado).
     Con "start" el sidebar mide solo min-height (un viewport) y position:sticky si puede
     desplazarse dentro del resto de la altura de .app-view. El fondo navy de mas abajo lo
     cubre el background de .app-view (ver arriba), no este elemento. */
  align-self: start;
}
.sidebar > img {
  height: 74px;
  width: 210px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin: 0 auto 25px;
}
.sidebar nav {
  gap: 7px;
}
.sidebar nav button {
  border: 0;
  color: #d8e5f0;
  background: transparent;
  border-radius: 10px;
  padding: 13px 15px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 13px;
}
.sidebar nav button:hover,
.sidebar nav button.active {
  background: linear-gradient(90deg, #245f99, #347db8);
  color: #fff;
}
.sidebar svg {
  width: 22px;
  height: 22px;
}
.sidebar > a:first-child { display: block; }
.sidebar > a:first-child img {
  height: 74px;
  width: 210px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin: 0 auto 25px;
  display: block;
}
/* Modulos dinamicos (Views/Login/_VisualizaModulos.cshtml) - reskin sin tocar el markup/la logica */
.sidebar #app-nav {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--blue2) transparent;
}
.sidebar #app-nav::-webkit-scrollbar { width: 6px; }
.sidebar #app-nav::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.sidebar #app-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar #app-nav::-webkit-scrollbar-thumb {
    background-color: rgba(93, 157, 209, .45);
    border-radius: 10px;
}
.sidebar #app-nav::-webkit-scrollbar-thumb:hover { background-color: var(--blue2); }
.sidebar #app-nav ul.components { margin: 0; padding: 0; list-style: none; }
.sidebar #app-nav ul.components ul.collapse:not(.show) { display: none; }
.sidebar #app-nav ul.components > li > a.dropdown-toggle {
    border: 0;
    color: #d8e5f0;
    background: transparent;
    border-radius: 10px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    cursor: pointer;
}
.sidebar #app-nav ul.components > li > a.dropdown-toggle i {
    width: 22px;
    text-align: center;
    font-size: 16px;
}
.sidebar #app-nav ul.components > li > a.dropdown-toggle:hover,
.sidebar #app-nav ul.components > li > a.dropdown-toggle[aria-expanded="true"] {
    background: linear-gradient(90deg, #245f99, #347db8);
    color: #fff;
}
.sidebar #app-nav ul.components ul.collapse,
.sidebar #app-nav ul.components ul.collapsing {
    list-style: none;
    padding: 0;
    margin: 2px 0 6px 20px;
    border-left: 1px solid rgba(255,255,255,.15);
}
.sidebar #app-nav ul.components ul li a {
    display: block;
    padding: 10px 15px;
    color: #a9c3da;
    text-decoration: none;
    font-size: .92rem;
    border-radius: 8px;
}
.sidebar #app-nav ul.components ul li a:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.workspace {
  min-width: 0;
}
.app-header {
  height: 86px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 30px;
  position: sticky;
  top: 0;
  z-index: 5;
}
/* antes este empuje lo daba el margin-left:auto de .app-search - con el buscador comentado
   (sin funcionalidad real todavia) el dropdown de perfil necesita su propio empuje para
   seguir pegado a la derecha del header sin importar si .topbar-brand esta visible o no. */
.app-header > .dropdown {
  margin-left: auto;
}
.profile {
  border: 0;
  background: var(--ice);
  color: var(--ink);
  padding: 13px 16px;
  border-radius: 10px;
}
.sidebar-toggle {
  border: 0;
  background: var(--ice);
  color: var(--ink);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  background: var(--line);
}
.app-search {
  flex: 1;
  max-width: 300px;
  margin-left: auto;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  gap: 10px;
}
.app-search svg {
  width: 20px;
}
.app-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 15px;
}
.profile.dropdown-toggle::after {
    display: none;
}
.company-select-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: var(--ice);
    color: var(--ink);
    padding: 6px 16px;
    border-radius: 10px;
    margin: 0;
    flex: 0 1 340px;
    min-width: 220px;
}
.company-select-wrap .fa {
    font-size: 15px;
    color: var(--muted);
}
.topbar-brand {
    /* Centrado absoluto respecto a .app-header completo (position:sticky ya forma su
       containing block), no con flex:1 - flex solo centra dentro del espacio sobrante
       entre .company-select-wrap y el perfil, que no es simetrico (el select es bastante
       mas ancho que el perfil), asi que quedaba corrido hacia la derecha del header real.
       Oculto por default: el sidebar ya muestra su propio logo cuando esta expandido -
       este solo aparece de respaldo cuando el sidebar se colapsa (ver .nav-collapsed abajo)
       o siempre en movil (ver @media mas abajo, reemplaza al buscador ahi). */
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.app-view.nav-collapsed .topbar-brand {
    display: flex;
}
.topbar-brand img {
    height: 40px;
    width: auto;
    object-fit: contain;
}
/* Select2 (usado en varios modulos) reskineado al tema del sistema */
.select2-container {
    margin-top: 8px;
}
.select-empresa-topbar {
    margin: 0;
    /* Select2 con width:"resolve" (InicializarSelectEmpresa en MainLayout.cshtml) fija un
       ancho por inline style, casi siempre angosto porque no hay ningun width en el <select>
       original - se sobreescribe para que ocupe todo .company-select-wrap (que ya trae su
       propio min-width/flex) y asi se vea el nombre completo de la empresa. */
    width: 100% !important;
}
.select2-container--default .select2-selection--single {
    height: 34px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--muted) transparent transparent transparent;
}
.select2-dropdown {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--sans);
    box-shadow: 0 12px 30px rgba(11, 31,58, .12);
}
.select2-results__option {
    padding: 10px 14px;
    color: var(--ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--blue);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--ice);
    color: var(--ink);
}
.select2-search--dropdown {
    padding: 10px;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    outline: none;
    font-family: var(--sans);
}
.company-select {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    padding: 7px 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    max-width: 220px;
}
.app-search .fa {
    font-size: 16px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
}
.profile span {
  display: grid;
  place-items: center;
  background: var(--navy2);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
/* Aqui (no en .workspace) porque .workspace es un item del grid de .app-view: ponerle
   overflow ahi hace que el navegador use 0 como su "tamano minimo automatico" en vez del
   contenido real, encogiendolo a la altura del sidebar y metiendo el modulo en su propio
   scroll interno en vez de dejar crecer la pagina completa (el bug que queriamos evitar
   reaparecio distinto). #module-content es un div de bloque normal, no un item del grid,
   asi que protege el mismo desbordamiento horizontal sin ese efecto secundario. */
#module-content {
  overflow-x: hidden;
}
.module {
  padding: 42px 34px;
}
.footer {
  text-align: center;
  padding: 24px 0 34px;
  color: var(--muted);
  font-size: 14px;
}
.footer a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}
/* Paneles CRUD tipo "dashboard" (Categorias/Marcas/Proveedores en PARAMETROS y similares) */
.x_panel {
  margin-bottom: 20px;
}
.c-dashboardInfo {
  background: #fff;
  border: 1px solid #dae8f3;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(15, 55, 92, 0.05);
  height: 100%;
}
.c-dashboardInfo h3 {
  font-size: 1.2rem;
}
.module-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 26px;
}
.module-head h1 {
  font: 400 clamp(2.2rem, 4vw, 4.3rem) / 1 var(--serif);
  margin: 0;
}
.module-head p {
  color: var(--muted);
  font-size: 17px;
  margin: 8px 0 0;
}
/* Pestañas tipo Bootstrap 4 (nav-tabs) reskineadas al tema, ej. INSUMOS/Administrador */
.nav-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
.nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
}
.nav-tabs .nav-link:hover {
  color: var(--ink);
}
.nav-tabs .nav-link.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
/* Estandar del sistema: TODAS las tablas van en blanco, sin colores alternados por fila -
   solo la linea inferior de cada fila. Cubre tablas normales (.table), DataTables (que agrega
   sus propias clases odd/even via jquery.dataTables_themeroller) y bootstrap-table. */
.table,
table.dataTable {
  margin-bottom: 0;
}
.table thead th,
table.dataTable thead th,
tr.bg-gasto,
tr.bg-gasto th,
tr.bg-gasto td,
th.bg-gasto,
td.bg-gasto {
  background: var(--ice) !important;
  color: var(--muted) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.table tbody td,
table.dataTable tbody td {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr,
.table tbody tr.odd,
.table tbody tr.even,
.table.table-striped tbody tr:nth-of-type(odd),
.table.table-striped tbody tr:nth-of-type(even),
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background-color: #fff;
}
.table tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: var(--ice);
}
/* Estandar del sistema: tablas compactas (fuente y padding mas chicos que antes) */
.table,
table.dataTable {
  font-size: 13px;
}
.table td,
.table th,
table.dataTable td,
table.dataTable th {
  padding: 8px 9px;
}
.actions {
  display: flex;
  align-items: end;
  gap: 10px;
}
.filtro-categoria {
  min-width: 320px;
}
.filtro-categoria .select2-container {
  width: 100% !important;
}
.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 12px 16px;
  border-radius: 9px;
}
/* .btn_gs / .btn_gs_icon: botones de accion usados en modulos como INSUMOS/PARAMETROS.
   Antes los pintaba custom.css (skin viejo, dorado) - ese archivo ya no se incluye en el
   bundle, asi que quedaban sin estilo. Se reemplazan con los colores del tema nuevo. */
.btn_gs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 5px;
}
.btn_gs:hover {
  background: var(--navy2);
  color: #fff;
}
.btn_gs_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.btn_gs_icon:hover {
  background: var(--navy2);
}
/* Estandar del sistema: los botones de accion de cada fila de tabla (columna "Opciones")
   van agrupados en un .btn-group de Bootstrap (fila horizontal), no apilados/sueltos. */
.btn-group > .btn_gs_icon {
  width: 34px;
  height: 34px;
  border-radius: 0;
}
.btn-group > .btn_gs_icon:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .35);
}
.btn-group > .btn_gs_icon:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.btn-group > .btn_gs_icon:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.kpis-3 {
  grid-template-columns: repeat(3, 1fr);
}
.kpi,
.panel {
  background: #fff;
  border: 1px solid #dae8f3;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(15, 55, 92, 0.05);
}
.kpi {
  padding: 21px;
}
.kpi small {
  display: block;
  color: var(--muted);
}
.kpi strong {
  display: block;
  font: 700 32px var(--serif);
  margin-top: 8px;
}
.kpi-breakdown {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.kpi-breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kpi-breakdown i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.kpi-breakdown i.dot-active { background: #1ed085; }
.kpi-breakdown i.dot-inactive { background: #b9c4ce; }
.progress {
  height: 6px;
  background: #e5eff7;
  border-radius: 9px;
  margin-top: 18px;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue2));
  border-radius: 9px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
.panel {
  padding: 24px;
  width: 100%;
}
.panel h2 {
  font: 400 25px var(--serif);
  margin: 0 0 18px;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quick-grid button,
.quick-grid a {
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--ice);
  border-radius: 10px;
  color: var(--ink);
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  display: block;
}
.quick-grid a:hover {
  border-color: var(--blue);
  color: var(--blue);
  text-decoration: none;
}
/* Resumen del negocio (Views/Home/Index) - "Evolucion del costo de alimentos" y "Mayor
   variacion" ahora se alimentan de C_insumos_historial_precios (ver HomeController); este
   estado vacio se conserva y se muestra solo cuando una empresa todavia no tiene ningun
   registro de historial capturado. */
/* :not([hidden]) es a proposito: un selector de clase y el [hidden] nativo del navegador
   tienen la misma especificidad, y como esta hoja va despues del stylesheet por default del
   navegador, "display:flex" le ganaba al "display:none" del atributo hidden aunque JS ya lo
   hubiera puesto - el panel de "sin datos" nunca se ocultaba de verdad al alternar .prop("hidden"). */
.empty-state:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 220px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  padding: 24px;
}
.empty-state i {
  font-size: 26px;
  color: var(--blue2);
}
.empty-state p {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
}
.variacion-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}
.variacion-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.variacion-row strong {
  color: var(--blue);
  font-size: 15px;
  white-space: nowrap;
}
.evolucion-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.evolucion-filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.evolucion-filtros select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
}
#select_mes_evolucion {
  width: 150px;
  flex-shrink: 0;
}
/* "Ver detalle" (ej. SUBRECETAS/Administrador/_VerSubrecetaDetalle) - grid de metadatos
   del encabezado, resumen de costeo, preparacion y equipo requerido */
.detalle-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 30px;
  margin: 20px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.detalle-meta-grid > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.detalle-meta-grid i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.detalle-meta-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.detalle-meta-grid strong {
  display: block;
  font-size: 14px;
}
.resumen-costeo {
  background: var(--navy);
  color: #fff;
}
.resumen-costeo small {
  color: #9fc7e8;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: 11px;
}
.resumen-costeo-total {
  display: block;
  font: 700 32px var(--serif);
  margin: 6px 0 14px;
}
.resumen-costeo-rows {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 12px;
  display: grid;
  gap: 10px;
}
.resumen-costeo-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.resumen-costeo-rows span {
  color: #bcd4ea;
}
.resumen-costeo-rows em {
  font-style: normal;
  color: #9fc7e8;
  margin-right: 8px;
  font-size: 12px;
}
.preparacion-steps {
  margin: 0;
  padding-left: 20px;
}
.preparacion-steps li {
  margin-bottom: 10px;
  line-height: 1.5;
  font-size: 12px;
}
.equipo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.equipo-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
}
.equipo-list li:last-child {
  border-bottom: 0;
}
.equipo-list i {
  color: var(--blue);
  width: 16px;
}
/* Leyenda manual para las graficas de dona (echarts) - ej. Precio de venta en
   RECETAS/Index.cshtml - evita usar la leyenda nativa de echarts, que no cabe bien
   dentro de contenedores chicos y se empalma con el centro de la dona. */
.grafica-leyenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}
.grafica-leyenda span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.grafica-leyenda i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
/* Hero del detalle de receta (Views/RECETAS/Administrador/_DetalleReceta) - encabezado
   oscuro con estado, acciones y metadatos con icono, a lo ancho del modal */
.detalle-hero {
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  border-bottom: none;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}
.detalle-hero .modal-title {
  color: #fff;
}
.detalle-hero .close {
  color: #fff;
  opacity: .8;
  text-shadow: none;
}
.detalle-hero .close:hover {
  opacity: 1;
  color: #fff;
}
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 5px 11px;
  border-radius: 999px;
}
.badge-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-status.activa {
  background: #e7f6ec;
  color: #1f8a4c;
}
.badge-status.inactiva {
  background: #fbe7e7;
  color: #b23b3b;
}
/* Checklist de alergenos (Views/CATALOGOS/Alergenos/_AlergenosCheckbox.cshtml, usado en
   el formulario de receta - RECETAS/Index.cshtml) */
.alergenos-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 20px;
  padding: 14px 16px;
  background: var(--ice);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.alergeno-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.alergeno-check-item:hover {
  background: #fff;
}
.alergeno-check-item .check_gs {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.alergeno-check-item .alergeno-check-icon {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  color: var(--blue2);
  font-size: 15px;
}
@media (max-width: 720px) {
  .alergenos-checklist {
    grid-template-columns: 1fr;
  }
}
/* Iconos de alergenos en el detalle de receta (Views/RECETAS/Administrador/_DetalleReceta.cshtml)
   - circulo de tamano uniforme con contorno azul; el nombre del alergeno aparece como
   tooltip al hacer hover, generado en CSS puro desde data-tooltip (sin JS). */
.alergenos-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.alergeno-icon-badge {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--blue2);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 18px;
  cursor: default;
}
.alergeno-icon-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
  z-index: 5;
}
.alergeno-icon-badge::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--navy);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
  z-index: 5;
}
.alergeno-icon-badge:hover::after,
.alergeno-icon-badge:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.detalle-hero .detalle-meta-grid {
  grid-template-columns: repeat(5, 1fr);
  margin: 18px 0 0;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: none;
}
.detalle-hero .detalle-meta-grid i {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.detalle-hero .detalle-meta-grid small {
  color: rgba(255, 255, 255, .55);
}
.detalle-hero .detalle-meta-grid strong {
  color: #fff;
}
.detalle-hero-img {
  flex: 0 0 200px;
  align-self: stretch;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.detalle-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 1100px) {
  .detalle-hero .detalle-meta-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .detalle-hero .detalle-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .detalle-hero-img {
    display: none;
  }
}
/* Recetario digital (Views/RECETARIO) - switch Cuadrada/Lista (iconos) */
.vista-toggle-icons {
  display: flex;
  background: var(--navy);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.vista-icon-btn {
  width: 34px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .5);
  border-radius: 7px;
  cursor: pointer;
}
.vista-icon-btn svg {
  width: 16px;
  height: 16px;
}
.vista-icon-btn.active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
/* chips de familia */
.chips-familia-row {
  margin-bottom: 20px;
}
.chip-familia {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 18px;
  margin: 0 10px 10px 0;
  cursor: pointer;
}
.chip-familia:hover {
  border-color: var(--blue2);
}
.chip-familia.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
/* vista Cuadrada: grid de tarjetas */
.recetario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}
@media (max-width: 1100px) {
  .recetario-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .recetario-grid {
    grid-template-columns: 1fr;
  }
}
.receta-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(15, 55, 92, .05);
}
.receta-card-img {
  position: relative;
  height: 190px;
  background: var(--ice);
}
.receta-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.receta-card-body {
  padding: 18px;
}
.receta-card-body h3 {
  font: 400 20px var(--serif);
  color: var(--ink);
  margin: 0 0 6px;
  text-wrap: balance;
}
.receta-card-cat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.receta-card-cat i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.receta-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* boton de favorito, decorativo (sin persistencia), sobre la imagen */
.receta-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .9);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.receta-fav-btn svg {
  width: 15px;
  height: 15px;
}
.receta-fav-btn.active {
  color: #d1495b;
}
.receta-fav-btn.active svg path {
  fill: currentColor;
}
/* vista Lista: filas */
.recetario-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.receta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(15, 55, 92, .05);
}
.receta-row-img {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ice);
}
.receta-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.receta-row-img .receta-fav-btn {
  width: 22px;
  height: 22px;
  top: 4px;
  right: 4px;
}
.receta-row-img .receta-fav-btn svg {
  width: 11px;
  height: 11px;
}
.receta-row-body {
  flex: 1;
  min-width: 0;
}
.receta-row-body h3 {
  font: 400 17px var(--serif);
  color: var(--ink);
  margin: 0 0 4px;
}
.receta-row-porciones {
  font-size: 12.5px;
  color: var(--muted);
}
.receta-row-date {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .receta-row-date {
    display: none;
  }
}
/* Detalle de receta/subreceta dentro del Recetario digital (vista de catalogo, no la del
   Administrador de recetas) - breadcrumb y chips de alergenos */
.breadcrumb-recetario {
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb-recetario span {
  margin: 0 6px;
  color: var(--line);
}
.breadcrumb-recetario strong {
  color: var(--ink);
}
.chip-alergeno {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--ice);
  color: var(--blue);
  border-radius: 999px;
  padding: 6px 14px;
}
.chip-alergeno-vacio {
  background: #f2f4f7;
  color: var(--muted);
}
/* Licencias (Views/LICENCIAS) - barra de vigencia del plan por empresa. Solo estaba definida
   en el custom.css viejo (ya no incluido en el bundle activo), asi que se veia sin estilo. */
.meter {
  background: var(--ice);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #1f8a4c;
}
.meter.orange > span {
  background: var(--blue2);
}
.meter.red > span {
  background: #b23b3b;
}
.meter-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
/* Licencias - seleccion de plan al renovar (antes tarjetas "testimonials" con una imagen de
   stock externa que no tenia relacion con el plan) */
.plan-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.plan-select-card {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  margin: 0;
}
.plan-select-card input {
  position: absolute;
  top: 14px;
  right: 14px;
}
.plan-select-tipo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 6px;
}
.plan-select-nombre {
  display: block;
  font: 400 18px var(--serif);
  color: var(--ink);
  margin-bottom: 4px;
}
.plan-select-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 10px;
  min-height: 32px;
}
.plan-select-precio {
  display: block;
  font: 700 20px var(--sans);
  color: var(--ink);
}
.plan-select-dias {
  font-size: 12px;
  color: var(--muted);
}
.plan-select-card:has(input:checked) {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue) inset;
  background: var(--ice);
}
#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.3s;
  z-index: 50;
}
#toast.show {
  transform: none;
  opacity: 1;
}
@media (max-width: 1000px) {
  .app-view {
    grid-template-columns: 82px 1fr;
    /* el fondo dividido de .app-view (ver regla base) esta fijo en 250px - aqui la columna
       real del sidebar es de solo 82px, hay que igualar el corte o el navy se recorta antes
       de tiempo y deja una franja hielo entre el sidebar angosto y el contenido. */
    background: linear-gradient(to right, #0a2b50 82px, var(--ice) 82px);
  }
  .sidebar > img {
    width: 60px;
  }
  .sidebar nav button {
    font-size: 0;
    justify-content: center;
  }
  .sidebar nav button svg {
    width: 25px;
    height: 25px;
  }
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .app-view {
    display: block;
    /* aqui .app-view deja de ser un grid de 2 columnas (el sidebar pasa a ser un drawer
       fixed, fuera del flujo), asi que el fondo dividido de la regla base no aplica -
       sin esto pintaba una franja navy fija de 250px sobre el contenido en movil. */
    background: var(--ice);
  }
  /* El menu de modulos (Views/Login/_VisualizaModulos.cshtml) es un acordeon anidado
     (ul.components > li > a.dropdown-toggle + ul.collapse), no botones sueltos - intentar
     acomodarlo en una fila horizontal lo desbordaba verticalmente y tapaba la pantalla.
     En movil el sidebar pasa a ser un panel deslizante (off-canvas): oculto por default,
     se abre con el mismo boton de hamburguesa (#sidebarToggleBtn) que en escritorio colapsa
     el menu, ahora alternando la clase "mobile-nav-open" en vez de "nav-collapsed"
     (ver gastrosomm-app.js). */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100svh;
    width: 82%;
    max-width: 300px;
    z-index: 40;
    display: flex;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 20px 0 40px rgba(3, 12, 26, .35);
  }
  .app-view.mobile-nav-open .sidebar {
    transform: translateX(0);
  }
  .sidebar nav {
    flex: 1;
    overflow-y: auto;
  }
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 14, 28, .55);
    z-index: 39;
  }
  .app-view.mobile-nav-open .nav-backdrop {
    display: block;
  }
  .app-header {
    height: 70px;
    padding: 0 12px;
  }
  .sidebar-toggle {
    display: flex;
  }
  .company-select-wrap {
    display: none;
  }
  .app-search {
    display: none;
  }
  .topbar-brand {
    /* En movil ocupa el lugar de la barra de busqueda (comentada en MainLayout.cshtml) -
       "nav-collapsed" (escritorio) se guarda en localStorage y se re-aplica al cargar la
       pagina sin importar el ancho de pantalla, asi que el !important es necesario para que
       se muestre siempre aqui sin importar si esa clase quedo activa de una sesion previa. */
    display: flex !important;
  }
  .profile {
    font-size: 0;
    padding: 0;
  }
  .module {
    padding: 25px 14px;
  }
  .module-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .actions {
    width: 100%;
    overflow: auto;
  }
  .login-panel {
    padding: 30px;
  }
  .login-panel h2 {
    font-size: 34px;
  }
}
/* Estandar global de impresion: ImprimirDiv() (gastrosomm-app.js) clona el div que se quiere
   imprimir dentro de #print-area (hijo directo de <body>, ver MainLayout.cshtml) y le agrega
   la clase is-printing al body. #print-area vive oculto siempre EXCEPTO durante la impresion,
   momento en el que se oculta todo lo demas (sidebar, topbar, modal de fondo, etc.) y solo se
   muestra #print-area - asi el PDF/impresion nunca mezcla el div de enfrente con el de atras.
   Los botones con clase "hideExport" (editar/imprimir/exportar/cerrar) tambien se ocultan
   dentro de la copia impresa. */
#print-area {
  display: none;
}
/* Opuesto de .hideExport: elementos (ej. el logo del encabezado en la exportacion de
   receta/subreceta) que solo deben verse al imprimir/exportar a PDF, nunca en pantalla. */
.print-logo {
  /*display: none;*/
}
@media print {
  body.is-printing > *:not(#print-area) {
    display: none !important;
  }
  body.is-printing #print-area {
    display: block !important;
  }
  /* Generico (no solo dentro de #print-area): las paginas de exportacion a PDF por
     Rotativa (wkhtmltopdf renderiza en modo "print" por defecto) no usan #print-area -
     son la vista completa ya servida como documento propio - asi que este selector sin
     alcance es el que realmente oculta los botones de Editar/Exportar/Actualizar ahi. */
  .hideExport {
    display: none !important;
  }
  .print-logo {
    display: block !important;
  }
  /* Si la receta/subreceta no cabe en 1 hoja, que wkhtmltopdf corte ENTRE tarjetas/filas de
     tabla, no a la mitad de una - evita que un "COSTO IDEAL" o una fila de ingrediente quede
     partida entre dos hojas. */
  .panel, .table tr {
    page-break-inside: avoid;
  }
}
/* Manual del sistema (Views/AYUDA/Index) - galeria de videos instructivos. Sin miniatura real
   por video (extraer un frame de cada .mp4 es trabajo de servidor que no aporta aqui), solo un
   icono de "play" sobre un fondo con degradado de marca. */
.videos-manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 4px;
}
.video-manual-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(15, 55, 92, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.video-manual-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 55, 92, 0.12);
}
.video-manual-thumb {
  height: 130px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-manual-thumb i {
  color: #fff;
  font-size: 40px;
  opacity: 0.9;
}
.video-manual-card p {
  margin: 0;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}
#video_ayuda_player {
  width: 100%;
  max-height: 70vh;
  background: #000;
  display: block;
}