@charset "UTF-8";
.left_col {
  background: #2A3F54; }

.container {
  width: 100%;
  padding: 0;
  max-width: 100%; }

.nav-sm .container.body .col-md-3.left_col {
  min-height: 100%;
  width: 70px;
  padding: 0;
  z-index: 9999;
  position: absolute; }

.nav-sm .container.body .col-md-3.left_col.menu_fixed {
  position: fixed;
  height: 100%; }

.nav-sm .hidden-small {
  visibility: hidden; }

.nav-sm .container.body .right_col {
  padding: 10px 20px;
  margin-left: 70px;
  z-index: 2; }

.nav-sm .navbar.nav_title {
  width: 70px; }

.nav-sm .navbar.nav_title a span {
  display: none; }

.nav-sm .navbar.nav_title a i {
  font-size: 27px;
  margin: 13px 0 0 3px; }

.site_title i {
  border: 1px solid #EAEAEA;
  padding: 5px 6px;
  border-radius: 50%; }

.nav-sm .main_container .top_nav {
  display: block;
  margin-left: 70px;
  z-index: 2; }

.nav-sm .nav.side-menu li a {
  text-align: center !important;
  font-weight: 400;
  font-size: 10px;
  padding: 10px 5px; }

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
  border-right: 5px solid #1ABB9C; }

.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {
  position: static;
  width: 200px;
  background: none; }

.nav-sm > .nav.side-menu > li.active-sm > a {
  color: #1ABB9C !important; }

.nav-sm .nav.side-menu li a i {
  font-size: 25px !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 5px; }

.nav-sm ul.nav.child_menu {
  left: 100%;
  position: absolute;
  top: 0;
  width: 210px;
  z-index: 4000;
  background: #3E5367;
  display: none; }

.nav-sm ul.nav.child_menu li {
  padding: 0 10px; }

.nav-sm ul.nav.child_menu li a {
  text-align: left !important; }

.nav-sm .profile {
  display: none; }

.menu_section {
  margin-bottom: 35px; }

.menu_section h3 {
  padding-left: 23px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: 1px 1px #000; }

.menu_section > ul {
  margin-top: 10px;
  display: block; }

.profile_pic {
  width: 35%;
  float: left; }

.img-circle.profile_img {
  width: 70%;
  background: #fff;
  margin-left: 15%;
  z-index: 1000;
  position: inherit;
  margin-top: 20px;
  border: 1px solid rgba(52, 73, 94, 0.44);
  padding: 4px; }

.profile_info {
  padding: 25px 10px 10px;
  width: 65%;
  float: left; }

.profile_info span {
  font-size: 13px;
  line-height: 30px;
  color: #BAB8B8; }

.profile_info h2 {
  font-size: 14px;
  color: #ECF0F1;
  margin: 0;
  font-weight: 300; }

.main_menu span.fa {
  float: right;
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
  min-width: inherit;
  color: #C4CFDA; }

.active a span.fa {
  text-align: right !important;
  margin-right: 4px; }

.nav-sm .menu_section {
  margin: 0; }

.nav-sm span.fa,
.nav-sm .menu_section h3 {
  display: none; }

.nav-sm li li span.fa {
  display: inline-block; }

.nav_menu {
  float: left;
  background: #EDEDED;
  border-bottom: 1px solid #D9DEE4;
  margin-bottom: 10px;
  width: 100%;
  position: relative; }

@media (min-width: 480px) {
  .nav_menu {
    position: static; }
  .item {
    display: block; } }

.nav-md .container.body .col-md-3.left_col {
  min-height: 100%;
  width: 230px;
  padding: 0;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 1; }

.nav-md .container.body .col-md-3.left_col.menu_fixed {
  height: 100%;
  position: fixed; }

/* EL PANEL MIDE LO QUE MIDE SU CONTENIDO, Y NI UN PIXEL MAS. Pedido de Amilcar del 30 de agosto de
   2026 —«hay vistas que tienen mas espacio vertical que lo necesario»—, y eran DOS defectos
   encadenados, los dos medidos servidos antes de tocar nada:

   1. EL PANEL NO CONTENIA SU PROPIO CONTENIDO. Las vistas dibujan `.x_panel` dentro de un
      `col-md-*`, que FLOTA, y un contenedor cuyos hijos flotan colapsa —lo mismo que le pasaba a
      `.top_nav`—. Medido en «Tanques y mangueras»: el panel cerraba en 844 px mientras su contenido
      seguia hasta 1043. Lo unico que recogia el sobrante era el `<div class="clearfix">` del pie,
      que al limpiar los floats SE ESTIRA hasta abarcarlos: por eso el pie medía 238 px ahi y 2.359
      en «control de informes», cuando de suyo mide 39. El `flow-root` hace que los contenga sin
      cambiar nada mas —no es `overflow`, asi que no rompe ningun `sticky` de los de arriba—.

   2. EL ALTO MINIMO ERA MAYOR QUE LA VENTANA ENTERA: 778 px contra 747 de ventana, medido en cinco
      pantallas. Lo calculaba `setContentHeight()` de custom.js, y se realimentaba: primero le ponia
      al panel el alto de la ventana y DESPUES media el `body` —que ya incluia lo que acababa de
      poner— para restarle la barra y el pie. El resultado se arrastraba el alto de la ventana a si
      mismo, asi que la pagina desplazaba SIEMPRE, hubiera contenido o no. Esa funcion se vacio; lo
      que hace falta de verdad es este `min-height`, que es la misma idea sin el lazo: que el fondo
      gris llegue abajo cuando el contenido es corto.

   Los 105 px de `--alto-fuera-del-panel` son la barra de arriba mas el pie. Si el contenido es mas
   alto que eso, el panel crece por su contenido y el `min-height` no participa. */
body .container.body .right_col {
  display: flow-root;
  min-height: calc(100vh - var(--alto-fuera-del-panel));
  background: #F7F7F7; }

.nav-md .container.body .right_col {
  padding: 10px 20px 0;
  margin-left: 230px; }

.nav_title {
  width: 230px;
  float: left;
  background: #2A3F54;
  border-radius: 0;
  height: 57px;
  padding: 0px; }

@media (max-width: 991px) {
  .nav-md .container.body .right_col, .nav-md .container.body .top_nav {
    width: 100%;
    margin: 0; }
  .nav-md .container.body .col-md-3.left_col {
    display: none; }
  .nav-md .container.body .right_col {
    width: 100%;
    padding-right: 0; }
  .right_col {
    padding: 10px !important; }
  .item {
    display: block; } }

@media (max-width: 1200px) {
  .x_title h2 {
    width: 62%;
    font-size: 17px; }
    .item {
    display: block; } }

@media (max-width: 1270px) and (min-width: 192px) {
  .x_title h2 small {
    display: none; } }

/**  ------------------------------------------  **/
.container {
  width: 100%;
  padding: 0;
  max-width: 100%; }

.navbar-nav > li > a, .navbar-nav > li > a {
  color: #fff !important; }

body {
  color: #73879C;
  background: #2A3F54;
  font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.471; }

.main_container .top_nav {
  display: block;
  margin-left: 230px; }

.col-md-2, .col-md-3, .col-lg-4, .col-md-5, .col-sm-6, .col-md-6, .col-md-7, .col-md-8, .col-md-10, .col-sm-12, .col-md-12 {
  position: relative;
  min-height: 1px;
  float: left;
  padding-right: 10px;
  padding-left: 10px; }

.row {
  margin-right: -10px;
  margin-left: -10px; }

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 10px;
  margin-bottom: 10px; }

a {
  color: #5A738E;
  text-decoration: none; }

a, a:visited, a:focus, a:active, :visited, :focus, :active, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
  outline: 0; }

a:hover, a:focus {
  text-decoration: none; }

.navbar {
  margin-bottom: 0; }

.navbar-right {
  margin-right: 0; }

.top_nav .navbar-right {
  margin: 13px;
  width: auto;
  float: right; }

.top_nav .navbar-right li {
  display: inline-block;
  float: right;
  position: static; }

@media (min-width: 480px) {
  .top_nav .navbar-right li {
    position: relative; }
  .item {
    display: block; } }

.top_nav .dropdown-menu li {
  width: 100%; }

.dropdown-item {
  width: 100%;
  padding: 12px 20px; }

.top_nav li a i {
  font-size: 15px; }

.nav > li {
  position: relative;
  display: block; }

.nav.side-menu > li {
  position: relative;
  display: block;
  cursor: pointer; }

.nav.side-menu > li > a {
  margin-bottom: 6px; }

.nav.side-menu > li > a:hover {
  color: #F2F5F7 !important; }

.nav.side-menu > li > a:hover, .nav > li > a:focus {
  text-decoration: none;
  background: transparent; }

.nav.child_menu {
  display: none; }

.nav.child_menu li:hover,
.nav.child_menu li.active {
  background-color: rgba(255, 255, 255, 0.06); }

.nav.child_menu li {
  padding-left: 36px; }

.nav-md ul.nav.child_menu li:before {
  background: #425668;
  bottom: auto;
  content: "";
  height: 8px;
  left: 23px;
  margin-top: 15px;
  position: absolute;
  right: auto;
  width: 8px;
  z-index: 1;
  border-radius: 50%; }

.nav-md ul.nav.child_menu li:after {
  border-left: 1px solid #425668;
  bottom: 0;
  content: "";
  left: 27px;
  position: absolute;
  top: 0; }

.nav-md ul.nav.child_menu li:last-child::after {
  bottom: 50%; }

.nav.side-menu > li > a, .nav.child_menu > li > a {
  color: #E7E7E7;
  font-weight: 500; }

.nav.child_menu li li:hover,
.nav.child_menu li li.active {
  background: none; }

.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
  color: #fff; }

.nav > li > a {
  position: relative;
  display: block;
  padding: 13px 15px 12px; }

.nav.side-menu > li.current-page, .nav.side-menu > li.active {
  border-right: 5px solid #1ABB9C; }

.nav li.current-page {
  background: rgba(255, 255, 255, 0.05); }

.nav li li li.current-page {
  background: none; }

.nav li li.current-page a {
  color: #fff; }

.nav.side-menu > li.active > a {
  text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#334556), to(#2C4257)), #2A3F54;
  background: linear-gradient(#334556, #2C4257), #2A3F54;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0; }

.navbar-nav > li > a {
  font-weight: 500;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 32px; }

.site_title {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 22px;
  width: 100%;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 59px;
  display: block;
  height: 55px;
  margin: 0;
  padding-left: 10px; }

.site_title:hover, .site_title:focus {
  text-decoration: none; }

.nav.navbar-nav > li > a {
  color: #515356 !important; }

.nav > li > a:hover, .nav > li > a:focus {
  background-color: transparent; }

.toggle {
  float: left;
  margin: 0;
  width: 70px; }

.toggle a {
  padding: 15px 15px 0;
  margin: 0;
  cursor: pointer; }

.toggle a i {
  font-size: 26px; }

.nav.child_menu > li > a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  padding: 9px; }

.panel_toolbox {
  float: right;
  min-width: 70px; }

.panel_toolbox > li {
  float: left;
  cursor: pointer; }

.panel_toolbox > li > a {
  padding: 5px;
  color: #C5C7CB;
  font-size: 14px; }

.panel_toolbox > li > a:hover {
  background: #F5F7FA; }

.main_menu_side {
  padding: 0; }

/* `flow-root` Y NO `block`, por lo mismo que `.right_col`: el unico hijo con contenido del pie
   FLOTA -es el `.float-end` con la palabra «Sertation»-, y un contenedor de bloque no lo contiene.

   HASTA EL 30 DE AGOSTO DE 2026 LO CONTENIA UN `<div class="clearfix">`, y ESE era el ultimo hueco
   que le sobraba a la pagina. Un `clearfix` de Bootstrap limpia el float con un `::after` que lleva
   `clear: both`, y ese pseudoelemento se coloca DEBAJO del float: el div, que en el HTML esta
   vacio, terminaba midiendo una linea entera. Medido servido: `clearfix alto=19.1`, y el pie
   aportaba 48 px al desplazamiento midiendo 39,1 de alto -10 de relleno + 19,1 del texto + 19,1 del
   clearfix = 48,2-. Con eso la pagina desplazaba 9 px de mas SIEMPRE, con contenido o sin el.

   NO SE VE POR NINGUN LADO: ningun elemento ni nodo de texto termina ahi abajo -comprobado
   recorriendo el DOM entero con un `Range`-, y las dos cajas dan el mismo `bottom`. Solo aparece
   preguntando por `scrollHeight`, o quitando el pie del documento y remidiendo, que es como se
   encontro.

   El `clearfix` se retiro del `_Layout` en el mismo cambio: con `flow-root` no hace falta, y
   dejarlo puesto devuelve los 9 px. */
footer {
  background: #fff;
  padding: 10px 20px;
  display: flow-root; }

.nav-sm footer {
  margin-left: 70px; }

.footer_fixed footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%; }

@media (min-width: 768px) {
  .footer_fixed footer {
    margin-left: 0; } }

@media (min-width: 768px) {
  .footer_fixed .nav-sm footer {
    margin-left: 0; } }

.tooltip {
  display: block !important; }

/* *********  custom accordion  **************************** */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#integration-list {
  width: 100%;
  margin: 0 auto;
  display: table; }

#integration-list ul {
  padding: 0;
  margin: 20px 0;
  color: #555; }

#integration-list ul > li {
  list-style: none;
  border-top: 1px solid #ddd;
  display: block;
  padding: 15px;
  overflow: hidden; }

#integration-list ul:last-child {
  border-bottom: 1px solid #ddd; }

#integration-list ul > li:hover {
  background: #efefef; }

.expand {
  display: block;
  text-decoration: none;
  color: #555;
  cursor: pointer; }

.expand h2 {
  width: 85%;
  float: left; }

h2 {
  font-size: 18px;
  font-weight: 400; }

#left, #right {
  display: table; }

#sup {
  display: table-cell;
  vertical-align: middle;
  width: 80%; }

.detail a {
  text-decoration: none;
  color: #C0392B;
  border: 1px solid #C0392B;
  padding: 6px 10px 5px;
  font-size: 13px;
  margin-right: 7px; }

.detail {
  margin: 10px 0 10px 0px;
  display: none;
  line-height: 22px;
  height: 150px; }

.detail span {
  margin: 0; }

.x_panel {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 17px;
  display: inline-block;
  background: #fff;
  border: 1px solid #E6E9ED;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  opacity: 1;
  -webkit-transition: all .2s ease;
  transition: all .2s ease; }

/* LA FRANJA DE ARRIBA DEL PANEL, Y SE QUEDA FIJA AL DESPLAZAR. Es la segunda de las tres capas
   -ver `--tope-*`-, y el pegado va ACA y no en `encabezado-de-listado` a proposito.

   POR QUE EN `.x_title`: es la franja de arriba del panel en TODAS las pantallas, y hay exactamente
   UNA POR VISTA -medido: 78 en el arbol, ninguna vista con dos-, asi que no hay riesgo de que dos
   pegajosas se solapen. De esas 78, 68 llevan ademas `encabezado-de-listado` y 10 usan el molde
   viejo -el `<h2><small>` con los enlaces adentro-: «Configuracion de estacion», «Plantilla de
   informes», las pantallas de catalogos y las de cuenta. Ponerlo en la clase nueva dejaba esas 10
   sin fijar, que es justo lo que Amilcar reporto el 30 de agosto de 2026 mirando la primera. Aca lo
   heredan las 78, y tambien la pantalla que se escriba mañana sin acordarse de ninguna clase.

   `flow-root` POR EL MISMO MOTIVO QUE EL PIE: en las 10 del molde viejo el `<h2>` FLOTA, y un
   contenedor de bloque no lo contiene. Hasta ahora lo recogia un `<div class="clearfix">` escrito a
   mano en cada una, y ese div -vacio en el HTML- MIDE UNA LINEA ENTERA, porque su `::after` lleva
   `clear: both` y se coloca debajo del float. Con `flow-root` sobra, y los diez se retiraron: la
   franja de esas pantallas adelgazo 19 px. Las 68 restantes son flex y ya se contenian solas -la
   regla de `encabezado-de-listado` gana por venir despues en esta hoja-.

   EL FONDO OPACO Y LA SOMBRA NO SON COSMETICOS. Pegada, la franja tiene contenido pasandole por
   debajo: sin `background` se leen las dos cosas encima. Y el `box-shadow` no es una sombra sino el
   relleno de los 10 px de `margin-bottom` de aca abajo — un margen esta AFUERA del elemento y el
   `background` no lo pinta, asi que sin el se ve pasar el contenido por esa franja transparente.
   Convertir el margen en padding tambien la taparia, pero correria el borde inferior 10 px hacia
   abajo en las 78 pantallas.

   EL CONTENEDOR ES EL `.x_panel`, que abarca la pantalla entera: un `sticky` solo se desplaza dentro
   de su bloque contenedor, asi que la franja acompaña hasta el ultimo renglon y ahi se suelta. */
.x_title {
  position: sticky;
  top: var(--tope-de-la-franja);
  z-index: 20;
  display: flow-root;
  border-bottom: 2px solid #E6E9ED;
  padding: 1px 5px 6px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 10px 0 0 #fff; }

.x_title .filter {
  width: 40%;
  float: right; }

.x_title h2 {
  margin: 5px 0 6px;
  float: left;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

.x_title h2 small {
  margin-left: 10px; }

.x_title span {
  color: #BDBDBD; }

.x_content {
  padding: 0 3px 6px;
  position: relative;
  width: 100%;
  float: left;
  clear: both;
  margin-top: 5px; }

.x_content h4 {
  font-size: 16px;
  font-weight: 500; }

legend {
  padding-bottom: 7px; }

/* *********  /custom accordion  **************************** */
/* *********  dashboard widget  **************************** */
td span {
  line-height: 28px; }

/* *********  tables styling  ******************************* */
.dataTables_paginate a {
  padding: 6px 9px !important;
  background: #ddd !important;
  border-color: #ddd !important; }

.dataTables_paginate a {
  background: #ff0000; }

.dataTables_wrapper {
  position: relative;
  clear: both;
  zoom: 1; }

.dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 30px;
  margin-left: -125px;
  margin-top: -15px;
  padding: 14px 0 2px 0;
  border: 1px solid #ddd;
  text-align: center;
  color: #999;
  font-size: 14px;
  background-color: white; }

.dataTables_info {
  width: 60%;
  float: left; }

.dataTables_paginate {
  float: right;
  text-align: right; }

table.dataTable th.focus,
table.dataTable td.focus {
  outline: 2px solid #1ABB9C !important;
  outline-offset: -1px; }

table.display {
  margin: 0 auto;
  clear: both;
  width: 100%; }

table.display thead th {
  padding: 8px 18px 8px 10px;
  border-bottom: 1px solid black;
  font-weight: bold;
  cursor: pointer; }

table.display tfoot th {
  padding: 3px 18px 3px 10px;
  border-top: 1px solid black;
  font-weight: bold; }

table.display td {
  padding: 3px 10px; }

table.display td.center {
  text-align: center; }

table.display thead th:active, table.display thead td:active {
  outline: none; }

.dataTables_scroll {
  clear: both; }

.dataTables_scrollBody {
  *margin-top: -1px;
  -webkit-overflow-scrolling: touch; }

.top .dataTables_info {
  float: none; }

.clear {
  clear: both; }

.dataTables_empty {
  text-align: center; }

tfoot input {
  margin: 0.5em 0;
  width: 100%;
  color: #444; }

td.group {
  background-color: #d1cfd0;
  border-bottom: 2px solid #A19B9E;
  border-top: 2px solid #A19B9E; }

td.details {
  background-color: #d1cfd0;
  border: 2px solid #A19B9E; }

/* *********  /tables styling  ****************************** */
/* *********  /dashboard widget  **************************** */
/* *********  widgets  *************************************** */
.dropdown-menu {
  border: medium none;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: none;
  float: left;
  font-size: 12px;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 9998;
  border: 1px solid #D9DEE4;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.dropdown-menu > li > a {
  color: #5A738E; }

.navbar-nav .open .dropdown-menu {
  position: absolute;
  background: #fff;
  margin-top: 0;
  border: 1px solid #D9DEE4;
  -webkit-box-shadow: none;
  right: 0;
  left: auto;
  width: 220px; }

span.right {
  float: right;
  font-size: 14px !important; }

.sidebar-footer {
  bottom: 0px;
  clear: both;
  display: block;
  padding: 5px 0 0 0;
  position: fixed;
  width: 230px;
  background: #2A3F54; }

.sidebar-footer a {
  padding: 7px 0 3px;
  text-align: center;
  width: 25%;
  font-size: 17px;
  display: block;
  float: left;
  background: #172D44; }

.sidebar-footer a:hover {
  background: #425567; }

/* «Cerrar sesión» es un <button type="submit"> y no un <a>, porque sale por POST. Es lo único que
   queda en el pie del menú lateral —los otros tres botones del tema no hacían nada y se borraron—,
   así que ocupa el ancho entero en vez del 25 % que se repartían los cuatro.

   Anula además tres cosas que el navegador y este mismo archivo le ponen a todo <button>: el borde,
   la letra propia y el `margin: 5px` de la regla general de botones. */
.sidebar-footer button.sf-boton {
  padding: 7px 0 3px;
  text-align: center;
  width: 100%;
  font-size: 17px;
  display: block;
  background: #172D44;
  border: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  line-height: inherit; }

.sidebar-footer button.sf-boton:hover {
  background: #425567; }

/* Un <button> que tiene que leerse como un enlace: lo usa «Cerrar sesión» de la barra de arriba,
   que envía el formulario de salida por POST y no puede ser un <a>. Hereda color y letra de lo que
   lo rodea, así que sirve en cualquier barra sin repintarlo. */
.boton-como-enlace {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none; }

.boton-como-enlace:hover,
.boton-como-enlace:focus-visible {
  text-decoration: underline; }

/** top tiles  */
@media (min-width: 992px) {
  footer {
    margin-left: 230px; } }

/** /top tiles **/
/* *********  /widgets  *************************************** */
/* *********  iconts-display  **************************** */
.main_menu .fa {
  width: 26px;
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* *********  /iconts-display  **************************** */
/** inbox **/
button,
.buttons,
.btn,
.modal-footer .btn + .btn {
  margin-bottom: 5px;
  margin-right: 5px; }

.btn-group .btn {
  margin-bottom: 0;
  margin-right: 0; }

.attachment {
  margin-top: 30px; }

.attachment ul {
  width: 100%;
  list-style: none;
  padding-left: 0;
  display: inline-block;
  margin-bottom: 30px; }

.attachment ul li {
  float: left;
  width: 150px;
  margin-right: 10px;
  margin-bottom: 10px; }

.attachment ul li img {
  height: 150px;
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 10px; }

.attachment ul li span {
  float: right; }

/** /inbox **/
/* *********  form design  **************************** */
span.section {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5; }

/* `.form-select` va al lado de `.form-control` en estas dos reglas, y no es un agregado suelto: es
   la condición para que los desplegables se puedan traducir a la clase que les corresponde.

   Bootstrap 5 partió en dos lo que la 3 llamaba `form-control`: los campos de texto siguen ahí y los
   `<select>` pasaron a `form-select`, que es la que les dibuja la flecha. Pero el tema le da a
   `form-control` esquinas rectas y un foco propio, así que un `<select>` traducido a secas quedaría
   redondeado y con el foco azul de fábrica, distinto del campo de texto que tiene al lado. Con estas
   dos líneas los dos se ven igual, que es lo que se venía viendo hasta ahora. */
/* EL BORDE DE LOS CAMPOS, que hasta el 12 de agosto de 2026 casi no se veía. Lo pidió Amílcar
   comparando dos formularios: «el borde está demasiado tenue, casi no se ve».

   Medido sobre las capturas: el de fábrica es `#DEE2E6` y da **1,3:1** contra el blanco de adentro.
   La pauta de accesibilidad para el borde de un control de formulario pide **3:1** —es lo que hace
   que se distinga dónde empieza y termina la caja—, así que no llegaba ni a la mitad. Peor todavía,
   el de foco (`#CCD0D7`, 1,55:1) era casi igual al de reposo: enfocar un campo no se notaba.

   Los dos colores nuevos YA ESTÁN EN LA PALETA del tema y no se inventó ninguno: `#73879C` es el
   color del texto del cuerpo (3,7:1) y `#5A738E` el de los enlaces (4,9:1). Y ahora el foco es más
   marcado que el reposo, que es lo que corresponde y antes estaba casi al revés.

   ALCANCE: esto vale para TODO campo del sistema, no solo para los dos formularios que los
   compararon. Es una sola regla y acotarla a dos pantallas dejaría el resto con cajas que no se ven,
   que es el defecto que se vino a corregir. */
.form-control,
.form-select {
  border-radius: 0;
  width: 100%;
  border-color: #73879C; }

.form-control:focus,
.form-select:focus {
  border-color: #5A738E;
  -webkit-box-shadow: none !important;
          box-shadow: none !important; }

legend {
  font-size: 18px;
  color: inherit; }

/* El espaciado entre un campo de formulario y el siguiente, en las 50 pantallas que los
   tienen. Se llamaba `form-group`, que es palabra de Bootstrap 3 --la 5 no la declara--, y
   el 17 de agosto de 2026 se tradujo a este nombre en los 228 lugares donde estaba escrita.

   LOS 10 px NO SON HERENCIA DE LA LIBRERIA: Bootstrap 3 daba 15 y este tema los bajo a 10.
   Es una decision propia, y por eso el paso la conservo tal cual en vez de adoptar el `mb-3`
   de la 5, que da 16 y habria estirado los 50 formularios --78 px el mas largo--. Medido
   fotografiando las dos variantes; las capturas de esta salieron identicas byte a byte.

   Al ser una sola regla, el dia que se quiera mas aire son los 50 formularios de una vez y
   en un solo numero. */
.campo-de-formulario {
  margin-bottom: 10px; }


.validate {
  margin-top: 10px; }

.item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.item input, .item textarea {
  -webkit-transition: 0.42s;
  transition: 0.42s; }

/* alerts (when validation fails) */
.item .alert {
  float: left;
  margin: 0 0 0 20px;
  padding: 3px 10px;
  color: #FFF;
  border-radius: 3px 4px 4px 3px;
  background-color: #CE5454;
  max-width: 170px;
  white-space: pre;
  position: relative;
  left: -15px;
  opacity: 0;
  z-index: 1;
  -webkit-transition: 0.15s ease-out;
  transition: 0.15s ease-out; }

.item .alert::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-color: transparent #CE5454 transparent transparent;
  border-style: solid;
  border-width: 11px 7px;
  position: absolute;
  left: -13px;
  top: 1px; }

/* ***** buttons ********/
.btn {
  border-radius: 3px; }

a.btn-success, a.btn-primary, a.btn-danger {
  color: #fff; }

.btn-success {
  background: #26B99A;
  border: 1px solid #169F85; }

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
  background: #169F85; }

/* ***** /buttons *******/
/* *********  /form design  **************************** */
/* *********  form textarea  **************************** */
textarea {
  padding: 10px;
  vertical-align: top;
  width: 200px; }

textarea:focus {
  outline-style: solid;
  outline-width: 2px; }

/* *********  /form textarea  **************************** */
/* *********  form tags input  **************************** */
span.tag {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  display: block;
  float: left;
  padding: 5px 9px;
  text-decoration: none;
  background: #1ABB9C;
  color: #F1F6F7;
  margin-right: 5px;
  font-weight: 500;
  margin-bottom: 5px;
  font-family: helvetica; }

span.tag a {
  color: #F1F6F7 !important; }

/* *********  /form tags input  **************************** */
/** Tabs **/
a:focus {
  outline: none; }

/** /Tabs **/
/* *********  timeline  **************************** */
.tag {
  line-height: 1;
  background: #1ABB9C;
  color: #fff !important; }

.tag:after {
  content: " ";
  height: 30px;
  width: 0;
  position: absolute;
  left: 100%;
  top: 0;
  margin: 0;
  pointer-events: none;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 11px solid #1ABB9C; }

/* *********  /timeline  **************************** */
/* *********  widgets  **************************** */
.widget {
  min-width: 250px;
  max-width: 310px; }

/* *********  /widgets  **************************** */
ul.messages {
  padding: 0;
  list-style: none; }

ul.messages li {
  border-bottom: 1px dotted #e6e6e6;
  padding: 8px 0; }

/* *********  media gallery  **************************** */
.caption {
  padding: 9px 5px;
  background: #F7F7F7; }

.caption p {
  margin-bottom: 5px; }

.view {
  overflow: hidden;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
          box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default; }

.view .content {
  position: absolute;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0; }

.view img {
  display: block;
  position: relative; }

.view p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 10px 20px 20px;
  text-align: center; }

.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 1px #000;
          box-shadow: 0 0 1px #000; }

/* *********  /media gallery  **************************** */
/** login **/
.animate {
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  -o-animation-duration: 0.5s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  -ms-animation-duration: 0.5s;
  -ms-animation-timing-function: ease;
  -ms-animation-fill-mode: both;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: both; }

/** /login **/
/** signup **/
.left {
  float: left; }

.clearfix:after, form:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

#username {
  background-position: 10px 10px !important; }

#password {
  background-position: 10px -53px !important; }

.button {
  background: #f7f9fa;
  background: -webkit-gradient(linear, left top, left bottom, from(#f7f9fa), to(#f0f0f0));
  background: linear-gradient(to bottom, #f7f9fa 0%, #f0f0f0 100%);
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0)";
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  border-radius: 0 0 5px 5px;
  border-top: 1px solid #CFD5D9;
  padding: 15px 0; }

#content form .submit {
  float: left;
  margin-left: 38px; }

/* Aca vivian .button a y .button a:hover, retiradas el 14 de agosto de 2026. Eran la segunda
   dependencia externa del tema: pintaban de fondo un PNG de cssdeck.com, por http:// y no https://,
   o sea contenido mixto que el navegador bloquea sobre un sitio seguro. NINGUNA vista usa la clase
   `button` --se barrieron las 196--, asi que no dibujaban nada en ninguna pantalla. Si alguna vez
   hace falta un boton con imagen de fondo, la imagen va en Content\images\ y no en un sitio ajeno. */

header {
  width: 100%; }

/** signup **/
/** breadcrumb **/
/* El tema nunca tuvo una regla propia para .breadcrumb: el aspecto se lo daba Bootstrap entero.
   La 4.3.1 traía fondo gris, relleno y esquinas redondeadas; la 5 dejó esos valores vacíos
   (--bs-breadcrumb-bg y --bs-breadcrumb-border-radius sin valor, y el relleno en 0), así que al
   subir la librería las migajas de pan quedaron como texto suelto. Se reponen acá, que es donde
   corresponde ahora que Bootstrap ya no las pone.

   No se repone el recuadro gris de la 4: las migajas ya no van sobre el fondo blanco del cuerpo
   sino dentro de la barra superior, que es gris (#EDEDED), y el recuadro no se distinguiría. */

/* LA BARRA SUPERIOR, ALINEADA AL CENTRO.
   Los tres elementos —hamburguesa, migajas y enlaces de sesión— se ubicaban cada uno por su
   cuenta y no coincidían: el hamburguesa se centraba con `padding: 15px 15px 0`, las migajas con
   un `line-height`, y los enlaces con `margin: 13px`. Encima los enlaces caían a un segundo
   renglón, porque en Bootstrap 5 `.navbar-nav` es un contenedor flex EN COLUMNA y anula el
   `float: right` que el tema le ponía al <ul> —un hijo de flex no flota—.

   Con la barra en flex y `align-items: center` la alineación deja de depender de que esos tres
   números casen entre sí: la calcula el navegador. Por el mismo motivo los `float` de los hijos
   dejan de tener efecto, así que se retiran en vez de quedar como ruido. */
/* LA BARRA DE ARRIBA SE QUEDA FIJA AL DESPLAZAR, en todas las pantallas. Pedido de Amilcar del 30 de
   agosto de 2026: lo pidio para «control de informes», pero el hamburguesa, las migajas y «Cerrar
   sesion» son del `_Layout` y valen lo mismo en las 221 vistas, asi que la regla es una sola.

   EL PEGAJOSO VA EN `.top_nav` Y NO EN `.nav_menu`, y esto costo una medida entender: un elemento
   `sticky` solo se puede desplazar DENTRO DE SU CONTENEDOR, asi que ponerselo a la barra la deja
   pegada a un contenedor que mide lo mismo que ella y se va con el desplazamiento igual. Medido
   servido antes de corregirlo: con el `sticky` en `.nav_menu`, tras bajar 1.200 px su `top` era
   -1.200, o sea que no se habia pegado a nada.

   Y EL `float: none` DE ABAJO ES PARTE DE LA MISMA REGLA, no un arreglo suelto: el tema le pone
   `float: left` a `.nav_menu`, y un contenedor cuyo unico hijo flota COLAPSA A CERO. Medido:
   `.top_nav` tenia `alto=0`. Un contenedor de cero alto tampoco le da rango a nada.

   ES `sticky` Y NO `fixed` a proposito: el pegajoso RESERVA SU LUGAR en el flujo, asi que ninguna
   pantalla necesita compensar con un margen de arriba. Con `fixed` habria que empujar 56 px cada
   una, y la que se olvidara quedaria con su primera linea debajo de la barra.

   EL FONDO ES EL DE LA PAGINA, `#F7F7F7`, y hace falta: `.nav_menu` lleva `margin-bottom: 10px`, y
   sin fondo en el contenedor esa franja seria transparente y el contenido se veria pasar por ahi.

   `min-height` y no `height`: los 56 px son el piso, y de ahi salen los dos topes de las otras dos
   capas -ver `--tope-*` justo abajo-. Si algun dia esta barra cambia de alto, esos dos numeros se
   remiden. */
.top_nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #F7F7F7; }

/* LAS TRES CAPAS QUE QUEDAN FIJAS AL DESPLAZAR, y las alturas de las que cuelgan. Pedido de Amilcar
   del 30 de agosto de 2026, primero para «control de informes» y ese mismo dia para todas las
   pantallas que tienen la misma franja. Lo que se queda arriba, en este orden:

     0 px    la barra del `_Layout`: el hamburguesa, las migajas y «Cerrar sesion»  -> `.top_nav`
     56 px   la franja de «Volver», «Agregar registro» y «Acciones»  -> `.encabezado-de-listado`
     111 px  los titulos de columna, que dicen que es cada celda  -> `table.dataTable thead th`

   Lo que NO se queda y se va al desplazar: las tarjetas de cifras, el texto de la pantalla, el
   buscador y el «Mostrar N registros». El criterio es de Amilcar: arriba se queda lo que sirve para
   SALIR, para ACTUAR o para SABER QUE SE ESTA MIRANDO, y una cifra del listado entero se lee una
   vez al entrar.

   LOS 111 SON UNA SUMA DE MEDIDAS SERVIDAS, no un numero elegido:

     56 px  el `.top_nav`, que es el `min-height` de la barra de arriba
     47 px  la franja de acciones: el `.x_title` con su padding y su borde de 2 px
     10 px  lo que la franja pinta POR DEBAJO con su `box-shadow`, para tapar su `margin-bottom`
     ------
    113 px  donde termina lo que la franja dibuja
     -2 px  de solape deliberado

   EL SOLAPE ES A PROPOSITO: el encabezado se mete DEBAJO de la franja, que tiene mas `z-index` y lo
   tapa. Con la suma exacta queda un hilo de 1 px por el que se ve pasar el contenido, y un hueco se
   ve mientras que un solape no. Ademas el redondeo del navegador puede correr esa altura un pixel
   para cualquier lado, y asi la pantalla aguanta las dos.

   Y LOS 10 PX DE LA SOMBRA HAY QUE CONTARLOS, que es lo que este numero tuvo mal en el primer
   intento: valia 100 -la suma sin la sombra, menos el solape-, la franja pintaba hasta 113 y los
   titulos de columna salian CORTADOS POR ARRIBA, comidos 13 px. Se vio en la foto servida, no
   midiendo: los numeros de `top` eran los que la regla pedia.

   Si alguna de las dos barras cambia de alto, estos numeros se remiden y no se deducen: el sintoma
   de tenerlos mal es un hilo de contenido asomando entre dos capas, o un encabezado recortado, y
   ninguno de los dos da error.

   EL TERCERO ES OTRA COSA y no tiene que ver con lo pegajoso: es lo que ocupan la barra de arriba
   y el pie JUNTOS, y lo usa `.right_col` para saber cuanto le toca. Medido servido el 30 de agosto
   de 2026: 66 px la barra -56 de alto mas los 10 de `margin-bottom` de `.nav_menu`- y 39 el pie. */
:root {
  --tope-de-la-franja: 56px;
  --tope-del-encabezado: 111px;
  --alto-fuera-del-panel: 105px; }

.nav_menu {
  float: none;
  display: flex;
  align-items: center;
  min-height: 56px; }

.nav_menu .nav.toggle {
  flex: 0 0 auto; }

/* Sin el padding superior de 15px, que era el centrado a mano. */
.nav_menu .nav.toggle a {
  display: block;
  padding: 0 15px; }

/* Se queda con el espacio sobrante. `min-width: 0` es lo que permite que un hijo de flex se
   encoja por debajo de su contenido, y sin eso el recorte con puntos suspensivos no ocurre. */
.nav_menu .migajas {
  flex: 1 1 auto;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 0 15px; }

/* `margin-left: auto` lo empuja contra el borde derecho, que es lo que antes hacía el float.
   `flex-direction: row` deshace la columna que la 5 le pone a .navbar-nav. */
.nav_menu .nav.navbar-nav {
  flex: 0 0 auto;
  flex-direction: row;
  margin-left: auto; }

.nav_menu .navbar-right {
  display: flex;
  align-items: center;
  float: none;
  margin: 0;
  padding: 0; }

.nav_menu .navbar-right li,
.nav_menu .navbar-right form.navbar-right {
  float: none;
  margin: 0;
  list-style: none; }

/* 18px y no los 13px del cuerpo: las migajas iban envueltas en un <h4> (≈24px) mientras vivían
   dentro de la vista, y al mudarlas a la barra ese <h4> se sacó porque no corresponde acá. Con
   13px quedaban chicas al lado del hamburguesa, que es de 26px. Si hay que moverlo, es este
   número solo. El centrado vertical ya no depende del line-height: lo hace el flex de arriba. */
.nav_menu .migajas .breadcrumb {
  --bs-breadcrumb-margin-bottom: 0;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/* En bloque y no en flex —que es como viene de fábrica en la 5— para que un camino largo se
   corte con puntos suspensivos en vez de empujar los enlaces de sesión fuera de la barra. */
.nav_menu .migajas .breadcrumb-item {
  display: inline;
  color: #5A738E; }

/* Bootstrap 5 le pone `float: left` al separador «/», que en el flex de fábrica queda bien pero
   acá no: con el .breadcrumb en bloque los separadores flotan todos juntos al principio y sale
   «/ / / Empresa Isla 1 Surtidor 1 Mangueras» en vez de «Empresa / Isla 1 / Surtidor 1 /
   Mangueras». Al quitarles el float vuelven a ser texto en línea y caen donde corresponde,
   entre tramo y tramo. Va de la mano del `display: inline` de arriba: si algún día se vuelve al
   flex de fábrica, esta regla sobra. */
.nav_menu .migajas .breadcrumb-item + .breadcrumb-item::before {
  float: none; }

.nav_menu .migajas .breadcrumb-item.active {
  color: #34495E;
  font-weight: 500; }

/** /breadcrumb **/
/** enlaces en el texto **/
/* Un enlace dentro de texto se subraya, en todo el sistema. Lo pidió Amílcar el 12 de agosto de 2026.

   El tema pinta todo enlace `#5A738E` y sin subrayado (la regla `a` de más arriba en este archivo), y
   ese gris azulado es casi el mismo tono que el texto: metido en un párrafo, el enlace no se distingue
   de lo que lo rodea. Se veía en el inicio de sesión, donde «¿Olvidó su contraseña?» se leía igual que
   la etiqueta «¿Recordar cuenta?» de arriba, y en «Contacto», donde los dos correos parecían texto
   muerto. Primero se corrigió solo en las pantallas de la cuenta; esto lo extiende al resto.

   La regla nombra el CONTEXTO y no las pantallas —un párrafo, una dirección, el dato de una tarjeta—,
   así que alcanza sola a cualquier pantalla nueva sin que haya que acordarse de sumarla. Esa es la
   diferencia con el arreglo anterior, que nombraba `cta-nota` y `cta-pasos` y por eso dejó afuera el
   «¿Olvidó su contraseña?» de la ventana emergente de ingreso, que es el enlace más visto del sistema.

   Lo que NO se toca, y es deliberado: los enlaces de chrome —el menú lateral, los `btn-link`, los
   `dropdown-item`, los `<th>` ordenables de los listados, los iconos de acción de fila, las migajas—
   no tienen el defecto, porque el lugar donde viven ya los anuncia como accionables. Se midieron los
   410 enlaces de las vistas: ninguno de esos vive dentro de un `<p>`, así que el selector no los
   alcanza. Los dos botones que sí están dentro de un párrafo —`banda-acciones` de la portada y
   `tarjeta-acciones` de «Acerca de»— los protege `.btn` de Bootstrap, que gana por especificidad
   (0-1-0 contra 0-0-2).

   El `:hover` va escrito y no es repetición: el tema declara `a:hover, a:focus { text-decoration:
   none }`, que con 0-1-1 le gana a un selector de dos elementos. Sin estas líneas el subrayado
   desaparece justo al apuntar el enlace, que es el peor momento posible. */
p a,
address a,
dd a,
blockquote a,
.tarjeta-dato a,
.cta-pasos a,
p a:hover, p a:focus,
address a:hover, address a:focus,
dd a:hover, dd a:focus,
blockquote a:hover, blockquote a:focus,
.tarjeta-dato a:hover, .tarjeta-dato a:focus,
.cta-pasos a:hover, .cta-pasos a:focus {
  text-decoration: underline; }

/** /enlaces en el texto **/
/** formulario de catalogo en ventana emergente **/
/* La ventana emergente que abre el alta y la edición de un catálogo, Views/Shared/_FormularioEnModal.
   Es transversal como la sección de arriba: la comparten los catálogos que se vayan enganchando, y
   por eso no vive en el juego de ninguna pantalla.

   Son dos reglas. Todo lo demás —el recuadro, el encabezado, los campos, los botones— sale de
   Bootstrap y del tema, igual que en el modal de ingreso: el cuerpo lo dibuja la misma vista
   `CreateOrEdit` de siempre, así que ya trae las clases del formulario. */

/* El aviso de que el guardado no se pudo hacer. Vacío no ocupa lugar, igual que `.ing-error` y
   `.cta-hecho`: sin esto el modal abre con un hueco arriba de los campos que no significa nada.

   `.cnt-error` es el mismo aviso en la ventana de solo lectura (`_ContenidoEnModal`), y va nombrado
   acá en vez de repetir la regla: es el mismo mensaje, en el mismo lugar y del mismo color; lo
   único que cambia es qué salió mal. Si algún día se separan, se separan las dos. */
.frm-error,
.cnt-error {
  color: #C9302C;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 12px; }

.frm-error:empty,
.cnt-error:empty {
  display: none; }

/* LA REJILLA DEL FORMULARIO, QUE ADENTRO DEL MODAL HAY QUE REHACER. Se vio recién al fotografiarlo:
   leyendo la vista parecía correcta.

   Las 26 vistas `CreateOrEdit` están escritas con `form-horizontal` y `col-md-2`/`col-md-10`, el
   molde de dos columnas de Bootstrap 3. La 5 eliminó `form-horizontal`, y el tema no lo repone, así
   que no hace nada —el caso de siempre: no rompe, simplemente no se aplica—. En la pantalla ancha eso
   pasa desapercibido porque las columnas sueltas igual entran; en el ancho de un modal se
   descompone, y las etiquetas de los primeros campos quedan a la izquierda y las de los últimos a la
   derecha, todas apretadas contra su campo.

   Acá se apilan etiqueta sobre campo, que es lo que hacen las otras siete ventanas del sistema y lo
   que corresponde a este ancho. Va acotado a `#frm-modal` a propósito: la pantalla completa —el
   camino sin JavaScript— tiene que seguir viéndose exactamente como siempre, porque no es parte de
   este pedido y toca 26 catálogos.

   ESTA REGLA SIGUE HACIENDO FALTA DESPUÉS DE TRADUCIR LAS VISTAS AL MOLDE DE LA 5, y conviene saber
   por qué: `col-md-2` reparte según el ancho de la VENTANA, no del contenedor, así que en un
   escritorio ancho la etiqueta se lleva el 16 % de los 470 px del modal —78 px— y queda igual de
   apretada. Lo que SÍ se fue con la traducción es el `!important` que llevaba `text-align`: estaba
   por el `style="text-align:right"` que traían escrito ocho campos —de `CProductos` y de
   `AspNetUsers`, no de las 26 como decía este comentario—, y ya no existe ninguno.

   Los dos márgenes en cero son por `row`, que el molde nuevo agrega: el tema le da a `.row` un
   margen de -10 px por lado y acá eso sacaba los campos 10 px fuera del cuerpo del modal, sin
   alinear con el título. Se vio comparando las capturas, no leyendo la hoja. */
#frm-modal .campo-de-formulario {
  display: block;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 14px;
  text-align: left; }

/* La etiqueta se apila sobre su campo y NADA MÁS: ni color, ni tamaño, ni peso propios.

   La primera versión de esta regla les puso el molde de los rótulos de las fichas de solo lectura
   —gris #5A6E82, 12,5px, seminegrita—, y estaba mal. En una ficha de consulta el rótulo apagado es
   correcto porque lo que importa es el dato; en un formulario la etiqueta ES la instrucción de qué
   escribir, y apagarla apaga lo que guía. Medido sobre la captura: esas etiquetas daban 5,3:1 de
   contraste contra el 15,4:1 de las del modal de ingreso, que no las toca. Lo notó Amílcar
   comparando las dos ventanas, el 12 de agosto de 2026.

   Sin las tres propiedades, la etiqueta hereda lo mismo que en el modal de ingreso, que es lo que se
   buscaba: las dos ventanas del sistema se leen igual. */
#frm-modal .campo-de-formulario > label {
  display: block;
  float: none;
  width: auto;
  max-width: none;
  margin-bottom: 4px;
  padding: 0;
  text-align: left; }

#frm-modal .campo-de-formulario > div {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  margin-left: 0;
  padding: 0; }

/* LA EXCEPCION: LA ETIQUETA A LA IZQUIERDA Y EL CAMPO A LA DERECHA. Pedido de Amilcar del 30 de
   agosto de 2026 sobre los cinco formularios de las partidas de un informe de turno, que abren en
   la ventana ANCHA -`data-modal-ancho="lg"`, 800px-: ahi la etiqueta al lado ya cabe, y leerla en
   la misma linea que su campo se sigue mas rapido que apilada.

   TIENE QUE GANARLE A LAS DOS REGLAS DE ARRIBA, que apilan la etiqueta en los 26 catalogos por
   decision del 12 de agosto de 2026 —en la ventana normal, de 470px, la etiqueta se llevaba 78px y
   quedaba apretada—. Aquella sigue siendo la correcta para los que abren angostos; esta es la
   excepcion de los que abren anchos, y por eso se escribe CON EL ID DELANTE: sin el pierde, y el
   sintoma seria que la clase no hace nada.

   EL ANCHO DE LA ETIQUETA NO SALE DE `col-md-*`, aunque el marcado las siga trayendo. Esas clases
   reparten segun el ancho de la VENTANA DEL NAVEGADOR y no del contenedor —es la misma trampa que
   explica la regla de arriba—, asi que dentro del modal `col-md-2` da 128px y «Volumen mecanico
   final» se parte en dos lineas. Aca es un porcentaje del cuerpo del modal, que es lo que de verdad
   se quiere repartir. Las `col-md-*` se quedan porque ESTA MISMA VISTA se sirve como pantalla
   completa —el camino de quien entra sin JavaScript— y alla son las que arman las dos columnas. */
/* LAS DOS PROPIEDADES QUE NO SE VEN LEYENDO, y sin las cuales esto queda igual que antes: el campo
   es ADEMAS un `.row`, que trae `flex-wrap: wrap`, y su control lo deja al 100% la regla de arriba.
   Con las dos cosas juntas la etiqueta se lleva su 34%, el control pide el 100% y no cabiendo los
   dos se va a la linea de abajo: `display: flex` puesto y el resultado identico al apilado. Se vio
   midiendo las posiciones -label en y=173, control en y=204-, no leyendo la hoja. */
#frm-modal .formulario-etiqueta-al-lado .campo-de-formulario {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 12px; }

#frm-modal .formulario-etiqueta-al-lado .campo-de-formulario > label {
  flex: 0 0 34%;
  max-width: 34%;
  margin-bottom: 0; }

#frm-modal .formulario-etiqueta-al-lado .campo-de-formulario > div {
  flex: 1 1 auto;
  width: auto;
  min-width: 0; }

/* La barra de botones tambien es `.campo-de-formulario` —viene asi de `_GuardarCancelar`— y no es un
   campo: partida en etiqueta y control quedaria con «Guardar» corrido a la derecha. En la ventana no
   se ve, porque el guion se lleva esos botones al pie, pero se veria en pantalla completa. */
#frm-modal .formulario-etiqueta-al-lado .campo-de-formulario.text-center {
  display: block; }

/* Un campo que existe SOLO para el gestor de contraseñas del navegador: el correo de quien está
   conectado, que acompaña a la contraseña nueva para que el navegador sepa a qué cuenta guardarla.

   NO se oculta con `display:none` ni con `hidden`, y esa es toda la razón de que esta regla exista:
   el autocompletado descarta los campos ocultos de esas dos formas, que es justo lo contrario de lo
   que se busca. Se lo saca de la vista corriéndolo fuera de la pantalla, que lo deja invisible y
   accesible para el navegador. El `tabindex="-1"` y el `aria-hidden` de la etiqueta lo sacan del
   camino del teclado y del lector de pantalla. */
.frm-solo-para-el-navegador {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0; }

/* La nota que explica una regla —la de la contraseña en Manage/ChangePassword— viene con margen
   arriba y ninguno abajo, que en la pantalla completa está bien porque la sigue un campo con
   su propio espacio. Acá los campos van apilados y pegados, así que sin esto la nota queda contra la
   etiqueta del primer campo y se lee como si fuera parte de ella. Se vio fotografiando. */
#frm-modal .cta-nota {
  margin-bottom: 14px; }

/** /formulario de catalogo en ventana emergente **/
/** paginación de los listados **/
/* Bootstrap 4 no le fijaba font-size a .page-link, así que heredaba los 13px que el tema le pone
   al cuerpo (body, más arriba en este archivo). La 5 lo fija explícitamente
   —.pagination declara --bs-pagination-font-size: 1rem y .page-link lo consume—, o sea 16px, y
   deja de heredar. Resultado: los botones de paginación de los 69 listados quedaron más grandes
   que el «Mostrando X de Y registros» que tienen al lado, que sigue en 13px porque .dataTables_info
   sí hereda del cuerpo. La 5 además bajó el relleno vertical de .5rem a .375rem.

   Se reponen los dos valores de la 4 por las variables de la 5, sin pisar la regla. No es un
   ajuste estético: es volver a atar la paginación al tamaño del cuerpo, que es de donde sale el
   texto con el que tiene que guardar proporción. */
.pagination {
  --bs-pagination-font-size: 13px;
  --bs-pagination-padding-y: 0.5rem; }

/* «Anterior» y «Siguiente» solo cuando llevan a algún lado. DataTables les pone la clase
   `disabled` al botón que no aplica —«Anterior» en la primera página, «Siguiente» en la última,
   y los dos cuando hay una sola página—, pero los deja a la vista en gris. Acá se ocultan.
   Se apunta a `.dataTables_paginate` y no a `.pagination` a secas para no afectar ninguna otra
   paginación que se agregue después con otro criterio. */
.dataTables_paginate .page-item.disabled {
  display: none; }

/** /paginación de los listados **/
/** acciones de fila de los listados **/
/* Los iconos de editar, eliminar y ver detalle de cada fila. Salen de Views/Shared/_EditDeletePartial
   (43 vistas) y _DetailsPartial (42), mas doce vistas que los escriben a mano con exactamente el
   mismo marcado.

   Eran `glyphicon` con el color en un `style` en linea -verde, rojo y azul de fabrica- y sin area
   de clic propia: el enlace medía lo que mide la letra, sobre una fila apretada. Ahora son un
   cuadrado de 26px con fondo al pasar el raton, o sea que hay donde acertar, y el color sale de la
   clase: cambiar el verde vuelve a ser un lugar y no 55 vistas.

   Los tres colores ya estaban en este archivo: el verde del tema `#1ABB9C` bajado a `#169F85` para
   que contraste sobre blanco, el rojo `#C9302C` de `.contador-alerta`, y el azul `#2A3F54` del menu
   lateral para el unico que no cambia nada y solo lleva a mirar.

   El `<i>` de adentro no lleva regla propia: hereda `font-size` y color del enlace. */
.accion-fila {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  /* EL MARGEN VA COMPLETO Y NO SOLO EL DERECHO, y la diferencia se mide. La regla del tema de la
     linea 829 —`button, .buttons, .btn { margin-bottom: 5px; margin-right: 5px }`— alcanza a TODO
     <button>, asi que con `margin-right: 3px` a secas el tacho se llevaba puesto un
     `margin-bottom: 5px` que el lapiz no tiene: la celda de acciones pasaba de 89 a 94 pixeles en
     cada fila. Declarado entero, la caja del <button> vuelve a ser la del <a>. */
  margin: 0 3px 0 0;
  vertical-align: middle;
  border-radius: 4px;
  color: #73879C;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  /* SIRVE EN <a> Y EN <button>, y las cuatro lineas de abajo son lo que lo hace posible. Eliminar
     dejo de ser un enlace: es un borrado, o sea que va por POST y adentro de un formulario, y un
     <button> llega con borde, fondo gris, letra propia y cursor de flecha que un <a> no tiene. Sin
     anular esas cuatro cosas el tacho se veria como un boton de sistema al lado del lapiz.

     Va en la clase base y no en un modificador aparte para que el marcado sea EL MISMO en los dos
     casos: la fila escribe `accion-fila accion-fila-eliminar` sea cual sea la etiqueta, y nadie
     tiene que acordarse de sumar una clase mas. Es la misma idea que `.boton-como-enlace`, que
     resuelve lo mismo para «Cerrar sesion». */
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-transition: background-color .12s ease, color .12s ease;
  transition: background-color .12s ease, color .12s ease; }

/* El formulario que envuelve una accion de fila o del pie de una ficha. Un <form> es de bloque, asi
   que sin esto el tacho caeria abajo del lapiz y rompria la hilera de iconos.

   Es la version compartida de lo que varias pantallas ya resolvieron cada una por su cuenta
   -`cdi-forma`, `ayd-forma`, `tym-forma`, `byc-forma` y compania, todas `display: inline`-. Esas se
   quedan como estan: son de pantallas propias y esta es de los dos parciales que usan 43 y 24
   vistas. */
.forma-en-linea {
  display: inline;
  margin: 0; }

/* Y CON `display: inline` NO ALCANZA, que es lo que dejo la celda de acciones en DOS RENGLONES.
   La linea 1127 -herencia del tema- le cuelga a TODO <form> un `:after` con `display: block`, y un
   bloque metido en contenido en linea PARTE LA LINEA sea cual sea el `white-space`: el `nowrap` de
   `.columna-acciones` no puede impedirlo, porque no es un salto de texto. O sea que el tacho
   arrastraba un renglon invisible atras y el ojo y el desplegable de «mas acciones» caian abajo.

   Medido sobre _EProveedores/IndexProveedores servida, con Chrome sin ventana: la celda pasa de
   62,6 a 36,6 px de alto y la columna de 84 a 146 px de ancho. Lo segundo es consecuencia de lo
   primero: DataTables mide la columna por su contenido, y partida en dos le calculaba 67 px -el
   renglon mas largo de los dos- en vez de los 129 que mide la hilera entera. El ancho salia del
   listado, no de una cuenta mal hecha.

   Se apaga aca y no en la regla de la linea 1127 porque aquel clearfix sigue sosteniendo a los
   formularios DE BLOQUE que llevan hijos flotantes, que es para lo que el tema lo escribio. Las
   nueve pantallas con clase propia -`byc-forma`, `tym-forma`, `ayd-forma` y compania- no lo
   necesitan: sus botoneras son contenedores `flex`, y ahi el `:after` se queda adentro del propio
   formulario sin empujar a nadie. */
.forma-en-linea:after {
  content: none; }

.accion-fila:hover,
.accion-fila:focus {
  text-decoration: none; }

/* El foco del teclado tiene que verse: sin texto adentro, el unico indicio de donde esta parado
   uno es el recuadro. `focus-visible` no lo dibuja cuando se llega con el raton. */
.accion-fila:focus-visible {
  outline: 2px solid #2A3F54;
  outline-offset: 1px; }

.accion-fila-editar {
  color: #169F85; }

.accion-fila-editar:hover,
.accion-fila-editar:focus {
  color: #0E7A66;
  background: #E4F3EF; }

.accion-fila-eliminar {
  color: #C9302C; }

.accion-fila-eliminar:hover,
.accion-fila-eliminar:focus {
  color: #A32622;
  background: #FBE9E8; }

.accion-fila-detalles {
  color: #2A3F54; }

.accion-fila-detalles:hover,
.accion-fila-detalles:focus {
  color: #1B2B3A;
  background: #E7ECF1; }

/* LOS PRODUCTOS DE UN MOVIMIENTO, que es el unico icono de fila que ademas lleva un numero.
   Views/OrdenesCompra/_RowToolBoxPartial.

   Es mas ancho que los otros tres porque el icono viene con la pastilla del contador al lado; el
   `width` de `.accion-fila` seria un corse. El resto -alto, redondeo, foco, transicion- lo hereda,
   asi que sigue viendose de la misma familia.

   El ambar es el mismo de `.contador-aviso` y del turno abierto del patio, y aca NO significa
   alarma: es solo el color de esta accion, la unica que no es editar, borrar ni mirar. */
.accion-fila-productos {
  width: auto;
  padding: 0 5px;
  gap: 4px;
  color: #B9770E; }

.accion-fila-productos:hover,
.accion-fila-productos:focus {
  color: #8A5A08;
  background: #FDF6EC; }

/* La pastilla hereda el tamano de la fila y no el suyo de fabrica, que a 0.75em sobre un icono de
   14px queda ilegible. */
.accion-fila-productos .badge {
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle; }

/* LA CELDA DE ACCIONES VA EN UNA SOLA LINEA. Sin esto, un renglon con los cuatro iconos parte en dos
   lineas apenas la columna se angosta -y con el enlace de productos saliendo como `dropdown-item`,
   que es `display: block`, partia SIEMPRE, hubiera o no lugar-. `columna-acciones` la repite
   DataTables en todas las celdas de esa columna desde el `columnDefs`, asi que alcanza con marcar el
   <th>. */
.columna-acciones {
  white-space: nowrap; }

/* El desplegable de «más acciones» de la fila (Views/Shared/_Layout_RowToolBoxPartial).
   Llevaba `panel_toolbox` a secas, que el tema define como `float: right; min-width: 70px`
   —pensado para el encabezado de un panel, no para una celda—: dentro de la fila se iba al
   extremo derecho y dejaba 70px de aire entre él y los iconos de editar y eliminar. Acá se lo
   devuelve al flujo, en línea con los demás y con la misma separación. */
.acciones-de-fila-menu {
  display: inline-block;
  vertical-align: middle;
  float: none;
  min-width: 0;
  margin: 0 6px 0 0;
  padding: 0; }

.acciones-de-fila-menu > li {
  display: inline-block;
  float: none;
  list-style: none; }

.acciones-de-fila-menu > li > a {
  padding: 0;
  background: none; }

.acciones-de-fila-menu > li > a > .fa {
  font-size: 17px; }

/* EL ICONO QUE ACOMPAÑA A UN ENLACE CON RÓTULO, que NO es lo mismo que `.accion-fila`: aquel es un
   botón-icono sin texto —el lápiz, el tacho, el ojo— y este es el símbolo que va delante de un
   enlace que sí se lee: «Conciliación», «Inventario», «Estado de cuenta». Aparece en la misma celda
   de acciones y adentro del desplegable de la fila.

   Llevaba `style="color:black"` escrito en seis vistas, nueve veces, y era el ÚNICO color de esa
   celda que no salía de la paleta: al lado conviven el verde, el rojo y el azul de `.accion-fila`.
   Toma el azul `#2A3F54` de `.accion-fila-detalles` y por el mismo motivo que aquel: imprimir no
   cambia nada, solo lleva a mirar.

   Va también sobre el control mismo cuando el icono ES el control —los dos de
   `BCargoBancarios/IndexMovimientos`—, y ahí la clase hace falta de verdad: un `<a>` sin ella toma
   el azul de enlace de Bootstrap, que es lo que el `style` en línea estaba tapando.

   SIRVE EN <a> Y EN <button>, igual que `.accion-fila`. Calificar dejó de ser un enlace —escribe en
   la base, así que va por POST adentro de un formulario— y un <button> llega con relleno, borde,
   fondo gris y cursor de flecha que un <a> no tiene: sin anular esas cuatro, los dos iconos de la
   columna «Conciliado» se verían como botones de sistema.

   PERO ACÁ NO VA `font-family: inherit`, Y ESA ES LA DIFERENCIA CON `.accion-fila`. En esta clase el
   icono ES el control, o sea que el mismo elemento lleva también `fa fa-check`, y `.fa` fija la
   fuente con la taquigrafía `font: normal normal normal 14px/1 FontAwesome`. Como custom.css se
   carga DESPUÉS de font-awesome.min.css, heredar la fuente ganaría por orden y el icono
   desaparecería —quedaría el « Si» suelto—, sin un solo error que lo delate. */
.accion-fila-icono {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #2A3F54; }

a.accion-fila-icono:hover,
a.accion-fila-icono:focus,
button.accion-fila-icono:hover,
button.accion-fila-icono:focus {
  color: #1B2B3A; }

/** /acciones de fila de los listados **/
/** alto de fila de los listados **/
/* Bootstrap 5 dejó el relleno de celda en .5rem —la 4 lo tenía en .75rem— y Amílcar pidió
   apretarlas un poco más. Se toca solo el vertical: el horizontal separa columnas y ahí no
   sobra nada. No va por variable porque la 5.3 compila este relleno fijo, sin `--bs-`, así que
   hay que repetir el selector; gana por orden, que custom.css se carga después de Bootstrap. */
.table > :not(caption) > * > * {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem; }

/** /alto de fila de los listados **/
/** alineacion de las columnas de un listado **/
/* REGLA GENERAL, fijada por Amilcar el 8 de agosto de 2026: EL ENCABEZADO DE UNA COLUMNA SE ALINEA
   IGUAL QUE SU DATO. Los numeros van a la derecha, y entonces el rotulo tambien; el texto va a la
   izquierda, que es lo que ya hacen los dos por omision y por eso no hay clase para eso.

   Se pone la clase en el `<th>` Y en el `<td>`, no en uno solo. Once vistas de hoy tienen el
   `text-align: right` como `style` en linea en la celda nada mas, asi que el rotulo les queda a la
   izquierda de una columna de numeros a la derecha: eso es justamente lo que esta regla corrige.

   `tabular-nums` alinea las cifras en columna aunque la fuente tenga digitos de ancho distinto, que
   es lo que hace que dos precios se puedan comparar de un vistazo. */
.columna-numero {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* PRIMERA TRAMPA, y la clase sola no alcanza: el adaptador -bs5 trae
   `table.dataTable thead th { text-align: left }`, que con tres elementos y una clase le gana a
   `.columna-numero` por especificidad. O sea que en un listado con DataTables -los 47- el dato se
   iba a la derecha y el rotulo se quedaba a la izquierda, que es exactamente lo que esta regla
   viene a arreglar. Se comprobo renderizando la pantalla: la primera version no movio el rotulo.
   Hay que repetir el selector de la libreria con `.columna-numero` de mas. */
table.dataTable thead > tr > th.columna-numero,
table.dataTable thead > tr > td.columna-numero,
table.dataTable tfoot > tr > th.columna-numero,
table.dataTable tfoot > tr > td.columna-numero {
  text-align: right; }

/* SEGUNDA TRAMPA, y esta se arregla al reves de lo que uno haria. El adaptador -bs5 dibuja las
   flechas de orden en `right: 10px` y por eso le reserva al encabezado ordenable
   `padding-right: 26px`. Alineado a la derecha, el rotulo termina entonces a 26px del borde y el
   dato de abajo a los 0.5rem de la celda: 18px de diferencia, justo en las columnas donde mas se
   nota.

   El primer intento fue pasarle las flechas al lado izquierdo del rotulo. Alinea, pero al
   renderizarlo se vio el problema: en una columna ancha la flecha queda a 300px de su rotulo,
   pegada a la columna anterior, y se lee como si fuera de esa otra.

   Lo que si funciona es lo contrario: dejar la flecha donde la libreria la pone -que con el rotulo
   a la derecha le queda justo al lado- y darle al DATO el mismo relleno de 26px. Asi los dos
   terminan en el mismo lugar y la flecha sigue pegada a su rotulo.

   Va sin `.sorting` a proposito: asi el encabezado mide 26px lo ordenen o no, y una columna a la
   que algun dia se le apague el orden no se desalinea sola.

   Y el `tfoot > th` estaba fuera de la lista, que es la TERCERA trampa de la misma familia: la
   fila de totales de cuatro listados escribe sus celdas como `th` y no como `td`, asi que
   quedaba con el relleno de 0.5rem mientras su propia columna llevaba 26px. Medido sobre la
   captura de InventarioCombustibleItems/IndexByInventario, en tres columnas distintas: el
   total caia 18 px a la derecha del dato que suma. No se veia leyendo el HTML porque el
   `style="text-align:right"` en linea alineaba, y lo que fallaba era el relleno. */
table.dataTable thead > tr > th.columna-numero,
table.dataTable tbody > tr > td.columna-numero,
table.dataTable tfoot > tr > td.columna-numero,
table.dataTable tfoot > tr > th.columna-numero {
  padding-right: 26px; }

/* LOS TITULOS DE COLUMNA SE QUEDAN FIJOS al recorrer un listado largo, debajo de las otras dos
   capas: de ahi el `top` sumado, que sale de `--tope-del-encabezado`. Pedido de Amilcar del 30 de
   agosto de 2026, la tercera de las tres capas -«los encabezados cuando se trate de columnas o
   matrices que describen el contenido de cada fila»-.

   EL SELECTOR ES `table.dataTable` Y ESO ES DELIBERADO: esa clase NO esta en ninguna vista, se la
   pone DataTables al montar la tabla. Asi alcanza a los listados de verdad y a nada mas. Las otras
   dos formas de escribirlo fallan cada una por su lado, y las dos en silencio:

     · `#datatable thead th` deja afuera la tabla de `OrdenesCompra/Details`, que es un listado
       montado igual pero cuyo id se lo pasa la pantalla por `ViewData`;
     · `table thead th` a secas agarraria `#tabla-de-exportacion`, la tabla ESCONDIDA que arma el
       PDF de las pantallas que no son un listado. Pegar celdas de una tabla que nadie ve no se
       nota mirando, y saldria mal recien en el informe impreso.

   El aspecto no cambia: siguen blancos como estaban. Amilcar pidio que se queden, no que se
   destaquen -eso lo pidio aparte y solo para la matriz de «control de informes», que por eso tiene
   su propia regla y no esta-. El `background` no es cosmetico y no se puede sacar: el encabezado
   despegado tiene contenido pasandole por debajo, y sin fondo opaco se ven las dos cosas encima.

   EL `!important` DEL `position` ES LA UNICA EXCEPCION DE ESTA HOJA, y esta es la razon: DataTables
   le escribe a cada celda del encabezado un `style` EN LINEA con `position: relative` —lo pone al
   calcular los anchos de columna, junto al `width`— y a un estilo en linea no le gana ningun
   selector. No es la regla del adaptador, que tambien existe y tambien dice `relative`: ESA se
   puede vencer por especificidad, y se intento primero. Medido servido, con el `style` a la vista:

       th.style-en-linea=[width: 298.531px; position: relative;]

   Y FALLA CALLADO, que es lo que lo hace caro: `top`, `z-index` y `background` SI se aplican
   —DataTables no los toca—, asi que al inspeccionar la celda se ve `top: 100px` puesto al lado de
   un `position: relative` y todo parece configurado. Lo unico que se nota es que el encabezado no
   se queda. Antes de dar con esto se probaron dos caminos que no eran: subir la especificidad
   repitiendo la clase, y enumerar los cinco estados `sorting*` del adaptador. Ninguno movio la
   aguja, porque el problema nunca estuvo en la cascada entre hojas.

   La convencion de esta hoja es no usar `!important`, y sigue en pie: existe para no pelear
   especificidad entre reglas propias, no para renunciar frente al `style` de una libreria. Va solo
   en `position`; las otras tres propiedades no lo necesitan.

   LA SOMBRA ES UN SEPARADOR, no los bordes: la tabla es `border-collapse: separate` —se lo impone
   el adaptador con `!important`—, asi que los bordes propios de la celda SI viajan con ella al
   despegarse. Lo que falta es la linea que separa el encabezado flotando de la fila que le pasa por
   debajo, y eso es lo que pone la sombra interior. */
table.dataTable thead > tr > th,
table.dataTable thead > tr > td {
  position: sticky !important;
  top: var(--tope-del-encabezado);
  z-index: 2;
  background: #fff;
  box-shadow: inset 0 -1px 0 #E6E9ED; }

/* Y ESTO ES LO QUE HACE QUE LO DE ARRIBA FUNCIONE. 35 vistas envuelven su tabla en un
   `.table-responsive`, que Bootstrap define con `overflow-x: auto`, y `position: sticky` SE RESUELVE
   CONTRA EL ANCESTRO QUE DESPLAZA: mientras ese marco fuera el ancestro, el encabezado solo podia
   pegarse al borde DEL MARCO -que no desplaza en vertical-, o sea que se iba de pantalla con el
   resto. Medido servido antes de corregirlo: con el listado en 100 filas y la pagina bajada 600 px,
   el `top` del encabezado era -192.

   NO ALCANZA CON DECLARAR SOLO EL EJE VERTICAL, y por eso la regla apaga el horizontal entero: la
   spec dice que si un eje deja de ser `visible` el otro `visible` SE COMPUTA `auto`. Un
   `overflow-y: visible` al lado de un `overflow-x: auto` no hace nada.

   ASI QUE SE DECIDE POR LISTADO Y MEDIDO, en vez de elegir para los 40 de una vez: `listado.js`
   compara el ancho de la tabla con el de su marco y solo entonces le pone `tabla-desborda`. El que
   cabe -que hoy son casi todos- gana el encabezado pegado a la pantalla; el que no cabe conserva su
   desplazamiento propio, que es lo que evita que la tabla arrastre el menu lateral, y ahi el
   encabezado se va con el contenido como hasta ahora. Ninguno pierde nada que tuviera.

   LA ALTERNATIVA ERA RETIRAR `.table-responsive` DE LAS 35 VISTAS, y se descarto: convierte el
   desplazamiento de la tabla en desplazamiento de la PAGINA, que arrastra el menu lateral, y lo
   haria tambien en los listados anchos donde hoy funciona bien. */
.table-responsive {
  overflow-x: visible; }

.table-responsive.tabla-desborda {
  overflow-x: auto; }

/* Y EN ESE MODO EL ENCABEZADO SE DESPEGA, que es lo que la regla de arriba dice que pasa —«el
   encabezado se va con el contenido como hasta ahora»— y hasta el 30 de agosto de 2026 no pasaba.
   Faltaba esta mitad: al ganar `overflow-x: auto`, el marco pasa a ser el ancestro de desplazamiento
   del `thead`, el `top: var(--tope-del-encabezado)` se resuelve CONTRA EL MARCO y le empuja el
   encabezado 111 px hacia abajo, ENCIMA DE LA PRIMERA FILA. La fila esta en el DOM y no se ve: en
   «Combustibles» a 1500 px desaparecia DIESEL con el pie diciendo «Mostrando 1 a 3 de 3».

   NO ES UN CASO RARO NI NUEVO: lo hacia toda tabla que desbordara, y se encontro porque
   «Productos» y «Combustibles» dejaron de caber al ganar sus cinco columnas de dependientes.
   Medido servido en las tres —Combustibles y Productos a 1500, Facturas a 1000—: con esta regla la
   primera fila arranca exactamente donde termina el encabezado.

   ES LA CONTRAPARTE DEL `!important` DE ARRIBA y no su excusa para quitarlo: aquel sigue siendo la
   unica excepcion de la hoja, porque DataTables escribe `position` en linea; esta lo anula solo en
   el modo donde el pegajoso ya no podia funcionar. */
.table-responsive.tabla-desborda table.dataTable thead > tr > th,
.table-responsive.tabla-desborda table.dataTable thead > tr > td {
  position: static !important; }

/* La columna de los iconos de accion. No es un dato, asi que no entra en la regla de arriba: va
   pegada al borde derecho, que es donde uno los busca, y su encabezado esta vacio. */
.columna-acciones {
  width: 1%;
  text-align: right;
  white-space: nowrap; }

/** /alineacion de las columnas de un listado **/
/** desvio de una celda **/
/* CUANDO UNA CELDA COMPARA DOS CIFRAS QUE DEBERÍAN COINCIDIR Y NO COINCIDEN. La primera que lo usa
   es `IReportadoMangueras/Index2` —venta mecánica contra digital, digital contra marcada, marcada
   contra reportada—, pero el juego va SIN prefijo de pantalla, como `.contador-*` y `.destacado-*`
   y por el mismo motivo: cualquier listado que enfrente dos números tiene esta misma pregunta que
   contestar.

   LOS TRES TONOS SON LOS QUE ESTA APLICACIÓN YA RESERVA, y no se eligieron por gusto: el rojo
   `#C9302C` sobre `#FDF1F0` de `.contador-alerta` —«algo que hay que resolver, no solo mirar»—; el
   ámbar sobre `#FDF6EC` de `.contador-aviso` —«algo que conviene mirar y que no es un error»—; y
   para el desvío más chico, el mismo ámbar SIN fondo, que es la decisión de `.contador-candado`:
   informa, no reclama. Que el tercero no lleve fondo es deliberado: tres fondos seguidos se
   confunden entre sí, y el desvío chico es ruido en la mayoría de los turnos.

   EL ÁMBAR ES `#96600A` Y NO EL `#B9770E` DE LAS TARJETAS, y la diferencia está medida: aquel vive
   en el VALOR GRANDE de una tarjeta de contador, donde la pauta pide 3:1 y le sobra; acá es texto
   de tabla de 13px, donde pide 4,5:1 y **el ámbar de las tarjetas da 3,43:1 sobre su propio fondo,
   3,68:1 sobre blanco y 3,49:1 sobre la fila alterna**. `#96600A` es el primer escalón de la misma
   familia que llega a 4,5 en los tres. Si algún día hay que retocarlo, muévelo por ese eje y vuelve a
   medir los TRES fondos: el rayado de las filas es el que primero se cae.

   Reemplazan a `orangered`, `orange` y `yellow` escritos en línea, que eran los tres colores crudos
   del navegador. El amarillo puro era además el peor de los tres: el texto del sistema —`#73879C`—
   sobre `#FFFF00` no llega ni de lejos al contraste que pide la pauta.

   EL SELECTOR LARGO Y EL `--bs-table-bg-type` NO SON ADORNO, y esto costó una vuelta de fotos.
   Bootstrap 5.3 pinta las filas alternas con un `box-shadow: inset` de 9999px y no con
   `background-color`, así que un fondo declarado a secas queda TAPADO. Y no alcanza con fijar la
   variable desde `.celda-desvio-grave` sola: `.table-striped > tbody > tr:nth-of-type(odd) > *`
   pesa (0,2,2) y una clase suelta (0,1,0), o sea que el rayado gana y **el semáforo se ve solo en
   la mitad de las filas** —medido: aparecía en las pares y desaparecía en las impares—. El selector
   de abajo pesa lo mismo que el del rayado y se carga después, que es lo que lo desempata.

   Y EL VALOR EXACTO DEL DESVÍO SIGUE EN EL `title` DE LA CELDA, que es lo único que no depende del
   color: tres niveles distinguidos SOLO por color no los separa quien no distingue rojo de ámbar.
   Por eso el `title` no se toca. */
.celda-desvio-grave,
.table > :not(caption) > * > td.celda-desvio-grave {
  --bs-table-bg-type: #FDF1F0;
  background-color: #FDF1F0;
  color: #C9302C;
  font-weight: 600; }

.celda-desvio-medio,
.table > :not(caption) > * > td.celda-desvio-medio {
  --bs-table-bg-type: #FDF6EC;
  background-color: #FDF6EC;
  color: #96600A; }

.celda-desvio-leve,
.table > :not(caption) > * > td.celda-desvio-leve {
  color: #96600A; }

/** /desvio de una celda **/
/** edicion en linea sobre la tabla **/
/* Las cinco columnas editables de «Mangueras reportadas», que se cargan sobre la propia tabla en
   vez de abrir cada manguera. Lo maneja `edicion-de-lecturas.js`, y estas reglas solo dan las tres
   señales que el usuario necesita: dónde se puede escribir, dónde está escribiendo, y qué celdas
   tienen algo que todavía no se guardó.

   TODO CUELGA DE `.tabla-en-edicion`, clase que el guion le pone y le saca a la tabla. Fuera del
   modo edición el listado se ve exactamente como antes, que es lo que tiene que pasar en la
   pantalla de quien solo viene a mirar o a imprimir.

   EL FONDO DE LA CELDA CAMBIADA REPITE EL RODEO DE LOS DESVÍOS, y por el mismo motivo medido ahí
   arriba: Bootstrap 5.3 pinta las filas alternas con un `box-shadow: inset` de 9999px, así que un
   `background-color` a secas queda TAPADO, y una clase suelta pierde por especificidad contra
   `.table-striped > tbody > tr:nth-of-type(odd) > *`. Sin el selector largo y sin
   `--bs-table-bg-type`, la marca de «sin guardar» se vería en la mitad de las filas.

   Y NO SE DISTINGUE SOLO POR COLOR: la celda cambiada lleva además negrita, y el encabezado dice
   cuántas hay sin guardar. Es la misma regla que los tres niveles de desvío. */
.tabla-en-edicion tbody td.celda-editable {
  cursor: cell; }

.tabla-en-edicion tbody td.celda-editable:hover {
  outline: 1px solid #B7C4CF;
  outline-offset: -1px; }

/* La celda mientras tiene la caja: se le saca el relleno para que el campo ocupe el ancho entero.
   Los 26px de la derecha se los pone `.columna-numero` para las flechas de orden del encabezado, y
   ahi adentro dejarian el numero corrido respecto de sus vecinas. */
.tabla-en-edicion tbody td.celda-editando {
  padding: 0; }

.celda-editable-caja {
  width: 100%;
  border: 2px solid #1ABB9C;
  border-radius: 0;
  padding: 0.35rem 0.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #2A3F54;
  background-color: #FFFFFF; }

.celda-editable-caja:focus {
  outline: none; }

/* LOS OTROS DOS CONTROLES VAN A LA IZQUIERDA, y no es gusto: el `text-align: right` de arriba se
   escribio cuando las cinco columnas editables eran numeros, y un numero se lee alineado por su
   ultima cifra. Un nombre de empleado y una fecha no. Sin esto, el desplegable de «Bomberos
   reportados» sale con «Fatima Arauz» pegado a la flecha y desalineado de su propio rotulo, que es
   el unico de esa tabla y va a la izquierda: la celda dice una cosa y su encabezado otra.

   Se vio en la foto y no leyendo la hoja, que es lo de siempre con la alineacion heredada. */
.celda-editable-caja.celda-editable-lista,
.celda-editable-caja.celda-editable-fecha {
  text-align: left; }

/* Lo que no es un numero no cierra la celda: la caja se queda abierta y marcada. Sin esto, el
   unico aviso seria que el foco no se mueve. */
.celda-editable-caja.celda-editable-mala {
  border-color: #C9302C;
  background-color: #FDF1F0; }

.celda-editada,
.table > :not(caption) > * > td.celda-editada {
  --bs-table-bg-type: #EAF6F3;
  background-color: #EAF6F3;
  font-weight: 600; }

/** /edicion en linea sobre la tabla **/
/** encabezado de un listado **/
/* La franja de arriba de un listado, con DOS grupos enfrentados: a la izquierda lo que NAVEGA
   -«Agregar registro», «Volver»- y a la derecha, en un desplegable, lo que actua sobre TODA LA
   TABLA -imprimir, exportar-. Lo dibuja la vista sobre el mismo `.x_title` de siempre, sumandole
   `encabezado-de-listado`; el desplegable sale de Views/Shared/_AccionesDeTabla.cshtml.

   Va en un desplegable y no como enlaces sueltos por decision de Amilcar del 8 de agosto de 2026:
   esta pantalla tiene dos funciones pero las que vengan van a tener mas, y una hilera que crece no
   aguanta. Estrenado en CProductos/IndexPlantillaProductos.

   NO reemplaza a `_IndexToolBoxPartial`, que sigue en 46 vistas con los dos «Settings» del tema
   comprado que no hacen nada. Es el marco al que esas 46 se van a ir pasando de a una.

   El `.x_title` de siempre usa `float` -h2 a la izquierda, `panel_toolbox` a la derecha- y por eso
   pide un `clearfix` detras. Este es flex: no hay floats que limpiar y el `clearfix` sobra.

   SE QUEDA FIJA AL DESPLAZAR, pero ESO NO SE DECIDE ACA: lo hace `.x_title`, que es la franja de
   arriba del panel en las 78 vistas y no solo en las 68 que llevan esta clase. Pedido de Amilcar del
   30 de agosto de 2026, y la primera version lo puso aca: las 10 pantallas del molde viejo
   -«Configuracion de estacion» entre ellas- quedaron sin fijar, y las reporto el mismo dia. El
   porque completo esta en el comentario de `.x_title`.

   Hasta ese dia el pegado vivia en una clase aparte, `.cdi-barra`, con un comentario que decia «no
   se le agrega a `encabezado-de-listado` porque ninguno de los listados la quiere fija»; el pedido
   invirtio esa decision y la clase aparte se retiro.

   Lo unico que esta regla aporta al pegado es el `display: flex`, que le gana al `flow-root` de
   `.x_title` por venir despues en esta hoja. Las dos contienen sus hijos; esta ademas los reparte. */
.encabezado-de-listado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px; }

.encabezado-de-listado-navegacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px; }

/* El grupo de la DERECHA, para las pantallas que ponen algo pegado a «Acciones». El encabezado
   reparte con `space-between`, o sea que con tres hijos sueltos el del medio queda flotando en el
   centro: metiendolos en un contenedor propio siguen siendo dos grupos enfrentados.

   Lo estreno «Movimientos», que lleva a la izquierda de «Acciones» los dos botones excluyentes de
   volumen y dinero. */
.encabezado-de-listado-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; }

/* El tema le pone margen a `.btn` para separarlos cuando van en fila suelta. Aca los separa el
   `gap`, asi que el margen solo descuadra el centrado vertical. */
.encabezado-de-listado .btn {
  margin: 0; }

/* ...pero DENTRO de un `.btn-group` los botones van pegados a proposito, y el `gap` de arriba no los
   toca porque el grupo es un hijo mas. Lo que si hay que reponer es el solapado de los bordes, que
   Bootstrap hace con margenes negativos y la regla de arriba anula. */
.encabezado-de-listado .btn-group > .btn + .btn {
  margin-left: -1px; }

/* El titulo de una ficha de detalle, que desde el 24 de agosto de 2026 va en esta misma franja y
   pegado detras del boton de «Volver» -Amilcar lo eligio asi despues de verlo debajo-. El `gap` de
   este grupo son 2px, pensados para enlaces que casi se tocan, y contra un titulo se lee como si
   el boton fuera parte de el; el <h2> del tema no trae margen lateral propio que lo separe.

   NO LLEVA SELECTOR DE PANTALLA: un listado no mete <h2> en este grupo -su titulo esta en las
   migajas-, asi que hoy solo alcanza a las fichas, y el dia que un listado quiera uno va a querer
   la misma separacion. */
.encabezado-de-listado-navegacion h2 {
  margin-left: 10px; }

.acciones-de-tabla-boton {
  padding: 4px 12px;
  border: 1px solid #C3CED8;
  border-radius: 4px;
  background: #FFFFFF;
  color: #2A3F54;
  font-size: 12.5px;
  font-weight: 600; }

/* `aria-expanded` y no `.show`: el atributo lo pone Bootstrap 5 en el boton mismo, mientras que
   `.show` va en el contenedor y obligaria a un selector descendente. */
.acciones-de-tabla-boton:hover,
.acciones-de-tabla-boton:focus,
.acciones-de-tabla-boton[aria-expanded="true"] {
  border-color: #2A3F54;
  background: #F2F5F8;
  color: #2A3F54; }

.acciones-de-tabla-boton .fa {
  margin-right: 6px;
  color: #73879C; }

.acciones-de-tabla .dropdown-menu {
  min-width: 215px;
  padding: 4px 0;
  border: 1px solid #D3DBE2;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(42, 63, 84, 0.14); }

.acciones-de-tabla .dropdown-item {
  padding: 7px 14px;
  color: #2A3F54;
  font-size: 13px; }

/* Las entradas que mandan la tabla al servidor -«Imprimir en PDF» y «Exportar a Excel»- salen como
   <button> y no como enlace, porque su direccion sola no significa nada: sin el cuerpo del pedido
   no hay tabla que imprimir. Ver _AccionesDeTabla.cshtml. Bootstrap ya les da el ancho del menu;
   esto solo alinea el texto como el de los enlaces y repone el cursor de mano. */
.acciones-de-tabla button.dropdown-item {
  text-align: left;
  cursor: pointer; }

/* UNA FUNCION QUE AHORA NO SE PUEDE USAR: se ve, se lee, se explica y no responde. La entrada sale
   como <span> desde _AccionesDeTabla.cshtml y el porque de mostrarla en vez de esconderla esta en
   MdlAccionDeTabla.MotivoApagada.

   EL COLOR HAY QUE PONERLO ACA, aunque Bootstrap ya tenga uno para `.dropdown-item.disabled`: el
   `color` de `.acciones-de-tabla .dropdown-item` de mas arriba tiene la misma especificidad y va
   despues, asi que gana, y el del icono lo pone `.acciones-de-tabla-icono` por su cuenta. Sin estas
   dos lineas la entrada queda apagada de verdad -no navega, no toma el foco- pero SE VE IGUAL que
   las que si funcionan. Medido servido el 31 de agosto de 2026: `disabled` puesto, aspecto
   intacto. Los dos grises y el `cursor: help` son los que ya usan las acciones apagadas de las
   filas -`ficha-accion-apagada`, `cdi-accion-apagada`, `pcb-accion-apagada`-.

   EL `pointer-events: auto` REPONE lo que Bootstrap apaga: `.dropdown-item.disabled` trae
   `pointer-events: none`, y con eso el navegador NO dibuja el globo del `title`. O sea que sin esa
   linea la entrada sale apagada pero MUDA -no hay forma de enterarse de por que-, que es justo lo
   contrario de para lo que se puso. No da error y ninguna prueba de CSS lo ve: se comprueba
   pasandole el raton por encima. */
.acciones-de-tabla .dropdown-item.disabled {
  color: #AEBAC6;
  pointer-events: auto;
  cursor: help; }

.acciones-de-tabla .dropdown-item.disabled .acciones-de-tabla-icono {
  color: #CCD3DA; }

/* Ancho fijo para que los rotulos arranquen todos en la misma columna, tengan el icono que tengan. */
.acciones-de-tabla-icono {
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  color: #73879C;
  text-align: center; }

.acciones-de-tabla .dropdown-item:hover .acciones-de-tabla-icono,
.acciones-de-tabla .dropdown-item:focus .acciones-de-tabla-icono {
  color: #2A3F54; }

/** /encabezado de un listado **/
/** redimensionado de columnas **/
/* La manija que deja al usuario ajustar el ancho de una columna arrastrando. La agrega
   init_redimensionarColumnas() de custom.js a cada encabezado menos el último.
   Va pegada al borde derecho y mide 8px; las flechas de orden del adaptador -bs5 se dibujan en
   `right: 10px`, así que no se pisan. */
.redimensionar-columna {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; }

/* Mientras se arrastra, el cursor y la prohibición de seleccionar valen para toda la página:
   el mouse se sale de esos 8px enseguida y si no, queda pintando texto de azul por el camino. */
body.redimensionando-columna {
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; }

/** /redimensionado de columnas **/
/** paginas publicas **/
/* Las tres pantallas que se ven sin sesión iniciada: la portada (Views/Home/Index.cshtml),
   «Acerca de» (About.cshtml) y «Contacto» (Contact.cshtml). Antes cada una era HTML de fábrica de
   la plantilla: la portada, un `jumbotron` de Bootstrap 4 —que la 5 eliminó, y quedó como
   `p-5 mb-4 bg-light rounded`: un recuadro gris claro— con cinco columnas de texto suelto sin nada
   que las separara; las otras dos, `<h2>` y `<h3>` sueltos sobre fondo blanco.

   Los estilos viven acá y no en un <style> dentro de la vista porque ninguna de las 282 vistas
   tiene uno, y porque este archivo ya va con token de versión por @Url.Recurso: un cambio acá
   estrena dirección y nadie se queda con la versión vieja en caché.

   Los nombres son genéricos —`.banda`, `.tarjeta`— y no `.portada-*` a propósito: las tres páginas
   comparten la misma presentación, así que un retoque acá las alcanza a las tres y no hay tres
   copias que se desincronicen. Todo cuelga de esas clases, que solo se usan en esas tres vistas,
   así que nada de esto toca las otras 279 pantallas. Los colores son los del tema: #2A3F54 y
   #1ABB9C los del menú lateral, y los cinco de los iconos —#26B99A, #3498DB, #F39C12, #34495E,
   #9B59B6— ya estaban en este mismo archivo. */
.pagina-publica {
  padding-bottom: 10px; }

/* La banda de presentación. El degradado va del azul del menú lateral al verde del tema, que son
   los dos colores que el usuario ya tiene delante en el resto de la pantalla. */
.banda {
  margin-bottom: 20px;
  padding: 40px 35px;
  color: #E9EDEF;
  background: #2A3F54;
  background: linear-gradient(135deg, #2A3F54 0%, #34495E 55%, #1ABB9C 190%);
  border-radius: 3px; }

/* Variante para las páginas interiores: la portada se presenta, «Acerca de» y «Contacto» solo se
   encabezan. Mismo degradado, menos aire y título más chico. */
.banda-chica {
  padding: 30px 35px; }

.banda-antetitulo {
  margin: 0 0 6px;
  color: #1ABB9C;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase; }

.banda h1 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 42px;
  font-weight: 300;
  line-height: 1.1; }

.banda-chica h1 {
  font-size: 32px; }

/* Ancho de lectura acotado: en una pantalla ancha el párrafo tiraría un renglón de punta a punta.
   No se usa la clase `lead` de Bootstrap porque este archivo no la pisa, o sea que su tamaño lo
   decide la librería —y ese valor ya cambió una vez entre la 4 y la 5—. */
.banda-bajada {
  max-width: 620px;
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5; }

.banda-chica .banda-bajada {
  font-size: 15px; }

.banda-acciones {
  margin: 22px 0 0; }

/* Las tarjetas. La fila es flex —lo es de fábrica en Bootstrap 5— así que los `float: left` que el
   tema le pone a las clases `.col-*` (más arriba en este archivo) no tienen efecto acá.
   `justify-content-center` en la vista centra las que sobran al repartir de a tres. */
.tarjetas > [class*="col-"] {
  display: flex;
  padding-right: 10px;
  padding-left: 10px; }

/* Alturas iguales sin fijar ninguna: la columna es un contenedor flex y el panel, su único hijo,
   se estira solo. El margen inferior se descuenta del estirado, así que no hace falta calcularlo.
   `display: flex` pisa el `inline-block` que trae `.x_panel`; acá adentro no hay flotantes que
   contener. */
.tarjeta {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 25px 22px;
  border-radius: 3px;
  transition: box-shadow .2s ease, transform .2s ease; }

.tarjeta:hover {
  box-shadow: 0 6px 18px rgba(42, 63, 84, 0.12);
  transform: translateY(-2px); }

.tarjeta h2 {
  margin: 0 0 8px;
  color: #34495E;
  font-size: 20px;
  font-weight: 400; }

.tarjeta p {
  margin: 0;
  line-height: 1.6; }

/* `address` en la 5 ya viene sin cursiva; lo que se le saca es el margen inferior, que dejaba un
   hueco al pie de la tarjeta. */
.tarjeta address {
  margin: 0;
  line-height: 1.7; }

/* Rótulo de un dato dentro de una tarjeta: «Soporte», «Ventas». Va sobre el valor, no al lado, así
   los correos largos no empujan nada. */
.tarjeta-rotulo {
  display: block;
  color: #73879C;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase; }

.tarjeta-rotulo + a {
  word-break: break-word; }

/* Separación de un dato respecto de lo que tenga arriba, sea un párrafo u otro dato. Va acá y no
   como margen del párrafo porque `.tarjeta p` los deja en cero. */
.tarjeta > * + .tarjeta-dato {
  margin-top: 14px; }

/* Botón al pie de la tarjeta. `margin-top: auto` lo empuja abajo del todo, así dos tarjetas con
   textos de distinto largo igual alinean sus botones. Lleva `.tarjeta` delante porque `.tarjeta p`
   —que pone el margen en cero— le gana por especificidad a una clase sola. */
.tarjeta .tarjeta-acciones {
  margin: auto 0 0;
  padding-top: 18px; }

/* El disco con el icono. En la portada es el que ese módulo tiene en el menú lateral. */
.tarjeta-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  color: #fff;
  font-size: 20px;
  border-radius: 50%; }

.tarjeta-icono-verde {
  background: #26B99A; }

.tarjeta-icono-azul {
  background: #3498DB; }

.tarjeta-icono-naranja {
  background: #F39C12; }

.tarjeta-icono-gris {
  background: #34495E; }

.tarjeta-icono-violeta {
  background: #9B59B6; }

/* En pantalla chica el encabezado se aprieta: 42px de título con 15px de aire a los lados dejaban
   «Sertation» pegado al borde. */
@media (max-width: 575px) {
  .banda {
    padding: 28px 20px; }
  .banda h1 {
    font-size: 32px; }
  .banda-chica h1 {
    font-size: 26px; }
  .banda-bajada {
    font-size: 15px; } }

/** /paginas publicas **/
/** ficha de detalle **/
/* Las pantallas de detalle: solo lectura, un registro, sus campos y un boton para volver. Son 56 y
   escriben cada campo con @Html.DatosDe, que renderiza Views/Shared/Controls/FormData.cshtml.

   Que arreglan estas reglas: las 56 pedian dos columnas -rotulo a la izquierda, valor a la derecha-
   con `dl-horizontal`, y esa clase NO EXISTE. Es de Bootstrap 3, la 4 la elimino y custom.css no la
   repone, asi que desde el salto de la 3 a la 4 los detalles se dibujan como una pila de <dd> con
   la sangria de fabrica del navegador y el rotulo pegado al valor. Es la misma categoria de trampa
   que `form-group` y los `glyphicon` --las dos traducidas el 17 de agosto de 2026--, salvo
   que en este caso el tema NO la repone.

   Nada de esto se aplica por estar en un Details: cuelga todo de `.ficha`, el envoltorio, que hoy
   ponen las 56 -mas Cierre2Pasos y CierreTotal2Pasos, que son las otras dos que usan @Html.DatosDe-.
   Los grupos piden ademas `ficha-grupo-doble`, la variante de dos pares por renglon que esta al
   final de esta seccion: la piden las 56, y no la piden Cierre2Pasos ni CierreTotal2Pasos. */
.ficha {
  padding-top: 5px; }

/* Un bloque de campos con su titulo: Direccion, Contacto, Suscripcion. Sin agrupar, la ficha de una
   empresa son 17 renglones iguales uno abajo del otro. */
.ficha-grupo {
  margin-bottom: 26px; }

.ficha-grupo h3 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  color: #34495E;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .3px;
  border-bottom: 2px solid #1ABB9C; }

/* Las dos columnas se declaran UNA vez, acá, y no en cada renglon. Grid y no float ni
   `dl-horizontal`: un valor largo se envuelve dentro de su columna en vez de meterse debajo del
   rotulo. La rejilla va en el <dl> y no en el renglon porque los datos llegan de dos formas
   distintas y las dos tienen que quedar alineadas entre si:

   - @Html.DatosDe -las 56 vistas- emite UN <dd class="dato"> con el rotulo y el valor adentro.
   - @Html.NombreDe + @Html.ValorDe -8 vistas- emiten un <dt> y un <dd> sueltos, y se usan cuando el
     rotulo sale de una propiedad y el valor de otra: NombreDe(IdTanqueOrigen) da «Tanque de origen»
     y ValorDe(VTanque.NombreTanque) da el nombre. Ese par cae solo en las dos columnas del <dl>.

   Al `.dato` hay que estirarlo sobre las dos columnas y repetirlas con `subgrid` para que sus dos
   mitades caigan en las mismas guias que los pares dt/dd de arriba y abajo. */
.ficha-grupo dl {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  column-gap: 14px;
  margin: 0; }

.ficha-grupo dt,
.ficha-grupo dd {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid #EDF0F2; }

.ficha-grupo dt {
  color: #73879C;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: right; }

.ficha-grupo dd {
  line-height: 1.5;
  word-break: break-word; }

.ficha .dato {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 14px;
  padding: 0; }

.ficha .dato > span {
  padding: 7px 0; }

/* Sin subgrid el `.dato` quedaria en una sola columna, con el rotulo arriba del valor y desalineado
   respecto de los pares dt/dd. Repetir las guias a mano da el mismo resultado mientras el ancho sea
   el mismo, y lo es: el `.dato` ocupa las dos columnas enteras del <dl>. */
@supports not (grid-template-columns: subgrid) {
  .ficha .dato {
    grid-template-columns: minmax(120px, 38%) 1fr; } }

/* El ultimo renglon del grupo no lleva raya. Si termina en un par dt/dd hay que apagar los dos: el
   <dd> es el ultimo hijo y su <dt> es el anteultimo. */
.ficha-grupo dl > :last-child,
.ficha-grupo dl > dt:nth-last-child(2) {
  border-bottom: 0; }

/* El rotulo lo escribe FormData.cshtml con `text-uppercase`. Acá se le saca: los nombres salen de
   los [Display(Name)] de MetaData.cs y son frases en castellano -«Nombre de la empresa», «Teléfono
   de oficina»-, que en versalitas se leen peor y ocupan mas. */
.ficha .dato-rotulo {
  color: #73879C;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  text-transform: none; }

/* Y el valor lo escribe con `text-bg-light`, que en la 5 pinta fondo gris y color propio: deja cada
   valor dentro de una pastilla gris. Acá se devuelve a texto normal. */
.ficha .dato-valor {
  color: inherit;
  background-color: transparent;
  line-height: 1.5;
  word-break: break-word; }

/* Un campo sin cargar deja la celda vacia y el renglon parece un error de dibujo. La raya dice que
   el dato no esta, que es distinto de que la pantalla se haya roto. */
.ficha .dato-valor:empty::before {
  content: "\2014";
  color: #B9C1C9; }

/* Los campos que solo ve Soporte -claves, fechas de creacion, banderas-. Van aparte y apagados para
   que no compitan con los datos del negocio. */
.ficha-grupo-interno {
  margin-top: 6px;
  padding: 18px 20px 2px;
  background: #F7F9FA;
  border-radius: 3px; }

.ficha-grupo-interno h3 {
  color: #73879C;
  border-bottom-color: #D9E0E5; }

.ficha-grupo-interno .dato-valor {
  color: #73879C; }

/* El pie de la ficha. Lleva los mismos botones y los mismos enlaces que ofrece la fila del
   listado de donde se vino -esa es la regla, y por eso la guarda de cada vista esta copiada de su
   propio listado-, mas el boton Volver. Asi un registro se maneja igual desde el listado que desde
   su detalle, sin tener que volver atras para editarlo.

   Flex y no float: en Bootstrap 5 un hijo de flex NO flota. `Volver` se va a la derecha con
   `margin-left: auto`, que es lo que reemplaza al float. Ya paso una vez en la barra superior; ver
   la nota sobre `.nav_menu`. */
/* Las tarjetas de contador del encabezado de una ficha.

   De donde salen: en varios listados cada fila trae un menu desplegable con los contadores de sus
   registros dependientes -en IReportados: bomberos, mangueras, productos, otras formas de pago y
   facturas a credito- y cada item lleva al listado de esos registros. En la ficha ese menu no
   tiene razon de ser: hay UN registro y sobra el lugar, asi que los contadores suben al encabezado
   como tarjetas y el numero se ve sin abrir nada.

   Siguen siendo enlaces y van al mismo lado que el item del menu: cambia como se ven, no que hacen.

   Opt-in: solo las pide la ficha que tiene contadores que mostrar, como `.ficha-grupo-doble`.
   Hoy son 20 de las 56, con 30 tarjetas entre todas; las otras 36 no tienen pantallas hijas. */
.ficha-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 22px; }

/* Es un <a>, no un <div> con un enlace adentro: asi toda la tarjeta es el area de clic y llega
   por teclado con un solo tabulador. */
.ficha-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  color: #34495E;
  text-decoration: none;
  background: #F7F9FA;
  border: 1px solid #E5EAEE;
  border-top: 3px solid #1ABB9C;
  border-radius: 3px;
  transition: background-color .15s, box-shadow .15s; }

.ficha-kpi:hover,
.ficha-kpi:focus {
  color: #34495E;
  text-decoration: none;
  background: #FFF;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }

/* LA TARJETA QUE NO LLEVA A NINGUN LADO. Las 23 del arbol son <a> porque cada una tiene su listado
   hijo; las de «Productos» y «Combustibles» son cuatro contadores —tanques, reportes, plantillas e
   inventarios— que HOY no tienen listado filtrado por producto al que llevar. Se dibujan como <div>
   y esta clase apaga lo que prometeria un clic: el hover, la sombra y el cursor de mano.

   NO ES UN ESTADO APAGADO ni un «sin permiso»: el numero es real y se lee igual de bien. Lo unico
   que dice es que ahi no hay adonde ir. El dia que una gane su listado, se le pone el `href`, se
   convierte en <a> y se le quita la clase — no hay nada mas que deshacer. */
.ficha-kpi-sin-destino {
  cursor: default; }

.ficha-kpi-sin-destino:hover,
.ficha-kpi-sin-destino:focus {
  background: #F7F9FA;
  box-shadow: none; }

.ficha-kpi-numero {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1; }

.ficha-kpi-rotulo {
  margin-top: 3px;
  color: #73879C;
  font-size: 12px;
  line-height: 1.3;
  text-align: center; }


.ficha-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid #EDF0F2; }

/* El tema le pone `margin-bottom: 5px; margin-right: 5px` a TODO `.btn`. En un pie que es flex con
   `gap` eso suma dos espaciados distintos y descuadra el centrado: el margen derecho del ultimo
   boton corre el grupo entero hacia la izquierda. Aca manda el `gap` y los margenes se apagan. */
.ficha-acciones .btn {
  margin-bottom: 0;
  margin-right: 0; }

/* Pie centrado: Editar, Eliminar y las demas acciones del registro quedan agrupadas en el medio en
   vez de pegadas a la izquierda con Volver enfrente. Los contadores no estan aca: subieron al
   encabezado como tarjetas.

   Va DESPUES de `.ficha-acciones` a proposito. `gap` esta declarado en las dos y tienen la misma
   especificidad (0,1,0), asi que gana la que viene despues. Puesto antes, el `gap: 6px 0` de la
   regla general se comia la separacion horizontal y no habia error que lo avisara.

   Lo piden las fichas de detalle. Sigue siendo una clase aparte y no se fusiona con
   `.ficha-acciones` porque son dos decisiones distintas -que el pie sea una hilera, y que esa
   hilera vaya centrada- y conviene poder separarlas.

   AQUI VIVIA `.ficha-volver`, retirada el 24 de agosto de 2026 junto con sus dos correcciones
   -la de este pie centrado y la de pantalla angosta-. Era `margin-left: auto`, para mandar
   `Volver` al extremo opuesto de las acciones; dejo de tener a quien aplicarsele cuando el boton
   subio al encabezado, que es donde lo tiene el listado. Si algun dia vuelve al pie, esta en el
   commit que lo movio. */
.ficha-acciones-centrado {
  justify-content: center;
  gap: 8px 10px; }

/* En pantalla angosta el rotulo pasa arriba del valor: 120px de columna izquierda con lo que sobra
   para el valor deja los telefonos partidos en tres renglones. Cae todo a una columna -el <dl>, y
   con el los pares dt/dd y el `.dato`- y la raya la lleva solo el <dd>, que es el que cierra el
   renglon; si la llevaran los dos quedarian dos lineas por dato. */
@media (max-width: 767px) {
  .ficha-grupo dl {
    grid-template-columns: 1fr; }
  .ficha-grupo dt {
    padding-bottom: 0;
    text-align: left;
    border-bottom: 0; }
  .ficha .dato {
    grid-template-columns: 1fr;
    column-gap: 0; }
  .ficha .dato > span {
    padding: 0; }
  .ficha .dato {
    padding: 7px 0; }
  .ficha .dato-rotulo {
    text-align: left; } }

/* Variante: DOS pares rotulo/valor por renglon en vez de uno. A prueba el 6 de agosto de 2026 en
   Views/Bancos/Details.cshtml y en ninguna otra, para poder compararla contra las 55 restantes
   antes de decidir si se generaliza. Es opt-in igual que `.ficha`: se agrega `ficha-grupo-doble`
   al lado de `ficha-grupo` y nada mas cambia.

   Por que sirve: con una sola columna de pares, un campo corto -«Fax», «Email»- deja media pantalla
   vacia a su derecha y aleja su rotulo del rotulo del campo siguiente. Con dos, los rotulos quedan
   mas cerca entre si y la ficha ocupa la mitad de alto.

   Va DESPUES del @media de arriba a proposito: `.ficha-grupo-doble dl` y `.ficha-grupo dl` tienen
   la misma especificidad (0,1,1), asi que lo que decide es el orden. Si se mueve este bloque mas
   arriba, la variante deja de aplicarse en pantalla angosta y no hay error que lo avise. */
.ficha-grupo-doble dl {
  grid-template-columns: minmax(110px, 19%) 1fr minmax(110px, 19%) 1fr; }

/* Cada dato ocupa DOS de las cuatro columnas, no las cuatro. La colocacion automatica del grid
   manda el 1o, 3o, 5o... al par izquierdo y el 2o, 4o, 6o... al derecho, sin numerarlos a mano. */
.ficha-grupo-doble .dato {
  grid-column: span 2; }

/* El `.dato` sigue repitiendo las guias de su mitad con subgrid. En la reserva hay que escribir el
   rotulo como % DEL PROPIO DATO y no del <dl>: el dato mide media fila, y 19% del <dl> es 38% de
   media fila. Por eso aca dice 38% y arriba 19%, y las dos cosas son el mismo ancho. */
@supports not (grid-template-columns: subgrid) {
  .ficha-grupo-doble .dato {
    grid-template-columns: minmax(110px, 38%) 1fr; } }

/* Separacion entre el par izquierdo y el derecho. Va como relleno del valor de la izquierda porque
   `column-gap` en grid es UNO SOLO para las cuatro columnas: subirlo separaria tambien cada rotulo
   de su propio valor, que es justo lo contrario de lo que se busca. */
.ficha-grupo-doble .dato:nth-child(odd) > .dato-valor {
  padding-right: 26px; }

/* La ultima FILA no lleva raya, y aca una fila son dos datos. Con cantidad par, los dos ultimos la
   comparten y hay que apagarle la raya a los dos; con cantidad impar el ultimo queda solo y el
   anterior esta en la fila de arriba, que si la lleva. `:nth-child(odd)` distingue los dos casos:
   solo es impar el anteultimo cuando comparte fila con el ultimo. */
.ficha-grupo-doble dl > :last-child,
.ficha-grupo-doble dl > .dato:nth-last-child(2):nth-child(odd) {
  border-bottom: 0; }

/* Debajo de 992px no entran dos pares: el valor queda en una tira de 3 o 4 caracteres. Vuelve a un
   par por renglon, que es exactamente el comportamiento de `.ficha-grupo` sin la variante. */
@media (max-width: 991px) {
  .ficha-grupo-doble dl {
    grid-template-columns: minmax(120px, 38%) 1fr; }
  .ficha-grupo-doble .dato {
    grid-column: 1 / -1; }
  .ficha-grupo-doble .dato:nth-child(odd) > .dato-valor {
    padding-right: 0; }
  .ficha-grupo-doble dl > .dato:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid #EDF0F2; } }

/* Y en telefono, a una sola columna, igual que el resto de la ficha. */
@media (max-width: 767px) {
  .ficha-grupo-doble dl {
    grid-template-columns: 1fr; }
  .ficha-grupo-doble .dato {
    grid-template-columns: 1fr; } }

/* Y adentro de la VENTANA EMERGENTE, tambien a un par por renglon, que es exactamente lo que hace
   el @media de arriba y por la misma razon: ahi no entran dos pares.

   HAY QUE ESCRIBIRLO APARTE PORQUE UN MEDIA QUERY MIDE EL VIEWPORT Y NO EL RECIPIENTE. La ventana
   del molde de contenido es `.modal-lg` -800px, de los que el cuerpo usa unos 770-, o sea bastante
   por debajo del umbral de 992 que decidio volver a una columna; pero en un monitor ancho el media
   query no se dispara y las cuatro columnas siguen puestas. El resultado medido, con la ficha de
   una manguera el 29 de agosto de 2026: los rotulos largos parten en dos renglones y un correo
   queda cortado a la mitad -«b.valdez@combustibledelpacif / ico.com»-. Es la misma trampa por la
   que el desplegable de «Cambiar de empresa» recibe su ancho por ViewData; ver
   docs/Ventanas-emergentes.md.

   Cuelga de `#cnt-modal`, que es el id del molde de contenido, asi que no alcanza a ninguna ficha
   servida como pantalla, ni a la ventana del molde de formulario, que es `#frm-modal`. El id le da
   ademas mas especificidad que las reglas de arriba, asi que no depende del orden. */
#cnt-modal .ficha-grupo-doble dl {
  grid-template-columns: minmax(120px, 38%) 1fr; }

#cnt-modal .ficha-grupo-doble .dato {
  grid-column: 1 / -1; }

#cnt-modal .ficha-grupo-doble .dato:nth-child(odd) > .dato-valor {
  padding-right: 0; }

/* Con un par por renglon vuelve a haber raya entre el anteultimo y el ultimo: arriba se la apaga
   porque ahi comparten fila. */
#cnt-modal .ficha-grupo-doble dl > .dato:nth-last-child(2):nth-child(odd) {
  border-bottom: 1px solid #EDF0F2; }

/* Una accion del pie que en este registro no se puede usar. Estrenada el 8 de agosto de 2026 con
   «Cerrar reporte», que solo vale para el informe que sigue abierto.

   NO SE USA `.disabled` de Bootstrap, y ese es el punto: la 5 le pone `pointer-events: none`, asi
   que el elemento no recibe eventos de raton y su `title` -que es el motivo, o sea todo lo que el
   usuario necesita leer- no se muestra nunca. Es la misma trampa por la que los botones apagados de
   las pantallas de tarjetas van como <span> y no como <button disabled>. */
.ficha-accion-apagada {
  border-color: #E6E9ED;
  background: #F2F5F7;
  color: #AEBAC6;
  cursor: help; }

.ficha-accion-apagada:hover {
  border-color: #E6E9ED;
  background: #F2F5F7;
  color: #AEBAC6; }

/** /ficha de detalle **/
/** tarjetas de contador **/
/* La fila de numeros que encabeza una pantalla: cuantos registros tiene cada entidad y que conviene
   mirar antes de tocar nada.

   Es el unico juego de clases propias de este archivo que NO lleva prefijo de pantalla, y es a
   proposito: lo comparten ConfiguracionEstacion/Index -que escribe las tarjetas a mano en la vista-
   y las cinco pantallas de Soporte, que las reciben armadas en Models/Soporte/MdlContador.cs. Si
   una pantalla nueva necesita contadores, usa estas y no inventa un prefijo mas.

   No confundir con `.ficha-kpi` de las vistas de detalle: aquellas son un <a> que lleva a la
   pantalla hija, y por eso tienen sombra y estado de foco. Estas no son enlaces, solo cuentan.

   Los colores son los del tema y ya estaban en este archivo: #2A3F54 y #73879C los del menu lateral
   y el texto suave; el ambar -#B9770E sobre #FDF6EC- el de las piezas fuera de uso del patio; y el
   rojo -#C9302C sobre #FDF1F0- el de la etiqueta «sin rol» que ya lleva el renglon de un usuario
   que no alcanza ninguna pantalla. */

/* LA FILA. Es una sola y lleva las dos clases de tarjeta mezcladas —los contadores y los
   destacados—, por decisión de Amilcar del 8 de agosto de 2026: tienen formatos distintos pero
   caben en el mismo nivel, y si no caben se corren solas al renglon de abajo. Antes eran dos filas
   apiladas y la de arriba quedaba con tres tarjetas enormes y casi vacias.

   El reparto del ancho lo hace `flex-grow`, que es 1 en las dos: el sobrante se divide en partes
   iguales, pero el contador arranca de 0 y el destacado de 280px, asi que el contador queda
   compacto -lo suyo es un numero de dos cifras- y el destacado se lleva el resto, que es lo que
   necesita para el nombre de un producto.

   Se llamaba `contadores` hasta que empezo a llevar tambien destacados. */
.tarjetas-de-encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px; }

/* UNA FILA CON LAS DOS CLASES DE TARJETA: las que dibuja listado.js y las que escribe la vista.

   El caso es `OrdenesCompra/IndexByEntidad`, y sale de que sus numeros no son todos de la misma
   naturaleza. Los que SUMAN LA TABLA MOSTRADA -cuantos movimientos, cuanto volumen, cuanto monto-
   tienen que seguir al filtro, y de eso ya se encarga listado.js; los que son de LA CUENTA -el saldo
   inicial, los cuatro vencimientos- no cambian porque el usuario escriba en «Buscar:», y los calcula
   el servidor. Amilcar pidio que estuvieran juntos arriba, en una sola seccion.

   listado.js busca `.tarjetas-de-listado` ANTES de decidir que la pantalla ya trae las suyas, asi que
   alcanza con dejarle ese div vacio adentro de la fila; el hace `empty()` sobre el y no toca a los
   hermanos. Lo unico que hace falta es que sus tarjetas cuenten como hijas de la fila y no como una
   caja mas: eso es `display: contents`.

   Va con el combinador de hijo directo A PROPOSITO: cuando listado.js crea la fila el mismo, las dos
   clases quedan en EL MISMO elemento -`tarjetas-de-encabezado tarjetas-compactas tarjetas-de-listado`-
   y esta regla no lo alcanza. Si alcanzara, esa fila dejaria de ser flex en los 47 listados. */
.tarjetas-de-encabezado > .tarjetas-de-listado {
  display: contents; }

/* `position: relative` es el ancla del icono del acento, que va absoluto para no meterse en el
   flujo: en flujo cambiaria el alto de la tarjeta, y el alto de estas tarjetas ya esta peleado dos
   veces -el `min-height` del valor de mas abajo, y el cuerpo de 19px de las de dinero-. */
.contador {
  position: relative;
  flex: 1 1 0;
  min-width: 118px;
  padding: 10px 14px;
  border: 1px solid #DAE1E7;
  border-radius: 3px;
  background: #F7F9FA; }

/* LA FILA DONDE LOS IMPORTES LLEVAN EL SIMBOLO. La piden «Movimientos» y la ficha de una entidad,
   que son las dos que muestran dinero y volumen en la misma fila y por eso escriben «B/.» en los
   importes (ver Formatos.MONTO_CON_SIMBOLO).

   Con el simbolo el valor mide bastante mas, y eso destapo dos cosas que se vieron fotografiando:

   - `min-width: auto` en vez de los 118px. En un elemento flexible eso NO es «sin minimo»: es el
     minimo por contenido, o sea que la tarjeta nunca queda mas angosta que su propio numero. Con el
     minimo fijo, «B/. 1,808.15» no entraba y se partia en dos lineas.

   - El cuerpo baja de 22px a 19px, y no es cosmetico: son diez tarjetas, y a 22px la fila envolvia
     dejando UNA sola tarjeta estirada a lo ancho del panel en el segundo renglon.

   `flex: 1 1 0` no se toca: el reparto del sobrante sigue siendo el de siempre, que es lo que hace
   que ocupen todo el ancho -que es justo lo que pidio Amilcar el 9 de agosto de 2026-. */
.tarjetas-de-dinero .contador {
  min-width: auto; }

.tarjetas-de-dinero .contador-valor {
  font-size: 19px;
  white-space: nowrap; }

/* LA FILA CON POCAS TARJETAS. Aca NO se estiran, y hace falta en dos casos: la que dibuja listado.js
   en los listados, que suele tener una sola -«Registros»- y con el `flex-grow` de arriba se llevaria
   el ancho entero del panel para mostrar un numero de dos cifras; y «Precios de combustibles», que
   tiene tres y quedaban enormes sobre tres paneles. Con cinco o mas -«Precios de productos»- estirar
   se ve bien, asi que esto es un modificador y no el comportamiento por omision.

   Se llamaba `tarjetas-de-listado` hasta que la uso una pantalla que no es un listado. */
.tarjetas-compactas .contador {
  flex: 0 1 auto; }

/* El alto minimo es la misma trampa que ya cerraron `.pt-cifra-valor` y `.pdc-cifra-valor`: los
   formatos de dinero de este sistema ESCRIBEN EL CERO EN BLANCO, asi que una tarjeta con el valor en
   cero no reserva su linea y el rotulo sube, quedando desalineado con el de las tarjetas de al lado.
   Se ve apenas en una fila de tarjetas contando registros, y salta a la vista en una de importes
   —los cuatro vencimientos de «Movimientos», que en una cuenta al dia estan todos en cero—. */
.contador-valor {
  display: block;
  min-height: 24px;
  color: #2A3F54;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; }

/* El rotulo es lo que dice QUE se esta contando, asi que no puede ser el texto mas apagado de la
   pantalla: #5A6E82 sobre el fondo de la tarjeta se lee, #73879C a 11px no. */
.contador-rotulo {
  display: block;
  margin-top: 3px;
  color: #5A6E82;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  line-height: 1.25;
  text-transform: uppercase; }

/* EL ACENTO DE CADA TARJETA: un filete de color a la izquierda y un icono tenue arriba a la
   derecha. Lo pidio Amilcar el 30 de agosto de 2026 mirando las cinco pantallas de un informe de
   turno, donde las tarjetas ademas quedaban apretadas contra el borde izquierdo -eso lo arregla el
   `tarjetas-compactas` que ahora pone y quita `listado.js` segun cuantas haya-.

   LAS TRES CLASES LAS ESCRIBE `listado.js` Y NO LAS VISTAS, asi que esto alcanza de una vez a todos
   los listados que dibujan tarjetas. El tipo lo decide el guion con lo que ya sabe -la primera es
   la cuenta de registros, y de las demas las que llevan `data-simbolo` son de dinero-, nunca
   leyendo el rotulo: eso se romperia en silencio al renombrar una columna.

   EL RELLENO DE LA DERECHA VA EN LAS TRES Y NO EN `.contador`: las tarjetas que una vista escribe a
   mano -«Precios de combustibles», la fila de vencimientos de «Movimientos»- no llevan icono, y con
   el relleno puesto arriba les quedaria un hueco al costado sin nada adentro. */
.contador-registros,
.contador-dinero,
.contador-cantidad {
  padding-right: 34px; }

.contador-icono {
  position: absolute;
  top: 9px;
  right: 11px;
  font-size: 15px;
  opacity: .32; }

.contador-registros {
  border-left: 3px solid #2A3F54; }

.contador-registros .contador-icono {
  color: #2A3F54; }

.contador-dinero {
  border-left: 3px solid #1ABB9C; }

.contador-dinero .contador-icono {
  color: #16987E; }

.contador-cantidad {
  border-left: 3px solid #5A6E82; }

.contador-cantidad .contador-icono {
  color: #5A6E82; }

/* Ambar: algo que conviene mirar y que no es un error -piezas o filas fuera de uso-. Va en ambar
   para que se note sin gritar, y el modelo solo lo dibuja cuando no es cero: una tarjeta en cero
   ocupa el mismo lugar que una con algo que decir, y acostumbra a no leerlas. */
.contador-aviso {
  border-color: #E8C48A;
  background: #FDF6EC; }

.contador-aviso .contador-valor {
  color: #B9770E; }

/* Rojo: algo que hay que resolver, no solo mirar. Hoy lo pide un caso solo -los usuarios sin ningun
   rol, que no alcanzan ninguna pantalla del sistema- y el rojo es el mismo de su etiqueta. */
.contador-alerta {
  border-color: #D9534F;
  background: #FDF1F0; }

.contador-alerta .contador-valor {
  color: #C9302C; }

/* El ambar del candado del renglon, sobre fondo blanco para que no compita con el aviso: son filas
   que el codigo nombra por su numero, o sea que se renombran pero no se eliminan. Informa, no
   reclama, y por eso el fondo queda claro. */
.contador-candado {
  border-color: #E8C48A;
  background: #FFFFFF; }

.contador-candado .contador-valor {
  color: #B9770E; }
/** /tarjetas de contador **/
/** tarjetas de destacado **/
/* La segunda fila del encabezado de un listado, debajo de los contadores. Los contadores dicen
   CUANTOS hay; estas dicen CUAL: un registro concreto que esta en un extremo del rango, con su
   valor y lo justo para reconocerlo. Las arma Models/Listados/MdlDestacado.cs.

   Es, como `.contador*`, un juego SIN prefijo de pantalla y a proposito: la primera que lo usa es
   «Precios de productos» -el mas barato y el mas caro-, pero cualquier listado con una columna
   comparable tiene un extremo que vale la pena mostrar arriba.

   NINGUNO DE LOS DOS TONOS ES UNA ALARMA. El mas barato no es una buena noticia ni el mas caro un
   problema, asi que no llevan el ambar ni el rojo que esta aplicacion reserva para lo que hay que
   mirar o resolver: solo el verde y el azul del tema, que aca no significan nada mas que «esta
   punta» y «la otra». Lo que dice de que extremo se habla es la flecha, no el color.

   NO TIENEN CONTENEDOR PROPIO: van dentro de `.tarjetas-de-encabezado`, la misma fila que los
   contadores. */

/* `flex-basis` de 280px y no un `min-width`: es lo que le pide al reparto de la fila -el contador
   arranca de 0 y este de 280- y ademas lo que hace que en una pantalla angosta caiga entero al
   renglon de abajo en vez de desbordar el panel. */
.destacado {
  display: flex;
  flex: 1 1 280px;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #DAE1E7;
  border-left: 3px solid #C3CED8;
  border-radius: 3px;
  background: #FFFFFF; }

.destacado-icono {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  font-size: 12px; }

/* `min-width: 0` es lo que deja que el titulo se recorte con puntos suspensivos: sin eso un elemento
   flex no baja de su ancho de contenido y el nombre largo estira la tarjeta. */
.destacado-cuerpo {
  flex: 1 1 auto;
  min-width: 0; }

/* Mismo rotulo que la tarjeta de contador, para que las dos filas se lean como una sola cosa. */
.destacado-rotulo {
  display: block;
  color: #5A6E82;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  line-height: 1.25;
  text-transform: uppercase; }

.destacado-titulo {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #2A3F54;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap; }

.destacado-detalle {
  display: block;
  margin-top: 2px;
  color: #73879C;
  font-size: 11.5px;
  line-height: 1.3; }

.destacado-valor {
  flex: 0 0 auto;
  align-self: center;
  color: #2A3F54;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; }

.destacado-menor {
  border-left-color: #1ABB9C; }

.destacado-menor .destacado-icono {
  background: #E4F3EF;
  color: #0E7A66; }

.destacado-mayor {
  border-left-color: #2A3F54; }

.destacado-mayor .destacado-icono {
  background: #E7ECF1;
  color: #2A3F54; }
/** /tarjetas de destacado **/
/** leyenda de tanques **/
/* La franja que dice que color es cada tanque. Sin esto, el borde de color de una manguera no se
   puede decodificar: es la clave del mapa.

   Es un juego SIN prefijo de pantalla, como `.contador*` y `.destacado*`, y por el mismo motivo:
   la piden DOS pantallas -ConfiguracionEstacion/Index y PlantillaDeInformes/Index-, las dos dibujan
   el mismo patio, y las dos reparten los colores con el mismo codigo
   (MdlConfiguracionEstacion.ArmarTanquesElegibles). Estuvo con prefijo `ce-` mientras fue de una
   sola; al pedirla la segunda se extrajo, en vez de dejar dos veces el mismo dibujo con dos nombres.

   Vive al lado de la paleta `tanque-color-N` / `tanque-borde-N` -al final de la seccion siguiente-,
   que es la otra mitad compartida de lo mismo. */
.leyenda-tanques {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid #DAE1E7;
  border-left: 3px solid #73879C;
  border-radius: 3px;
  background: #F7F9FA; }

.leyenda-tanques-rotulo {
  color: #73879C;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase; }

.leyenda-tanque {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #34495E;
  font-size: 12.5px; }

.leyenda-tanque-punto {
  width: 10px;
  height: 10px;
  border-radius: 2px; }

.leyenda-tanque-chapa {
  font-weight: 700; }

.leyenda-tanque-combustible {
  color: #73879C; }

.leyenda-tanques-cola {
  margin-left: auto; }
/** /leyenda de tanques **/
/** configuracion de la estacion **/
/* La pantalla ConfiguracionEstacion/Index: el patio dibujado como es —la isla contiene surtidoras y
   la surtidora contiene mangueras— en lugar de tres listados encadenados, que se retiraron el 7 de
   agosto de 2026 una vez validada esta.

   Todo cuelga del prefijo `ce-`, que no se usa en ninguna otra pantalla, salvo TRES cosas
   compartidas: las tarjetas de contador (`.contador*`), la leyenda de tanques
   (`.leyenda-tanques*`, la seccion de arriba), y las dos familias `tanque-color-N` y
   `tanque-borde-N` del final, que son la paleta de tanques y estan aparte porque el modelo las
   reparte por numero de tanque (ver MdlConfiguracionEstacion.COLORES_DE_TANQUE: si se agregan
   clases aca, hay que subir esa constante o los tanques de mas se quedan sin color). Las tres las
   comparte con PlantillaDeInformes/Index, que dibuja el mismo patio con otra pregunta encima.

   Los colores son los del tema y ya estaban en este archivo: #2A3F54 y #1ABB9C son los del menu
   lateral, #73879C el del texto suave, y los cinco de los iconos -#26B99A, #3498DB, #F39C12,
   #34495E, #9B59B6- los que reparte la paleta de tanques.

   No se usa `campo-de-formulario` para el espaciado del mapa ni ninguna clase del tema: todo el reparto va
   con grid y `gap`, asi que no depende de reglas que la proxima subida de Bootstrap pueda mover. */

/* Los contadores de arriba -cuantas islas, surtidoras, mangueras y tanques hay- usan el juego
   compartido `.contador*` de la seccion anterior. Estaban aca con prefijo `ce-` mientras fue la
   unica pantalla que los tenia; al pedirlos tambien las cinco de Soporte se extrajeron, en vez de
   dejar dos veces el mismo dibujo con dos nombres. */

/* Sin tanques no se puede crear ninguna manguera -IdTanque es obligatorio-, asi que la pantalla lo
   dice antes de que el usuario intente y falle. Los botones de agregar manguera tampoco se dibujan
   en ese caso; lo decide la vista. */
.ce-aviso-sin-tanques {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #E8C48A;
  border-left: 3px solid #F39C12;
  border-radius: 3px;
  background: #FDF6EC;
  color: #7D5B1E;
  font-size: 13px; }

.ce-vacio {
  padding: 40px 20px;
  border: 1px dashed #C3CED8;
  border-radius: 4px;
  text-align: center;
  color: #73879C; }

/* El mapa: una franja por isla, apiladas. La rejilla NO esta aca sino dentro de cada isla, y ese es
   justamente el punto -ver `.ce-isla`-. */
.ce-mapa {
  display: flex;
  flex-direction: column;
  gap: 14px; }

/* --- La isla --- */
/* LA FRANJA: el marcador a la IZQUIERDA y sus surtidoras a la DERECHA, envolviendo en las filas que
   hagan falta. Debajo del marcador nunca cae una surtidora, y el marcador se estira hasta cubrir
   todas las filas de su isla -lo hace el `stretch` de omision de flex, sin calcular nada-.

   POR QUE NO ES UNA SOLA REJILLA PARA TODO EL MAPA. Se probaron las dos anteriores y ninguna daba
   esto: con la isla como celda entera -hasta el 26 de agosto de 2026- las islas cortas dejaban
   huecos muertos debajo; con `display: contents` sobre esta clase las tarjetas formaban un hilo
   continuo, pero la isla siguiente arrancaba a media fila y bajo un marcador caian surtidoras de su
   propia isla. Cubrir N filas desde una sola rejilla pediria `grid-row: 1 / -1`, que NO alcanza a
   las filas implicitas, o un `span` calculado en el servidor —y cuantas columnas entran lo decide
   el navegador con `auto-fill`, no Razor—. Anidando, el estirado sale solo.

   El precio, y es a proposito: el marcador mide 210px fijos y las columnas de surtidora se reparten
   el resto con `1fr`, asi que puede quedar unos pixeles mas angosto que ellas. */
.ce-isla {
  display: flex;
  gap: 14px; }

/* `auto-fill` con un minimo y no un numero fijo de columnas: una isla de dos surtidoras no deja
   cuatro huecos, y una de ocho envuelve sola sin media query. El minimo es 210px y no 250: aquel
   era el ancho de una isla CON sus surtidoras adentro.

   No lleva `align-items`: el `stretch` de omision es el que se quiere -las tarjetas de una fila se
   emparejan en altura y la fila queda recta-. Es lo que obliga a que `.ce-surtidora` sea flex
   column con `.ce-mangueras` en `flex: 1`, o el boton de agregar manguera queda a media altura. */
.ce-isla-surtidoras {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px; }

/* El marcador de la isla: la columna izquierda de su franja, con la identidad visual que antes
   tenia la caja de la isla -el fondo, el filete superior-. `flex: 0 0 210px` lo fija al ancho de
   una columna; la altura se la da el estirado. */
/* El contorno va un escalon por encima del de sus surtidoras -#2A3F54 contra #34495E- y mantiene al
   marcador por delante de las tarjetas que encabeza. Es el mismo color del filete de arriba, asi
   que el marco cierra con el: el filete se lee como un engrosamiento y no como otra pieza. Ya no
   quedan escalones: #2A3F54 es el tope de la escala del tema, el azul del menu lateral. */
.ce-isla-cabecera {
  display: flex;
  flex: 0 0 210px;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #2A3F54;
  border-top: 3px solid #2A3F54;
  border-radius: 4px;
  background: #EDF2F5; }

.ce-isla-identidad-fila {
  display: flex;
  align-items: flex-start;
  gap: 9px; }

/* `margin-top: auto` los ancla al pie: la fila estira la celda a la altura de la mas alta, y sin
   esto los botones quedarian flotando con el blanco debajo. */
.ce-isla-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto; }

.ce-isla-numero {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: #2A3F54;
  color: #fff;
  font-size: 15px;
  font-weight: 700; }

.ce-isla-identidad {
  min-width: 0;
  flex: 1; }

.ce-isla-nombre {
  display: block;
  color: #2A3F54;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25; }

.ce-isla-resumen {
  display: block;
  color: #73879C;
  font-size: 11.5px; }

/* --- La surtidora --- */
/* Flex column, y no el bloque que era, porque ahora es una celda del hilo y la fila la estira a la
   altura de la mas alta: es lo que manda el sobrante al pie en vez de repartirlo. */
/* CONTORNO FUERTE, y es pedido de Amilcar: recorrio la escala del tema entera -#DAE1E7, #C3CED8,
   #AEBAC6, #73879C- hasta este #34495E, que ya no es un gris sino uno de los azules oscuros. La
   tarjeta se lee como una ficha enmarcada y no como un panel apoyado en el fondo.

   Las lineas de ADENTRO se quedan donde estaban, y ahora importa mas que antes: la divisoria de la
   cabecera en #DAE1E7 y la de cada manguera en #EDF2F5. Es el contraste entre el marco oscuro y el
   interior liviano lo que sostiene la jerarquia; subirlas convertiria la tarjeta en una reja. */
.ce-surtidora {
  display: flex;
  flex-direction: column;
  border: 1px solid #34495E;
  border-radius: 3px;
  background: #fff; }

.ce-surtidora-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-bottom: 1px solid #DAE1E7; }

.ce-surtidora-numero {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid #C3CED8;
  border-radius: 3px;
  background: #F7F9FA;
  color: #34495E;
  font-size: 11px;
  font-weight: 700; }

.ce-surtidora-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #2A3F54;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap; }

.ce-surtidora-cuenta {
  color: #73879C;
  font-size: 11px;
  font-variant-numeric: tabular-nums; }

/* El pie de la tarjeta, con «Configurar» y «+ Manguera». `margin-top: auto` los ancla abajo, asi
   que quedan alineados con los de las tarjetas vecinas de la misma fila y de paso ocupan el blanco
   que deja el estirado. El «Configurar» esta aca y no en la cabecera porque arriba, con la chapa
   nombrando tambien la isla, no queda ancho y el nombre de la surtidora se cortaba. */
.ce-surtidora-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding: 6px 9px 9px; }

/* --- La manguera --- */
/* `flex: 1` se come el sobrante de la celda estirada, asi que el boton de agregar manguera queda al
   pie y alineado con el de las tarjetas vecinas de la misma fila. */
.ce-mangueras {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column; }

/* Es un <button> y no un <div> con onclick: asi se alcanza con el teclado y se anuncia como algo
   que se puede activar, sin agregar ni un atributo. Lo que hay que deshacer es la apariencia de
   boton que trae el navegador. */
.ce-manguera {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid #EDF2F5;
  border-left: 3px solid #C3CED8;
  background: transparent;
  font-size: 12px;
  text-align: left; }

.ce-manguera:last-of-type {
  border-bottom: 0; }

.ce-manguera:hover:not(:disabled),
.ce-manguera:focus-visible {
  background: #F0F7F5; }

.ce-manguera:disabled {
  cursor: default; }

.ce-manguera-numero {
  flex: 0 0 auto;
  color: #73879C;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums; }

.ce-manguera-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #34495E;
  text-overflow: ellipsis;
  white-space: nowrap; }

.ce-manguera-tanque {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 9px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700; }

/* --- Lo desusado --- */
/* Se queda en el mapa, apagado y rayado, en vez de desaparecer: si desapareciera nadie podria
   volver a ponerlo en uso desde aca. El rayado es lo que lo distingue de lo vigente sin depender
   solo del color. */
.ce-desusado {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(115, 135, 156, 0.12) 6px 12px); }

.ce-desusado .ce-manguera-nombre,
.ce-desusado .ce-manguera-numero,
.ce-desusado .ce-isla-nombre,
.ce-desusado .ce-surtidora-nombre {
  color: #73879C;
  text-decoration: line-through;
  text-decoration-color: #C3CED8; }

.ce-etiqueta-desusado {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #C3CED8;
  border-radius: 9px;
  color: #73879C;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase; }

/* --- Agregar --- */
.ce-agregar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px;
  border: 1px dashed #C3CED8;
  border-radius: 3px;
  background: transparent;
  color: #73879C;
  font-size: 12px;
  font-weight: 500; }

.ce-agregar:hover,
.ce-agregar:focus-visible {
  border-color: #1ABB9C;
  color: #16A085; }

/* Los dos viven DENTRO de una fila de acciones, al lado de un «Configurar» —el de la manguera en el
   pie de su surtidora, el de la surtidora en el marcador de su isla—: por eso no van a ancho
   completo y se ponen a la altura de aquel boton. */
.ce-agregar-manguera,
.ce-agregar-surtidora {
  width: auto;
  padding: 1px 8px;
  font-size: 11px; }

/* Sin `margin-top`: va debajo de la ultima franja y el `gap` del mapa ya la separa. */
.ce-agregar-isla {
  padding: 13px;
  font-size: 13px; }

.ce-agregar-signo {
  color: #16A085;
  font-size: 14px;
  font-weight: 700; }

/* El boton «Configurar» de la cabecera de una isla o de una surtidora. */
.ce-editar {
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 1px solid #C3CED8;
  border-radius: 3px;
  background: transparent;
  color: #73879C;
  font-size: 11px;
  font-weight: 600; }

.ce-editar:hover,
.ce-editar:focus-visible {
  border-color: #1ABB9C;
  color: #16A085; }

/* --- El formulario de la ventana emergente --- */
.ce-ayuda {
  display: block;
  margin-top: 4px;
  color: #73879C;
  font-size: 11px;
  line-height: 1.45; }

.ce-campo-numero {
  max-width: 110px; }

/* El pie con lo que no es guardar: poner fuera de uso y eliminar. Va en un bloque aparte y DEBAJO
   del formulario, no adentro: son formularios propios -cada uno publica a su accion- y anidar
   formularios no es HTML valido. */
.ce-acciones-extra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #DAE1E7;
  background: #F7F9FA; }

.ce-forma-extra {
  display: inline;
  margin: 0; }

/* El porque de que Eliminar este apagado. Lo muestra y lo esconde configuracion-estacion.js. */
.ce-motivo {
  flex: 1 1 100%;
  color: #C0392B;
  font-size: 11.5px;
  line-height: 1.45; }

/** /configuracion de la estacion **/
/** plantilla de informes **/
/* La pantalla PlantillaDeInformes/Index: que entra en el informe de cada turno, en un solo lugar,
   en vez de tres listados encadenados -IPlantillas y sus hijos de mangueras y productos-, que se
   retiraron una vez validada esta.

   Todo cuelga del prefijo `pi-`, salvo lo compartido: `.contador*` para las tarjetas de arriba,
   `.leyenda-tanques*` para la clave de colores, `tanque-color-N` / `tanque-borde-N` para la paleta,
   y `.columna-numero` para alinear las dos columnas de numeros de la tabla de productos.

   POR QUE LAS MANGUERAS VAN EN MAPA Y LOS PRODUCTOS EN TABLA, que es la decision de forma de esta
   pantalla: una manguera se reconoce por DONDE esta -isla, surtidora, tanque- y el mapa ademas deja
   ver los huecos, que es lo que hoy no se ve en ninguna parte; un producto no esta en ningun lado,
   se reconoce por su nombre y se compara con los otros por su existencia, que es una columna. Son
   dos formas distintas porque los datos son distintos.

   El mapa es deliberadamente parecido al de `ce-` pero NO es el mismo: alla la fila de una manguera
   dice como esta configurada y aca dice si reporta y con que lectura abre. Compartir las reglas
   habria atado dos pantallas que van a divergir; lo que si se comparte es lo que tiene que decir lo
   mismo en las dos -el color del tanque-.

   Los colores son los del tema y ya estaban en este archivo: #2A3F54 y #1ABB9C los del menu
   lateral, #73879C el del texto suave, el ambar -#B9770E sobre #FDF6EC- el de lo que conviene
   mirar, y el rojo -#C9302C sobre #FDF1F0- el de lo que hay que resolver. */

/* --- Avisos y vacios --- */
.pi-vacio {
  padding: 40px 20px;
  border: 1px dashed #C3CED8;
  border-radius: 4px;
  text-align: center;
  color: #73879C; }

/* El ambar de «conviene mirar esto». Lo usa el aviso de la estacion sin patio y, dentro de la
   ventana de agregar, la advertencia de que las lecturas en cero convierten el acumulado del
   contador en venta del proximo turno. */
.pi-aviso {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #E8C48A;
  border-left: 3px solid #F39C12;
  border-radius: 3px;
  background: #FDF6EC;
  color: #7D5B1E;
  font-size: 13px; }

.pi-nada {
  padding: 14px;
  color: #73879C;
  font-size: 13px; }

/* --- La plantilla --- */
.pi-plantilla {
  margin-bottom: 16px;
  border: 1px solid #C3CED8;
  border-top: 3px solid #2A3F54;
  border-radius: 4px; }

.pi-plantilla-cabecera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  padding: 11px 13px;
  border-bottom: 1px solid #D8E0E6;
  background: #EDF2F5; }

/* El nombre ES el boton que contrae y expande la plantilla, asi que hay que sacarle el aspecto de
   boton que le pone el navegador -fondo, borde, relleno, la fuente del sistema- y devolverle el del
   texto que ya era: quien mira tiene que ver el titulo de siempre, no un control nuevo.

   EL ESTADO NO SE GUARDA EN NINGUNA CLASE: sale de `aria-expanded`, que es el atributo que ademas
   lee el lector de pantalla. Con una clase habria dos verdades que se pueden desincronizar, y el
   sintoma seria una flecha apuntando al reves de lo que esta pasando. */
.pi-plantilla-nombre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #2A3F54;
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer; }

.pi-plantilla-nombre:hover,
.pi-plantilla-nombre:focus-visible {
  color: #16987E; }

/* La flecha va dibujada con bordes y no con un glifo de Font Awesome: girarla es una linea, y asi
   no depende de que la fuente de iconos haya cargado. Apunta a la derecha cerrada y abajo abierta,
   que es como se lee en el resto del sistema. */
.pi-plantilla-nombre::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #73879C;
  transition: transform 0.15s ease; }

.pi-plantilla-nombre[aria-expanded="true"]::before {
  transform: rotate(90deg); }

.pi-plantilla-resumen {
  color: #73879C;
  font-size: 12px; }

/* Los informes emitidos van como candado y no como contador suelto: no son un dato mas, son EL
   motivo por el que esta plantilla no se puede eliminar. Mismo ambar que `.contador-candado`, que
   marca las filas que se renombran pero no se borran. */
.pi-chapa-informes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid #E8C48A;
  border-radius: 10px;
  background: #FDF6EC;
  color: #7D5B1E;
  font-size: 11px;
  font-weight: 600; }

.pi-editar {
  padding: 3px 10px;
  border: 1px solid #C3CED8;
  border-radius: 3px;
  background: #fff;
  color: #5A738E;
  font-size: 11.5px; }

.pi-editar:hover,
.pi-editar:focus-visible {
  border-color: #1ABB9C;
  color: #16987E; }

.pi-plantilla-cabecera .pi-editar {
  margin-left: auto; }

.pi-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 13px; }

/* El cuerpo de una plantilla contraida. Hace falta escribirlo porque el `[hidden] { display: none }`
   de la hoja del navegador PIERDE contra cualquier `display` declarado, y el de arriba es `flex`:
   es la misma trampa que ya tienen las cuatro cosas que esconde la busqueda de productos, mas
   abajo en esta seccion. Sin esta regla el atributo se pone y no esconde nada. */
.pi-cuerpo[hidden] {
  display: none; }

/* --- El rotulo de cada mitad --- */
.pi-seccion-titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 11px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E6E9ED; }

.pi-seccion-titulo h4 {
  margin: 0;
  color: #2A3F54;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase; }

.pi-seccion-cuenta {
  color: #73879C;
  font-size: 12px; }

.pi-seccion-cola {
  margin-left: auto;
  font-size: 12px; }

/* --- El mapa --- */
/* UNA FRANJA POR ISLA, APILADAS, igual que el del patio: el reparto de las dos pantallas es el
   mismo a proposito -pedido de Amilcar el 27 de agosto de 2026- porque dibujan el mismo patio y
   leerlas distinto obligaba a reaprender cual tarjeta cuelga de cual isla. La rejilla NO esta aca
   sino dentro de cada isla, en `.pi-isla-surtidoras`; el porque del anidado esta escrito en
   `.ce-isla` y no se repite.

   Aca vivia un `align-items: start` que ya no hace falta y por eso se fue: existia porque las islas
   eran celdas de ESTA rejilla y, estiradas a la altura de la mas alta, la corta quedaba con medio
   recuadro vacio debajo de su ultima manguera. Apiladas, cada franja mide lo suyo. */
.pi-mapa {
  display: flex;
  flex-direction: column;
  gap: 14px; }

/* LA FRANJA: el marcador a la IZQUIERDA y sus surtidoras a la DERECHA, envolviendo en las filas que
   hagan falta. Debajo del marcador nunca cae una surtidora, y el marcador se estira hasta cubrir
   todas las filas de su isla -lo hace el `stretch` de omision de flex, sin calcular nada-. */
.pi-isla {
  display: flex;
  gap: 14px; }

/* `auto-fill` con un minimo y no un numero fijo de columnas: una isla de dos surtidoras no deja
   cuatro huecos y una de ocho envuelve sola. El minimo es mayor que el del patio -330px contra
   210- porque aca la fila de la manguera lleva ademas su lectura de arrastre.

   No lleva `align-items`: el `stretch` de omision es el que se quiere -las tarjetas de una fila se
   emparejan en altura y la fila queda recta-. Es lo que obliga a que `.pi-surtidora` sea flex
   column con `.pi-mangueras` en `flex: 1`, o el sobrante se reparte entre las mangueras en vez de
   irse al pie. */
.pi-isla-surtidoras {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px; }

/* El marcador de la isla: la columna izquierda de su franja, con la identidad visual que antes
   tenia la caja de la isla -el fondo, el filete superior-. `flex: 0 0 210px` lo fija al ancho de
   una columna del patio; la altura se la da el estirado.

   El contorno va un escalon por encima del de sus surtidoras -#2A3F54 contra #34495E-, que es el
   mismo par que usa el patio: el marcador queda por delante de las tarjetas que encabeza y el
   filete de arriba se lee como un engrosamiento y no como otra pieza. */
.pi-isla-cabecera {
  display: flex;
  align-items: flex-start;
  flex: 0 0 210px;
  gap: 9px;
  padding: 12px;
  border: 1px solid #2A3F54;
  border-top: 3px solid #2A3F54;
  border-radius: 4px;
  background: #EDF2F5; }

.pi-isla-numero {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: #2A3F54;
  color: #fff;
  font-size: 15px;
  font-weight: 700; }

.pi-isla-identidad {
  min-width: 0;
  flex: 1; }

.pi-isla-nombre {
  display: block;
  color: #2A3F54;
  font-size: 14.5px;
  font-weight: 600; }

.pi-isla-resumen {
  display: block;
  color: #73879C;
  font-size: 11.5px; }

/* Flex column, y no el bloque que era, porque ahora es una celda de la rejilla de su isla y la fila
   la estira a la altura de la mas alta: es lo que manda el sobrante al pie en vez de repartirlo
   entre las mangueras.

   CONTORNO FUERTE, el mismo #34495E de las tarjetas del patio y por el mismo motivo: la tarjeta se
   lee como una ficha enmarcada y no como un panel apoyado en el fondo. Las lineas de ADENTRO se
   quedan claras -la divisoria de la cabecera y la de cada manguera-: es el contraste entre el marco
   oscuro y el interior liviano lo que sostiene la jerarquia. */
.pi-surtidora {
  display: flex;
  flex-direction: column;
  border: 1px solid #34495E;
  border-radius: 3px;
  background: #fff; }

.pi-surtidora-cabecera {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-bottom: 1px solid #EDF2F5; }

.pi-surtidora-numero {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  border-radius: 3px;
  background: #73879C;
  color: #fff;
  font-size: 11px;
  font-weight: 700; }

.pi-surtidora-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #34495E;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap; }

/* Cuantas de esta surtidora reportan sobre cuantas tiene. Es el dato que hace que el hueco se vea
   sin contar renglones. */
.pi-surtidora-cuenta {
  color: #73879C;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* `flex: 1 1 auto` se come el sobrante de la celda estirada. Sin el, el sobrante se reparte entre
   las mangueras y cada una queda mas alta que la de la tarjeta de al lado: las filas de una misma
   surtidora dejan de alinearse con las vecinas, que es justo lo que la fila pareja busca. */
.pi-mangueras {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column; }

/* Es un <button> y no un <div> con onclick: asi se alcanza con el teclado y se anuncia como algo que
   se puede activar, sin agregar ni un atributo. Lo que hay que deshacer es la apariencia de boton
   que trae el navegador. */
.pi-manguera {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 9px;
  border: 0;
  border-bottom: 1px solid #EDF2F5;
  border-left: 3px solid #C3CED8;
  background: transparent;
  font-size: 12px;
  text-align: left; }

.pi-manguera:last-child {
  border-bottom: 0; }

.pi-manguera:hover:not(:disabled),
.pi-manguera:focus-visible {
  background: #F0F7F5; }

.pi-manguera:disabled {
  cursor: default; }

.pi-manguera-numero {
  flex: 0 0 auto;
  color: #73879C;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums; }

.pi-manguera-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #34495E;
  text-overflow: ellipsis;
  white-space: nowrap; }

.pi-manguera-tanque {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 9px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center; }

/* La lectura mecanica con la que la manguera abre el proximo turno. Ancho fijo y `tabular-nums`
   para que la columna se pueda leer de arriba abajo aunque cada fila sea un boton. */
.pi-manguera-arrastre {
  flex: 0 0 auto;
  min-width: 76px;
  color: #34495E;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right; }

/* Un arrastre en cero no es un error -una boca estrenada arranca asi- pero conviene mirarlo, asi
   que va en el ambar de siempre y no en rojo. */
.pi-sin-arrastre {
  color: #B9770E;
  font-weight: 600; }

/* --- Entra o no entra al informe --- */
/* El estado se dice de DOS formas y no solo con el color: la marca de la izquierda -llena o vacia-
   y el rayado del fondo. Es la misma regla que `.ce-desusado`, y por el mismo motivo: el color solo
   no alcanza. */
.pi-marca {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1; }

/* EN LA TABLA DE PRODUCTOS LA MARCA *ES* EL BOTON que abre la ventana. En el mapa lo es la fila
   entera de la manguera y la marca va adentro como un `<span>`; en una tabla eso no se puede -un
   `<tr>` no es un boton-, asi que lo lleva la marca, que es lo que se pulsa. De ahi el `padding`, el
   `border` y el `background` de arriba: son para sacarle el aspecto de boton del navegador, y el
   borde se lo devuelven las dos reglas de abajo segun entre al informe o no.

   `:not(:disabled)` en las dos: la marca de quien solo mira no tiene que parecer pulsable. */
button.pi-marca:not(:disabled) {
  cursor: pointer; }

button.pi-marca:hover:not(:disabled),
button.pi-marca:focus-visible {
  border-color: #1ABB9C;
  color: #16987E; }

/* SIN FONDO, y es deliberado. La marca era un cuadro verde lleno, y desde que el color del filete
   dice el combustible ese verde competia con el de la gasolina 95: la pantalla se llenaba de verde
   y el mapa de combustibles -que es lo que se quiere leer de un vistazo- se perdia entre las
   marcas. Ahora la marca es solo gancho y borde oscuros, sin color propio, asi que el unico color
   de la pantalla es el del combustible. Lo pidio Amilcar el 26 de agosto de 2026.

   El estado se sigue diciendo de DOS formas y no solo con el gancho: la marca llena o vacia y el
   rayado del fondo. */
.pi-entra .pi-marca,
tr.pi-entra .pi-marca {
  border: 1px solid #34495E;
  background: transparent;
  color: #2A3F54; }

.pi-no-entra .pi-marca,
tr.pi-no-entra .pi-marca {
  border: 1px solid #C3CED8;
  background: #fff; }

.pi-no-entra {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(115, 135, 156, 0.1) 6px 12px); }

.pi-no-entra .pi-manguera-nombre,
.pi-no-entra .pi-manguera-numero {
  color: #93A3B2; }

tr.pi-no-entra td {
  color: #93A3B2; }

/* La etiqueta de estado del renglon. Gris cuando solo informa -«no reporta»- y roja cuando hay algo
   que resolver: una pieza fuera de uso que igual entra al informe sigue reportando. */
.pi-etiqueta {
  display: inline-block;
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 9px;
  background: #F1F4F7;
  color: #73879C;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px; }

.pi-etiqueta-alerta {
  background: #FDF1F0;
  color: #C9302C; }

/* --- La tabla de productos --- */
/* Dos columnas de tabla, no una tabla larga: ESCOTECHI tiene 34 productos y Auto Servicios 64, y de
   una sola tirada el final queda media pantalla mas abajo. El reparto en columnas lo hace el
   servidor (MdlPlantillaEnPantalla.ColumnasDeProductos), asi que aca solo se las pone lado a lado.

   Tres cosas de la grilla que no son gusto:

   - `auto-fit` y no `auto-fill`, para que la pista vacia se colapse cuando hay una sola tabla.
   - El tope de 640px va en la TABLA y no en la pista. Puesto en la pista -minmax(420px, 640px)- el
     navegador cuenta cuantas pistas entran usando el maximo, no el minimo: 640+18 no entra dos
     veces en el ancho disponible, asi que armaba UNA sola pista y las dos tablas quedaban una
     debajo de la otra. Con `1fr` la cuenta la hace con el minimo y entran las dos; el tope de la
     tabla solo actua cuando hay una sola, que si no se dibujaria a lo ancho de la pantalla y el
     precio quedaria a media pantalla de su nombre -justo lo que evitan los anchos de mas abajo-.
   - `align-items: start` por lo mismo que el mapa de arriba: sin eso la columna corta se estira
     hasta la altura de la larga y queda medio recuadro vacio.

   `min-width: 0` en las hijas porque una tabla ancha, sin eso, empuja la pista de la grilla y la
   pantalla termina con barra horizontal. */
.pi-columnas-de-productos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  align-items: start;
  gap: 6px 18px; }

.pi-columnas-de-productos > * {
  min-width: 0;
  max-width: 640px; }

.pi-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px; }

.pi-tabla th {
  padding: 6px 9px;
  border-bottom: 2px solid #E6E9ED;
  color: #5A6E82;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap; }

/* LA MISMA TRAMPA DE ESPECIFICIDAD QUE YA COSTO UNA VUELTA CON DATATABLES, por otra via: la regla
   de arriba es `.pi-tabla th` -una clase y un elemento- y le gana a `.columna-numero`, que es una
   clase sola. Sin esto, el dato se va a la derecha y su rotulo se queda a la izquierda, que es
   exactamente lo que la regla de alineacion viene a evitar. Se vio fotografiando la pantalla. */
.pi-tabla th.columna-numero {
  text-align: right; }

.pi-tabla td {
  padding: 5px 9px;
  border-bottom: 1px solid #F2F5F7; }

/* El nombre del producto se lleva el ancho sobrante y las dos columnas de numeros quedan juntas a
   la derecha, al lado de su boton. Sin anchos, la tabla reparte parejo y el precio termina a media
   pantalla de su rotulo.

   Son estrechas -y por eso «Existencia que arrastra» parte su rotulo en dos renglones- porque la
   tabla vive en media pantalla desde que va en dos columnas. Con los anchos de antes el nombre del
   producto se quedaba sin lugar y era EL NOMBRE el que partia en dos, en cada renglon: un rotulo
   partido cuesta un renglon una vez, un nombre partido cuesta uno por producto. */
.pi-tabla .pi-columna-precio {
  width: 70px; }

.pi-tabla .pi-columna-existencia {
  width: 95px; }

/* El renglon de corte de categoria. Lo dibuja el servidor y no un guion, al reves que en «Precios
   de productos»: esta tabla no pasa por DataTables -no se ordena ni se pagina, se recorre-, asi que
   no hay ningun `draw` que pueda volver a borrarlo. */
.pi-grupo td {
  padding: 5px 9px;
  border-bottom: 1px solid #D8E0E6;
  background: #EDF2F5;
  color: #2A3F54;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

/* Cuando una categoria se parte entre las dos columnas, el encabezado se repite arriba de la
   segunda mitad y lo dice: sin esto, el mismo rotulo dos veces se lee como dos categorias con el
   mismo nombre. En minusculas y sin negrita, para que no compita con el nombre. */
.pi-grupo-sigue {
  margin-left: 8px;
  color: #73879C;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none; }

/* La columna de la marca. Era la primera de cinco; hoy son cuatro: la de la derecha, que llevaba el
   boton «Configurar», se retiro cuando la marca paso a ser ella misma el boton -su regla
   `.pi-celda-accion` se fue con ella-. */
.pi-celda-marca {
  width: 26px; }

/* --- La busqueda de la tabla de productos --- */
/* La misma caja que «Precios de productos», pero angosta y empujada a la derecha: alla vive en una
   cabecera propia y puede ocupar el 100%, aca comparte la fila del titulo de la seccion con el
   rotulo, la cuenta y el enlace a los precios.

   El `margin-left: auto` la manda al extremo derecho; `.pi-seccion-cola`, que va detras, tambien lo
   lleva y ya no encuentra espacio libre que absorber, asi que los dos quedan juntos en esa punta. */
.pi-buscador {
  width: 200px;
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid #CCD1D6;
  border-radius: 0;
  background: #FFFFFF;
  color: #2A3F54;
  font-size: 12px; }

.pi-buscador:focus {
  outline: 2px solid #2A3F54;
  outline-offset: -2px; }

.pi-buscador::placeholder {
  color: #A3AFB8; }

/* El «N a la vista» que el guion escribe solo mientras hay algo escrito en la caja. Vacio no ocupa
   lugar, asi que la fila se ve igual que antes hasta que alguien busca. */
.pi-a-la-vista {
  color: #73879C;
  font-size: 12px; }

/* LA TRAMPA DEL `hidden`, que en `pdc-`, en `pcb-` y en `pp-` costo media hora cada vez: el atributo
   viene de la hoja del navegador y PIERDE contra cualquier `display` declarado en una hoja de autor.

   HOY NINGUNO DE ESTOS CUATRO DECLARA `display` -son dos <tr>, un <div> cuyo unico aporte de
   `.table-responsive` es `overflow-x`, y un <p>-, asi que el atributo alcanzaria solo. Estan
   escritas igual porque el dia que a cualquiera de las cuatro se le ponga un `display` -volver el
   renglon una rejilla es el cambio mas probable- la busqueda dejaria de esconder nada sin que se
   rompa nada mas, que es justamente lo que hace que el defecto cueste tanto de encontrar.

   Van con el selector de elemento MAS atributo -0,1,1- para ganarle a la clase sola -0,1,0- sin
   `!important`, que en esta hoja no se usa. */
.pi-producto[hidden],
.pi-grupo[hidden],
.pi-columna-de-productos[hidden],
.pi-sin-coincidencias[hidden] {
  display: none; }

/* --- Las ventanas emergentes --- */
.pi-ayuda {
  display: block;
  margin-top: 4px;
  color: #73879C;
  font-size: 11.5px;
  line-height: 1.45; }

.pi-ubicacion {
  margin-bottom: 12px;
  color: #73879C;
  font-size: 12.5px; }

/* Los tres arrastres, uno al lado del otro: se leen juntos porque el informe los usa juntos. En una
   ventana angosta caen a una columna solos. */
.pi-arrastres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; }

.pi-arrastres-uno {
  grid-template-columns: 1fr; }

/* Es un <output> y no un <input readonly>: no se edita acá -lo escribe el cierre de turno- y un
   campo con aspecto de campo invita a escribir en el. */
.pi-arrastre-valor {
  display: block;
  padding: 5px 9px;
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #F7F9FA;
  color: #34495E;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right; }

.pi-campo-numero {
  max-width: 160px;
  text-align: right; }

@media (max-width: 480px) {
  .pi-arrastres {
    grid-template-columns: 1fr; }
}

/* Lo que no es guardar el formulario va abajo y separado por una linea punteada: son acciones sobre
   el registro y no campos suyos. Mismo dibujo que `.ce-acciones-extra`. */
.pi-acciones-extra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 11px 14px;
  border-top: 1px dashed #DAE1E7;
  background: #FBFCFD; }

.pi-forma-extra {
  margin: 0; }

.pi-motivo {
  flex: 1 1 190px;
  color: #73879C;
  font-size: 11.5px;
  line-height: 1.45; }
/** /plantilla de informes **/
/** plantilla de turnos **/
/* La pantalla PlantillaDeTurnos/Index: los turnos de trabajo del dia, uno por renglon y en el orden
   del dia, en lugar de un listado de una sola columna con el nombre.

   POR QUE TARJETAS Y NO TABLA: son 14 turnos entre las cuatro estaciones -tres o cuatro cada una-,
   asi que el buscador y el paginador del marco de listado no filtraban ni paginaban nada. Y POR QUE
   UNA POR RENGLON Y NO EN REJILLA: cada turno tiene que decir una frase entera -«1,529 informes, del
   02/07/2020 al 18/09/2024, 1 abierto desde el 26/07/2022»- y en una tarjeta angosta eso se parte en
   cuatro lineas. Amilcar eligio esta forma entre dos maquetas.

   Todo cuelga del prefijo `pt-`, salvo lo compartido: `.contador*` para las tarjetas de arriba,
   `.encabezado-de-listado*` para la barra de acciones y `.tabla-de-exportacion` para el PDF. */

.pt-nada {
  padding: 14px;
  color: #73879C;
  font-size: 13px; }

.pt-tira {
  display: flex;
  flex-direction: column;
  gap: 8px; }

/* Las cinco columnas del renglon: el numero de orden, quien es, cuanto lleva, como esta, y que se
   puede hacer con el. Los minimos de las tres del medio estan puestos para que ninguna parta su
   texto en dos renglones con los datos reales mas largos -«Del 02/07/2020 al 18/09/2024»-. */
.pt-turno {
  display: grid;
  grid-template-columns: 46px minmax(150px, 1.1fr) minmax(110px, .7fr) minmax(215px, 1.4fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #E6E9ED;
  border-left: 3px solid #2A3F54;
  border-radius: 3px;
  background: #fff; }

/* Ambar y no rojo: un informe todavia abierto es lo normal durante el dia. Lo que la pantalla
   aporta es DESDE CUANDO lo esta, que es lo unico que puede convertirlo en un problema. */
.pt-turno-abierto {
  border-left-color: #F39C12; }

.pt-orden {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2A3F54;
  color: #fff;
  font-size: 15px;
  font-weight: 700; }

.pt-turno-abierto .pt-orden {
  background: #F39C12; }

.pt-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

.pt-nombre {
  color: #2A3F54;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25; }

.pt-creado {
  color: #73879C;
  font-size: 12px; }

.pt-cifra {
  display: flex;
  flex-direction: column;
  min-width: 0; }

.pt-cifra-valor {
  color: #2A3F54;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; }

.pt-cifra-rotulo {
  color: #73879C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

.pt-estado {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 12.5px; }

.pt-linea {
  color: #4A5A6A; }

.pt-tenue {
  color: #73879C; }

.pt-aviso {
  color: #B9770E;
  font-weight: 700; }

.pt-acciones {
  display: flex;
  gap: 6px;
  justify-content: flex-end; }

/* El formulario de eliminar es un <form> propio dentro del renglon: sin esto se lleva el ancho de
   una fila entera y empuja el boton de al lado a la linea de abajo. */
.pt-forma {
  display: inline; }

.pt-boton {
  padding: 4px 10px;
  border: 1px solid #CCD3DA;
  border-radius: 3px;
  background: #fff;
  color: #4A5A6A;
  font-size: 12.5px;
  white-space: nowrap; }

.pt-boton:hover {
  border-color: #AEBAC6;
  background: #F7F9FA; }

.pt-boton-peligro {
  border-color: #E6B0AE;
  color: #C9302C; }

.pt-boton-peligro:hover {
  border-color: #C9302C;
  background: #FDF1F0; }

/* El «Eliminar» que no se puede usar. Va como <span> y no como <button disabled> porque un elemento
   deshabilitado no dispara eventos de raton y su title -que es el motivo, o sea todo el punto- no
   se mostraria nunca. `cursor: help` avisa de que hay algo que leer ahi. */
.pt-boton-apagado {
  display: inline-block;
  border-color: #E6E9ED;
  background: #F2F5F7;
  color: #AEBAC6;
  cursor: help; }

.pt-ayuda {
  display: block;
  margin-top: 4px;
  color: #73879C;
  font-size: 11.5px;
  line-height: 1.45; }

/* En pantalla angosta el renglon se apila: el numero y el nombre arriba, y lo demas debajo. Sin
   esto las cinco columnas se aprietan hasta que los numeros parten en dos. */
@media (max-width: 820px) {
  .pt-turno {
    grid-template-columns: 46px 1fr; }
  .pt-acciones {
    grid-column: 1 / -1;
    justify-content: flex-start; } }
/** /plantilla de turnos **/
/** control de informes **/
/* La pantalla ControlDeInformes/Index: los dias de un periodo contra los turnos de la estacion, con
   los informes que hay en cada cruce.

   POR QUE UNA MATRIZ Y NO LA MAESTRO-DETALLE DE «INFORMES DIARIOS». Las dos pantallas miran las
   mismas dos entidades pero contestan preguntas distintas. Aquella muestra la jornada que se esta
   trabajando -su tira lista solo los dias abiertos- y sirve para el dia a dia. Esta mira un periodo
   ya pasado de un golpe para encontrar los HUECOS: los cruces (dia, turno) que nunca recibieron su
   informe. Un hueco solo se ve cuando estan todos los dias y todos los turnos a la vez, y eso es una
   matriz. Pedido de Amilcar del 30 de agosto de 2026.

   EL PREFIJO ES `cdi-` Y NO `ci-`, que serian las iniciales como en `ce-`, `pi-` y `pt-`: con dos
   letras toda busqueda en el proyecto -y la del verificador de clases huerfanas- se llena de
   coincidencias. La tercera letra vale eso.

   Lo compartido no lleva prefijo: `.contador*` para las tarjetas de arriba,
   `.encabezado-de-listado*` para la barra de acciones y `.accion-fila*` para los iconos de cada
   informe. */

.cdi-nada {
  padding: 14px;
  color: #73879C;
  font-size: 13px; }

.cdi-tenue {
  color: #73879C;
  font-size: 12px; }

.cdi-ayuda {
  display: block;
  margin-top: 4px;
  color: #73879C;
  font-size: 11.5px;
  line-height: 1.45; }

/* El rango elegido, arriba de la matriz. Amilcar lo pidio a la vista: la matriz no dice por si sola
   hasta donde llega cuando el periodo no tiene ningun dia cargado. */
.cdi-periodo {
  margin-bottom: 4px;
  color: #2A3F54;
  font-size: 14px; }

.cdi-periodo-rotulo {
  margin-right: 6px;
  color: #73879C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

/* ----- Lo que queda fijo al desplazar ----- */

/* ACA VIVIAN `--cdi-tope-barra`, `--cdi-tope-matriz` y `.cdi-barra`, y se retiraron el 30 de agosto
   de 2026, el mismo dia que se estrenaron. El comentario que acompañaba a `.cdi-barra` decia que la
   clase era propia «y no se le agrega a `encabezado-de-listado`, que la usan los 47 listados y
   ninguno la quiere fija»; ese mismo dia Amilcar pidio lo contrario -que se fije en todas-, asi que
   la franja pegajosa es ahora del sistema y no de esta pantalla.

   Lo que quedo, y donde: las tres capas y sus alturas estan en el `:root` de mas arriba, al lado de
   `.top_nav`, y la franja de acciones se pega desde `.encabezado-de-listado`. Esta pantalla no
   agrega nada por su cuenta salvo el encabezado de SU matriz, que esta abajo: no es un
   `table.dataTable`, asi que la regla de los listados no lo alcanza. */

/* ----- La matriz ----- */

/* EL MARCO YA NO DESPLAZA NADA, y eso es lo que permite que el encabezado se pegue A LA PANTALLA.
   Hasta el 30 de agosto de 2026 tenia `overflow-x: auto` -para que la matriz se desplazara a lo
   ancho ella sola en vez de arrastrar el menu- y despues un `max-height` para que se desplazara a lo
   alto adentro de si misma. Las dos cosas se retiraron el mismo dia, por pedido de Amilcar, y el
   motivo es uno solo:

   `position: sticky` SE RESUELVE CONTRA EL ANCESTRO QUE DESPLAZA. Mientras el marco fuera ese
   ancestro, el encabezado solo podia pegarse al borde DEL MARCO, que esta a media pantalla. Para
   que se pegue al borde de la VENTANA no puede haber ningun ancestro con `overflow`, y este era el
   unico -comprobado recorriendo la cadena entera hasta <html>: `.x_panel` y `.right_col` estan en
   `visible`-.

   LO QUE SE PIERDE, dicho para que no sorprenda: con muchas columnas la tabla ya no se desplaza
   sola, la desplaza la pagina, y eso arrastra el menu lateral. Hoy no pasa -son 4 turnos y la
   matriz entra de sobra, medido hasta en 760 px de ancho-, y si algun dia pasa la salida NO es
   reponer el `overflow`, que devuelve el encabezado adentro del marco sin que nada avise: es
   angostar las columnas. */
.cdi-marco {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #fff; }

.cdi-matriz {
  width: 100%;
  border-collapse: collapse; }

.cdi-matriz th,
.cdi-matriz td {
  border-bottom: 1px solid #F0F2F4;
  border-right: 1px solid #F0F2F4;
  vertical-align: top; }

/* LOS TURNOS QUEDAN FIJOS EN LA PANTALLA al recorrer los dias, debajo de las otras dos barras: de
   ahi el `top` sumado, que sale de `--tope-del-encabezado`, la misma altura a la que se pegan los
   titulos de columna de los listados. La regla de aquellos es `table.dataTable thead th` y no
   alcanza a esta matriz, que no la monta DataTables; lo unico que comparten es la altura.

   Y VAN DESTACADOS, en el azul del tema sobre blanco, por pedido de Amilcar del 30 de agosto de
   2026. El gris claro que tenian alcanzaba mientras el encabezado vivia adentro de un marco con
   borde; despegado y flotando sobre las calcomanias necesita pesar mas que ellas, o la fila de
   turnos se lee como una fila mas de la matriz. El `#2A3F54` no es un color nuevo: es el del menu
   lateral y el de los titulos, o sea el mas fuerte que la aplicacion ya reserva.

   LOS DOS BORDES SE DIBUJAN CON `box-shadow` Y NO CON `border`, y hay que dejarlo escrito porque el
   sintoma es raro: con `border-collapse: collapse` el borde no le pertenece a la celda sino a la
   tabla, asi que al despegarse el encabezado SE QUEDA ATRAS y la fila de turnos flota sobre las
   celdas sin nada que la separe. La sombra interior si viaja con la celda. El separador vertical
   ahora va en blanco translucido, que es lo que se ve sobre el fondo oscuro, y la sombra de abajo
   despega la barra de la primera fila. */
.cdi-matriz thead th {
  position: sticky;
  top: var(--tope-del-encabezado);
  z-index: 10;
  padding: 10px 11px;
  border: 0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .13), 0 2px 4px rgba(42, 63, 84, .18);
  background: #2A3F54;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap; }

/* La columna de la fecha queda fija al desplazar a lo ancho: una fila de dias sin su fecha a la
   vista no se puede leer. El fondo es opaco a proposito -las celdas pasan POR DEBAJO- y el
   `z-index` la deja encima de ellas. */
.cdi-columna-fecha {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 132px;
  padding: 7px 11px;
  background: #fff;
  text-align: left; }

/* La esquina: pegajosa por los DOS ejes a la vez -arriba con el resto del encabezado, a la
   izquierda con el resto de su columna-, asi que va por encima de las dos y se lleva el `z-index`
   mas alto de la matriz. El fondo lo hereda del encabezado; lo que NO puede heredar es el `#fff`
   de `.cdi-columna-fecha`, que ganaria por venir despues y le dejaria un hueco blanco a la
   esquina. */
.cdi-matriz thead .cdi-columna-fecha {
  z-index: 11;
  background: #2A3F54; }

/* El ambar del dia abierto es la misma convencion que en «informes diarios»: dice «esto sigue en
   juego», no «esto esta mal». */
.cdi-matriz tbody .cdi-dia-abierto {
  border-left: 3px solid #F0AD4E; }

/* Lleva el dia de la semana adelante -«Mie. 27/05/2026»-, asi que ya no es solo numeros y el
   `tabular-nums` se queda igual: es lo que alinea las cifras de la fecha entre renglones.

   NO DECLARA `color`: vive dentro de la calcomania y lo hereda de ella, que es lo que hace que la
   fecha y su estado se lean como una sola cosa. */
.cdi-fecha {
  display: block;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums; }

.cdi-columna-fecha .cdi-tenue {
  display: block; }

/* ----- Las calcomanias ----- */

/* CADA DIA Y CADA INFORME SE DIBUJAN SOBRE UNA CALCOMANIA DE COLOR. Pedido de Amilcar del 30 de
   agosto de 2026. Antes el color lo llevaba solo la pastilla del estado, que era el objeto mas chico
   de la columna: la fecha -que es lo que uno busca al recorrer- iba suelta sobre el blanco.

   LA DEL DIA SE LLEVA ADENTRO SUS BOTONES -el «+ Agregar» y el tacho-, tambien por pedido suyo. No
   es solo prolijidad: la calcomania pasa a ser «el dia» entero y no una etiqueta pegada encima de
   unos controles sueltos, y con eso la columna deja de tener dos objetos por fila que hay que leer
   como uno. Es lo mismo que ya hace `.cdi-informe` una altura mas abajo, donde el nombre y sus tres
   iconos comparten un solo recuadro.

   EL COLOR ES EL ESTADO, NO EL TIPO. Repartir una paleta por tipo de informe -o por numero- ya se
   hizo en esta aplicacion con `tanque-color-N` y se retiro el 26 de agosto de 2026: un color que no
   significa nada que el usuario pueda nombrar no se aprende nunca. Aca son tres, los tres que la
   aplicacion ya reserva, y quieren decir lo mismo en las dos alturas de la matriz:

     ambar  `#FDF6EC`  esto sigue en juego   - el del dia abierto de «informes diarios»
     azul   `#EDF2F7`  esto ya paso, esta    - el gris azulado del texto del tema
     verde  `#E8F8F5`  aca falta y se puede  - el mismo `#1ABB9C` del «+ Agregar» de al lado

   NINGUNO ES ROJO, que un dia este cerrado o sin cargar no es un error, y el rojo de la matriz ya
   significa «esto se borra».

   LAS TRES SE APLICAN TAMBIEN A `.cdi-informe`, y por eso solo declaran color: la forma la pone la
   clase de cada altura. Los nombres los reparte `MdlControlDeInformes`, no la vista -las constantes
   `CALCO_*`-, asi que no estan escritos en ningun `.cshtml` y el verificador de clases huerfanas no
   los ve: lo cubre `PruebasControlDeInformes.CadaCalcomania_TieneSuReglaEnLaHoja`. */
.cdi-calco {
  display: inline-block;
  padding: 5px 9px 6px 9px;
  border: 1px solid transparent;
  border-radius: 5px; }

/* Debajo de la fecha y dentro del mismo fondo.

   NO SE ESCRIBE CUANDO HAY UN BOTON QUE DICE LO MISMO: el «+ Agregar» de un dia sin cargar ya lo
   dice, asi que la vista se salta la palabra ahi -pedido de Amilcar-. Se sigue escribiendo para
   quien NO puede cargar el dia, que no ve ningun boton: sin el, esa fila diria su estado solo con el
   color, y esa es la lectura que la palabra esta para no obligar. A la distancia de una pantalla de
   estacion el tono se pierde, y quien no distingue el ambar del verde lee «Abierto» igual. */
.cdi-calco-estado {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  opacity: .78; }

.cdi-calco-abierto {
  border-color: #F3DCB8;
  background: #FDF6EC;
  color: #96600A; }

.cdi-calco-cerrado {
  border-color: #DAE3EC;
  background: #EDF2F7;
  color: #3D5871; }

.cdi-calco-sin-cargar {
  border-color: #B5E5DA;
  background: #E8F8F5;
  color: #12836D; }

/* Los botones del dia, DENTRO de la calcomania. El renglon propio es lo que los separa de la fecha
   sin necesidad de una linea divisoria: son pocos -uno, casi siempre- y no hace falta el filete que
   sí lleva `.cdi-informe-acciones`, donde son tres iconos seguidos. */
.cdi-acciones-dia {
  display: block;
  margin-top: 4px; }

/* ----- La fila de una fecha que todavia no tiene Diario ----- */

/* SE DIBUJA IGUAL QUE LAS DEMAS, y ese es todo el cambio del 30 de agosto de 2026: antes la matriz
   solo traia los dias cargados, asi que un dia que faltaba no se veia en ninguna parte. Un hueco que
   no se dibuja es un hueco que nadie ve, y encontrarlos es para lo que se pidio la pantalla. */
.cdi-fila-sin-dia > .cdi-celda {
  background: repeating-linear-gradient(45deg, #FBFCFD, #FBFCFD 6px, #F4F7F9 6px, #F4F7F9 12px); }

/* La columna de fecha NO puede llevar el rayado: es la que queda fija al desplazar a lo ancho y su
   fondo tiene que ser opaco, o las celdas se le ven por debajo al pasar.

   Le queda el filete y NO el fondo tenue que tenia hasta el 30 de agosto de 2026: el verde lo lleva
   ahora la calcomania de la fecha, y dos verdes uno encima del otro se tapaban. El filete se queda
   porque es lo que marca la fila entera al recorrer la columna con la vista. */
.cdi-fecha-sin-dia {
  border-left: 3px solid #1ABB9C; }

/* El boton que carga el dia. GUARDA DIRECTO, sin preguntar la fecha: es la de su propia fila. Va
   solido como el «+ Agregar» de la celda -son la misma clase de accion, a dos alturas- pero con el
   texto normal, porque en la columna de fecha compite con menos cosas. */
.cdi-agregar-dia {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid #1ABB9C;
  border-radius: 3px;
  background: #1ABB9C;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap; }

.cdi-agregar-dia:hover {
  border-color: #16A085;
  background: #16A085;
  color: #fff; }

/* La columna de un turno que ya no esta vigente. Existe solo porque tiene informes colgados, asi que
   se marca para que no se lea como un turno mas de la estacion.

   SE APAGA CON TRANSPARENCIA Y NO CON UN GRIS FIJO: desde que el encabezado va sobre el azul del
   tema, el `#73879C` que tenia -pensado para fondo claro- quedaba mas oscuro que su propio fondo y
   no se leia. Con alfa se apaga igual sobre cualquiera de los dos. */
.cdi-columna-retirada {
  opacity: .62; }

.cdi-columna-retirada .cdi-tenue {
  display: block;
  color: inherit;
  font-weight: 400;
  text-transform: none; }

/* ----- Las celdas ----- */

.cdi-celda {
  min-width: 152px;
  padding: 6px 8px; }

/* El cruce sin informe: lo que la pantalla viene a mostrar. El rayado lo hace visible de un vistazo
   sin gritar como lo haria un color de error -un hueco no es un fallo, es trabajo pendiente-. */
.cdi-celda-vacia {
  background: repeating-linear-gradient(45deg, #FBFCFD, #FBFCFD 6px, #F4F7F9 6px, #F4F7F9 12px); }

/* EL NOMBRE ARRIBA Y LOS CONTROLES DEBAJO, no uno al lado del otro. Pedido de Amilcar del 30 de
   agosto de 2026. En fila los tres iconos le comian el ancho al nombre, que es lo unico que
   identifica al informe: con dos plantillas configuradas «Informe de combustibles» y «Informe de
   productos» se cortaban los dos en «Informe de…» y la celda dejaba de decir cual era cual.

   ES LA OTRA CALCOMANIA, asi que NO DECLARA NI FONDO NI COLOR DE BORDE: los pone la `.cdi-calco-*`
   que le toque segun el estado. Y no es por ahorrar una linea. Las dos son una sola clase, o sea la
   misma especificidad, asi que si esta declarara `background` ganaria la que quedara mas abajo en el
   archivo y el informe saldria blanco -o del color- segun donde alguien mueva un bloque, sin ningun
   error que lo diga. Es la misma trampa que obliga a `combustible-color-*` a ser la ultima seccion
   de la hoja. El `transparent` es para que se vea igual de ancha si algun dia llega sin calcomania. */
.cdi-informe {
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 4px; }

.cdi-informe + .cdi-informe {
  margin-top: 4px; }

/* Ahora tiene la linea entera para el, asi que ya no necesita cortarse con puntos suspensivos: un
   nombre largo baja de renglon y se lee completo. El color lo hereda de la calcomania. */
.cdi-informe-nombre {
  display: block;
  font-size: 12.5px;
  line-height: 1.3; }

/* Separados del nombre por una linea tenue: sin ella los iconos se leen como parte del texto de
   arriba, que es justamente lo que pasaba cuando estaban en la misma fila.

   EN NEGRO CON ALFA Y NO EN UN GRIS FIJO: se oscurece igual sobre el ambar que sobre el azul, asi
   que la linea no necesita una regla por cada color de calcomania -que era lo que habia, y lo que
   habria que acordarse de agregar al sumar el tercero-. */
.cdi-informe-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(42, 63, 84, .12); }

/* El «+ Agregar» de un cruce sin informe. VA DESTACADO Y ES LO QUE LA PANTALLA VIENE A MOSTRAR:
   pedido de Amilcar del 30 de agosto de 2026. Antes era un boton punteado y gris, del mismo peso
   visual que un apagado, asi que el hueco -el motivo de existir de esta pantalla- era lo que menos
   se veia de la matriz.

   EL VERDE ES EL `#1ABB9C` QUE EL TEMA YA RESERVA para la accion positiva, y no un color nuevo. No
   compite con los otros dos que la matriz usa y que significan otra cosa: el ambar `#F0AD4E` es
   «esto sigue abierto» y el rojo `#C9302C` es «esto se borra». */
.cdi-agregar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 4px 10px;
  border: 1px solid #1ABB9C;
  border-radius: 3px;
  background: #1ABB9C;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap; }

.cdi-agregar:hover {
  border-color: #16A085;
  background: #16A085;
  color: #fff; }

/* Los dos apagados. Van como <span> y no como <button disabled> porque un elemento deshabilitado no
   dispara eventos de raton y su title -que es el motivo, o sea todo el punto- no se mostraria nunca.
   `cursor: help` avisa de que hay algo que leer ahi.

   Este NO es verde y no es un descuido: lo que esta apagado no es una accion, y pintarlo del color
   de la accion obligaria a leer el boton entero para descubrir que no se puede pulsar. */
.cdi-agregar-apagado {
  border: 1px dashed #E6E9ED;
  background: none;
  color: #C6CFD8;
  font-weight: 400;
  cursor: help; }

.cdi-agregar-apagado:hover {
  border-color: #E6E9ED;
  background: none;
  color: #C6CFD8; }

.cdi-accion-apagada {
  color: #CCD3DA;
  cursor: help; }

/* Los formularios de eliminar y de agregar son <form> propios dentro de la celda: sin esto se llevan
   el ancho de una fila entera y empujan al de al lado a la linea de abajo. */
.cdi-forma {
  display: inline; }

/* El tacho del dia es un boton y no un enlace porque eliminar es un POST. Se le saca la apariencia
   de boton para que quede igual que los iconos de los informes. */
.cdi-boton-icono {
  padding: 0;
  border: 0;
  background: none; }

/* ----- La ventana que confirma el borrado de un informe ----- */

.cdi-borrado-identidad {
  color: #2A3F54;
  font-size: 14px;
  line-height: 1.5; }

.cdi-borrado-partidas {
  margin: 0 0 10px 0;
  padding-left: 20px;
  color: #4A5A6A;
  font-size: 13px; }

.cdi-borrado-aviso {
  color: #C9302C;
  font-size: 12.5px;
  font-weight: 700; }

.cdi-borrado-bloqueado {
  padding: 9px 11px;
  border-left: 3px solid #F0AD4E;
  background: #FEFAF3;
  color: #4A5A6A;
  font-size: 13px; }

/* En pantalla angosta la columna de fecha se angosta antes que las celdas: la fecha entra igual y lo
   que hay que seguir viendo son los turnos. */
@media (max-width: 900px) {
  .cdi-columna-fecha {
    min-width: 104px; }
  .cdi-celda {
    min-width: 128px; } }
/** /control de informes **/
/** periodos de cierre **/
/* La pantalla PeriodosDeCierre/Index: los cortes de cuenta con el estado de cuenta de cada entidad,
   en maestro-detalle. La tira de periodos a la izquierda y el periodo elegido a la derecha, con un
   renglon ancho por entidad.

   POR QUE MAESTRO-DETALLE Y NO DOS LISTADOS. Union de dos pantallas que eran el mismo dato a dos
   alturas: un ECMaestro es el corte de un periodo y cada ECEntidad es el estado de cuenta de una
   entidad dentro de ese corte. `ECMaestros/IndexByTipoEntidad` mostraba fechas y
   `ECEntidades/IndexByECMaestro` mostraba nombres; lo que NINGUNO de los dos mostraba es lo que
   todavia no se cerro -5.618 movimientos en ESCOTECHI, 10.267 en Petrocomerciales el 8 de agosto de
   2026-, que ahora encabeza la tira. Amilcar eligio esta forma entre dos maquetas ese mismo dia.

   ES DELIBERADAMENTE HERMANA DE `pcb-` Y `byc-` Y NO LA MISMA. Las tres son tira + detalle, pero el
   renglon dice cosas distintas: alla es un periodo o una cuenta bancaria y aca es una entidad con su
   saldo, que ademas tiene un estado apagado -la que no se movio- que aquellas no tienen. Compartir
   las reglas ataria pantallas que van a divergir. Lo que si se comparte es lo que dice lo mismo:
   `.contador*` y `.destacado*` del encabezado, `.encabezado-de-listado*`, `.accion-fila*` y
   `.tabla-de-exportacion`.

   EL MENU DE CADA PERIODO ES UN <details> Y NO UN DESPLEGABLE DE BOOTSTRAP. La tira tiene alto tope
   y `overflow-y: auto`, y un menu posicionado en absoluto queda RECORTADO por ese contenedor: se
   veria la mitad. El <details> se abre en el flujo, empuja los renglones de abajo y la tira lo
   desplaza sola. Es ademas el mismo recurso de `SoporteSistema/Index` y no necesita JavaScript. */

.pdc-nada {
  padding: 14px;
  color: #73879C;
  font-size: 13px; }

.pdc-tenue {
  color: #73879C;
  font-size: 12px; }

/* El ambar es «mira esto», no «esto esta mal»: un periodo creado y sin cerrar es un estado normal
   del trabajo, y lo que el aviso hace es decir que lo de abajo es una vista previa. */
.pdc-aviso {
  margin: 0 14px 12px;
  padding: 9px 12px;
  border-left: 3px solid #F39C12;
  border-radius: 0 3px 3px 0;
  background: #FDF6EC;
  color: #8A5A08;
  font-size: 12.5px; }

.pdc-tablero {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 14px;
  align-items: start; }

/* ----- La tira de periodos ----- */

.pdc-periodos {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #fff;
  overflow: hidden; }

.pdc-periodos-rotulo {
  padding: 8px 11px;
  border-bottom: 1px solid #E6E9ED;
  background: #F7F9FB;
  color: #2A3F54;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

/* El alto tope deja la tira a la vista sin empujar el periodo elegido fuera de la pantalla: son 41
   periodos en ESCOTECHI y crecen de a uno por mes. */
.pdc-periodos-tira {
  max-height: 520px;
  overflow-y: auto; }

/* Es `block` y no `flex`, y `relative`: el boton del menu se ubica en el rincon con `absolute` y el
   panel se abre EN EL FLUJO, ocupando el ancho del renglon entero. Ver la nota del encabezado. */
.pdc-periodo {
  position: relative;
  display: block;
  padding: 7px 11px;
  border-bottom: 1px solid #F0F2F4;
  border-left: 3px solid transparent; }

/* El relleno derecho es el lugar del boton del menu, que va encima: sin el, el monto de la tira le
   pasa por debajo. */
.pdc-periodo-cuerpo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  padding-right: 26px;
  min-width: 0;
  color: #4A5A6A;
  font-size: 12.5px;
  text-decoration: none; }

.pdc-periodo-cuerpo:hover {
  color: #4A5A6A;
  text-decoration: none; }

.pdc-periodo:hover {
  background: #F7F9FB; }

.pdc-periodo-elegido {
  border-left-color: #2A3F54;
  background: #EEF2F6; }

/* El ambar del corriente es la misma convencion que el dia abierto de «informes diarios»: dice «esto
   esta en curso», no «esto esta mal». */
.pdc-periodo-corriente {
  border-left-color: #F39C12; }

.pdc-periodo-nombre {
  color: #2A3F54;
  font-weight: 700; }

.pdc-periodo-monto {
  color: #4A5A6A;
  font-variant-numeric: tabular-nums; }

.pdc-periodo-resumen {
  grid-column: 1 / -1;
  color: #73879C;
  font-size: 11px; }

/* ----- El menu de cada periodo ----- */

.pdc-menu {
  display: block; }

/* Va en el rincon del renglon, encima del texto. `list-style: none` mas la regla de webkit de abajo
   sacan el triangulo que el navegador dibuja solo: el boton ya trae su propio icono. */
.pdc-menu-boton {
  position: absolute;
  top: 5px;
  right: 6px;
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #73879C;
  cursor: pointer;
  list-style: none; }

.pdc-menu-boton::-webkit-details-marker {
  display: none; }

.pdc-menu-boton:hover,
.pdc-menu[open] .pdc-menu-boton {
  border-color: #CCD3DA;
  background: #F2F5F7;
  color: #2A3F54; }

/* EN EL FLUJO, no flotando: empuja los periodos de abajo y la tira lo desplaza sola. Un panel
   posicionado en absoluto quedaria recortado por el `overflow-y: auto` de la tira, que es
   exactamente el motivo por el que este menu no es un desplegable de Bootstrap. */
.pdc-menu-panel {
  margin-top: 6px;
  padding: 4px 0;
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #F9FBFC; }

.pdc-menu-titulo {
  padding: 4px 12px 3px;
  color: #98A2AC;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

.pdc-menu-item {
  display: block;
  width: 100%;
  padding: 5px 12px;
  border: 0;
  background: none;
  color: #2A3F54;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none; }

a.pdc-menu-item:hover,
button.pdc-menu-item:hover {
  background: #EAF0F4;
  color: #2A3F54;
  text-decoration: none; }

.pdc-menu-fuerte {
  color: #17608F;
  font-weight: 700; }

.pdc-menu-peligro {
  color: #C9302C; }

/* Apagado va como <span> y no como <button disabled> porque un elemento deshabilitado no dispara
   eventos de raton y su title -que es el motivo, o sea todo el punto- no se mostraria nunca.
   `cursor: help` avisa de que hay algo que leer ahi. */
.pdc-menu-apagado {
  color: #AEBAC6;
  cursor: help; }

.pdc-menu-apagado:hover {
  background: none;
  color: #AEBAC6; }

/* Los formularios de eliminar y de cerrar son <form> propios dentro del panel: sin esto se llevan
   una linea entera de mas. */
.pdc-forma {
  display: block;
  margin: 0; }

/* ----- El periodo elegido ----- */

.pdc-detalle {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #fff;
  min-width: 0; }

.pdc-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid #E6E9ED; }

.pdc-cabecera-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

/* La mayuscula inicial la pone el modelo y no `text-transform: capitalize`, que las pondria en TODAS
   las palabras: «Junio De 2026». */
.pdc-cabecera-titulo {
  color: #2A3F54;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2; }

.pdc-pastilla {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap; }

.pdc-pastilla-abierto {
  background: #FDF0DC;
  color: #B9770E; }

.pdc-pastilla-cerrado {
  background: #EEF1F4;
  color: #73879C; }

/* ----- Los renglones ----- */

.pdc-renglones {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px; }

/* Tres columnas: quien es, sus cuatro cifras -en su propia rejilla, por lo mismo que en «informes
   diarios»- y que se puede hacer con el. */
.pdc-renglon {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(360px, 2.4fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #E6E9ED;
  border-left: 3px solid #2A3F54;
  border-radius: 3px;
  background: #fff; }

/* La entidad que no se movio en el periodo. NO SE ESCONDE Y NO SE PLIEGA: lo decidio Amilcar el 8 de
   agosto de 2026, porque el cierre igual le creo su estado de cuenta -son 28 de 49 en el ultimo
   periodo de Auto Servicios- y esconderlas haria creer que faltan. Apagadas y al final. */
.pdc-renglon-apagado {
  border-left-color: #D6DDE4;
  background: #FBFCFD; }

.pdc-renglon-apagado .pdc-nombre,
.pdc-renglon-apagado .pdc-cifra-valor {
  color: #8B95A0; }

.pdc-separador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  color: #98A2AC;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

.pdc-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E6E9ED; }

.pdc-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

.pdc-nombre {
  color: #2A3F54;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25; }

/* `align-items: start` alinea las cuatro por arriba, que es lo que hace falta porque no todas tienen
   la misma altura: el formato del sistema escribe EL CERO EN BLANCO, asi que la cifra de un total en
   cero es un renglon vacio. Centradas, cada rotulo caia a una altura distinta. */
.pdc-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  align-items: start;
  gap: 10px;
  min-width: 0; }

.pdc-cifra {
  display: flex;
  flex-direction: column;
  min-width: 0; }

/* El alto minimo es el del renglon que ocuparia un numero, por lo mismo de arriba: sin el, un total
   en cero no reserva su linea y el rotulo sube. */
.pdc-cifra-valor {
  min-height: 17px;
  color: #2A3F54;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; }

.pdc-cifra-rotulo {
  color: #73879C;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase; }

.pdc-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end; }

.pdc-enlace {
  color: #1A6FA8;
  font-size: 12.5px;
  white-space: nowrap; }

/* La entidad sin movimientos no tiene ni movimientos que ver ni estado de cuenta que imprimir: el
   informe individual arma sus lineas de esos movimientos y sin ellos responde «No hay registros».
   Apagado y con el motivo, no escondido, por lo mismo que las impresiones del desplegable. */
.pdc-enlace-apagado {
  color: #AEBAC6;
  cursor: help; }

.pdc-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid #E6E9ED;
  background: #F7F9FB; }

.pdc-pie-nota {
  color: #73879C;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums; }

/* ----- Las ventanas emergentes ----- */

.pdc-ayuda {
  display: block;
  margin-top: 4px;
  color: #73879C;
  font-size: 11.5px;
  line-height: 1.45; }

.pdc-cierre-periodo {
  margin-bottom: 6px;
  color: #2A3F54;
  font-size: 15px;
  font-weight: 700; }

.pdc-cierre-aviso {
  margin-bottom: 10px;
  color: #4A5A6A;
  font-size: 13px;
  line-height: 1.5; }

/* Volver a cerrar un periodo ya cerrado puede cambiar un saldo ya impreso, porque el cierre no tiene
   fecha desde. Amilcar decidio el 8 de agosto de 2026 que se puede hacer PERO AVISANDO; esto es el
   aviso. */
.pdc-cierre-alarma {
  padding: 9px 12px;
  border-left: 3px solid #F39C12;
  border-radius: 0 3px 3px 0;
  background: #FDF6EC;
  color: #8A5A08;
  font-weight: 600; }

/* ----- Las dos cajas de busqueda ----- */

/* SON DOS Y FILTRAN POR SEPARADO: una la tira de periodos y otra los renglones del periodo elegido.
   Lo pidio Amilcar el 9 de agosto de 2026. Cada lista es de otra cosa -alla un periodo, aca una
   entidad- y buscar en una no tiene por que tocar la otra.

   POR QUE NO ES LA DE DataTables. Esta pantalla NO monta `#datatable` -es maestro-detalle, no una
   tabla-, asi que no hay de donde sacar el buscador del marco de listado. Lo hace
   periodos-de-cierre.js sobre el `data-busqueda` de cada renglon. El aspecto SI se copia del marco a
   proposito: el mismo rotulo «Buscar:» y el mismo placeholder que escribe `init_DataTables()`, para
   que las dos cajas se lean igual que las de los 47 listados. */
.pdc-buscador {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-bottom: 1px solid #E6E9ED; }

.pdc-buscador-rotulo {
  margin: 0;
  color: #73879C;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap; }

/* El alto y el tamano de letra son los del campo chico del tema; `min-width: 0` es lo que le permite
   encogerse dentro de la tira de 270px en vez de desbordarla. */
.pdc-buscador-campo {
  min-width: 0;
  height: 28px;
  padding: 2px 8px;
  font-size: 12.5px; }

/* La caja de los renglones va en la cabecera del periodo elegido, junto a la pastilla de estado: son
   las dos cosas que actuan sobre lo de abajo. La cabecera es flex con `space-between`, asi que este
   grupo es el que se va al extremo derecho. */
.pdc-cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 10px; }

.pdc-cabecera-acciones .pdc-buscador {
  padding: 0;
  border-bottom: 0; }

.pdc-cabecera-acciones .pdc-buscador-campo {
  width: 180px; }

/* Lo enciende el guion cuando el filtro no deja nada. Va dibujado y con `hidden` desde el servidor,
   no armado en JavaScript, para que el texto viva en la vista como el resto. */
.pdc-sin-resultados {
  margin: 0; }

/* LO QUE EL FILTRO DEJA FUERA SE ESCONDE CON `hidden`, Y ESTO ES LO QUE HACE QUE FUNCIONE.

   `[hidden] { display: none }` viene de la hoja del navegador, que pierde contra cualquier `display`
   declarado en una hoja de autor. Estos tres lo tienen -grid, block y flex, unas lineas mas arriba-,
   asi que sin estas reglas el atributo no esconde nada: la busqueda parece no hacer NADA, aunque los
   conteos y los totales de abajo si cambien.

   Van con el selector de elemento MAS atributo -0,1,1- para ganarle a la clase sola -0,1,0- sin
   `!important`, que en esta hoja no se usa. */
.pdc-periodo[hidden],
.pdc-renglon[hidden],
.pdc-separador[hidden],
.pdc-sin-resultados[hidden] {
  display: none; }

/* En pantalla angosta las cifras pasan a dos por linea, y mas abajo la tira sube arriba y el renglon
   se apila entero. Sin esto los importes parten en dos lineas. */
@media (max-width: 1240px) {
  .pdc-renglon {
    grid-template-columns: minmax(140px, 1fr) minmax(200px, 1.6fr) auto; }
  .pdc-cifras {
    grid-template-columns: repeat(2, minmax(92px, 1fr)); } }

@media (max-width: 900px) {
  .pdc-tablero {
    grid-template-columns: 1fr; }
  .pdc-periodos-tira {
    max-height: 260px; }
  .pdc-renglon {
    grid-template-columns: 1fr; }
  .pdc-acciones {
    justify-content: flex-start; } }
/** /periodos de cierre **/
/** periodos de cierre bancarios **/
/* La pantalla PeriodoCuentaBancarias/Tablero: los periodos de cierre de las cuentas bancarias, en
   maestro-detalle. La tira de cuentas a la izquierda y los periodos de la cuenta elegida a la
   derecha, con un renglon ancho por periodo. Amilcar la eligio entre dos maquetas el 10 de agosto de
   2026, y es la misma forma de «Periodos de cierre» del menu Cuentas: son dos entradas de menu con
   el mismo nombre y tienen que leerse igual.

   ES DELIBERADAMENTE HERMANA DE `pdc-` Y NO LA MISMA, que es la regla de la casa para las pantallas
   de esta forma. Las dos son tira mas detalle, pero el renglon dice cosas distintas: alla es una entidad
   con su saldo dentro de UN periodo, y aca es un periodo entero de UNA cuenta, con cinco cifras y
   sin estado apagado. Compartir las reglas ataria pantallas que van a divergir. Lo que si se
   comparte es lo que tiene que decir lo mismo: `.contador*` del encabezado,
   `.encabezado-de-listado*`, `.accion-fila*` y `.tabla-de-exportacion`.

   ACA NO HAY MENU POR RENGLON. En la gemela cada periodo abre un <details> con sus cuatro
   impresiones y el cierre; este renglon tiene tres enlaces fijos —movimientos, conciliacion y
   Excel— mas los iconos de accion de fila, asi que caben en linea y no hay nada que desplegar.

   Los colores son los que ya estaban en este archivo: #2A3F54 y #73879C del menu lateral, y el
   ambar —#B9770E sobre #FDF6EC con borde #E8C48A— el mismo de `.contador-aviso`. */

.pcb-nada {
  padding: 14px;
  color: #73879C;
  font-size: 13px; }

.pcb-tenue {
  color: #73879C;
  font-size: 12px; }

.pcb-tablero {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 14px;
  align-items: start; }

/* ----- La tira de cuentas ----- */

.pcb-cuentas {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #fff;
  overflow: hidden; }

.pcb-cuentas-rotulo {
  padding: 8px 11px;
  border-bottom: 1px solid #E6E9ED;
  background: #F7F9FB;
  color: #2A3F54;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

/* El alto tope no lo pide el volumen —ninguna estacion pasa de dos cuentas— sino la simetria con la
   gemela y el dia en que alguna tenga diez. */
.pcb-cuentas-tira {
  max-height: 520px;
  overflow-y: auto; }

/* Es un <a> entero y no un renglon con un enlace adentro: toda la cuenta es el area de clic. */
.pcb-cuenta {
  display: block;
  padding: 8px 11px;
  border-bottom: 1px solid #F0F2F4;
  border-left: 3px solid transparent;
  color: #4A5A6A;
  font-size: 12.5px;
  text-decoration: none; }

.pcb-cuenta:hover,
.pcb-cuenta:focus {
  background: #F7F9FB;
  color: #4A5A6A;
  text-decoration: none; }

.pcb-cuenta-elegida {
  border-left-color: #2A3F54;
  background: #EEF2F6; }

/* La cuenta sin ningun periodo NO se esconde: son las dos de Petrocomerciales, y esconderlas haria
   creer que la estacion no tiene esa cuenta. Apagada, pero se abre igual —es donde se crea el
   primero—. */
.pcb-cuenta-apagada .pcb-cuenta-nombre,
.pcb-cuenta-apagada .pcb-cuenta-numero {
  color: #8B95A0; }

.pcb-cuenta-nombre {
  display: block;
  color: #2A3F54;
  font-weight: 700; }

.pcb-cuenta-numero {
  display: block;
  color: #4A5A6A;
  font-variant-numeric: tabular-nums; }

.pcb-cuenta-resumen {
  display: block;
  color: #73879C;
  font-size: 11px;
  line-height: 1.35; }

/* ----- La cuenta elegida ----- */

.pcb-detalle {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #fff;
  min-width: 0; }

.pcb-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid #E6E9ED; }

.pcb-cabecera-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

.pcb-cabecera-titulo {
  color: #2A3F54;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2; }

/* La caja de busqueda de los renglones va en la cabecera, que es flex con `space-between`, asi que
   este grupo es el que se va al extremo derecho. */
.pcb-cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 10px; }

/* ----- Los renglones ----- */

.pcb-renglones {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px; }

/* Tres columnas: que periodo es, sus cinco cifras -en su propia rejilla- y que se puede hacer con
   el. */
.pcb-renglon {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(380px, 2.6fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #E6E9ED;
  border-left: 3px solid #2A3F54;
  border-radius: 3px;
  background: #fff; }

/* EL PERIODO SIN SALDO DE BANCO. El ambar dice «mira esto», no «esto esta mal»: el periodo se creo y
   el saldo del estado bancario nunca se cargo, asi que su conciliacion se imprime contra cero. Pasa
   hoy en el ultimo periodo de las dos cuentas de ESCOTECHI, octubre de 2022. */
.pcb-renglon-avisa {
  border-left-color: #F39C12; }

.pcb-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

.pcb-nombre {
  color: #2A3F54;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25; }

.pcb-pastilla {
  display: inline-block;
  padding: 0 7px;
  border: 1px solid #E8C48A;
  border-radius: 10px;
  background: #FDF6EC;
  color: #B9770E;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: help; }

/* `align-items: start` alinea las cinco por arriba, que hace falta porque no todas tienen la misma
   altura: el formato del sistema escribe EL CERO EN BLANCO, asi que la cifra de un saldo en cero es
   un renglon vacio. Centradas, cada rotulo caia a una altura distinta. */
.pcb-cifras {
  display: grid;
  grid-template-columns: repeat(5, minmax(88px, 1fr));
  align-items: start;
  gap: 10px;
  min-width: 0; }

.pcb-cifra {
  display: flex;
  flex-direction: column;
  min-width: 0; }

/* El alto minimo es el del renglon que ocuparia un numero, por lo mismo de arriba: sin el, la cifra
   de «Banco» en un periodo sin saldo cargado no reserva su linea y el rotulo sube. */
.pcb-cifra-valor {
  min-height: 17px;
  color: #2A3F54;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; }

.pcb-cifra-rotulo {
  color: #73879C;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase; }

.pcb-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end; }

.pcb-enlace {
  color: #1A6FA8;
  font-size: 12.5px;
  white-space: nowrap; }

/* El tacho de un periodo que no se puede eliminar. Va como <span> apagado y no como enlace
   deshabilitado porque un elemento deshabilitado no dispara eventos de raton, asi que su `title`
   -que es el motivo, o sea todo el punto- no se mostraria nunca. */
.pcb-accion-apagada {
  color: #C6CED6;
  cursor: help; }

.pcb-accion-apagada:hover {
  background: none;
  color: #C6CED6; }

.pcb-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid #E6E9ED;
  background: #F7F9FB; }

.pcb-pie-nota {
  color: #73879C;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums; }

/* ----- Las dos cajas de busqueda ----- */

/* SON DOS Y FILTRAN POR SEPARADO: una la tira de cuentas y otra los periodos de la elegida. Cada
   lista es de otra cosa y buscar en una no tiene por que tocar la otra; es la misma decision que en
   la pantalla gemela. El aspecto SI se copia del marco de listado a proposito -el mismo rotulo
   «Buscar:» y el mismo placeholder que escribe `init_DataTables()`-, para que se lean igual que las
   de los 47 listados. */
.pcb-buscador {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-bottom: 1px solid #E6E9ED; }

.pcb-buscador-rotulo {
  margin: 0;
  color: #73879C;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap; }

/* El alto y el tamano de letra son los del campo chico del tema; `min-width: 0` es lo que le permite
   encogerse dentro de la tira de 270px en vez de desbordarla. */
.pcb-buscador-campo {
  min-width: 0;
  height: 28px;
  padding: 2px 8px;
  font-size: 12.5px; }

.pcb-cabecera-acciones .pcb-buscador {
  padding: 0;
  border-bottom: 0; }

.pcb-cabecera-acciones .pcb-buscador-campo {
  width: 180px; }

.pcb-sin-resultados {
  margin: 0; }

/* LO QUE EL FILTRO DEJA FUERA SE ESCONDE CON `hidden`, Y ESTO ES LO QUE HACE QUE FUNCIONE.

   `[hidden] { display: none }` viene de la hoja del navegador, que pierde contra cualquier `display`
   declarado en una hoja de autor. Estos tres lo tienen -block, grid y block, unas lineas mas
   arriba-, asi que sin estas reglas el atributo no esconde nada: la busqueda parece no hacer NADA,
   aunque los conteos y los totales de abajo si cambien.

   Van con el selector de elemento MAS atributo -0,1,1- para ganarle a la clase sola -0,1,0- sin
   `!important`, que en esta hoja no se usa. */
.pcb-cuenta[hidden],
.pcb-renglon[hidden],
.pcb-sin-resultados[hidden] {
  display: none; }

/* En pantalla angosta las cifras pasan a tres y despues a dos por linea, y mas abajo la tira sube
   arriba y el renglon se apila entero. Sin esto los importes parten en dos lineas. */
@media (max-width: 1400px) {
  .pcb-renglon {
    grid-template-columns: minmax(140px, 1fr) minmax(260px, 1.8fr) auto; }
  .pcb-cifras {
    grid-template-columns: repeat(3, minmax(88px, 1fr)); } }

@media (max-width: 1100px) {
  .pcb-cifras {
    grid-template-columns: repeat(2, minmax(88px, 1fr)); } }

@media (max-width: 900px) {
  .pcb-tablero {
    grid-template-columns: 1fr; }
  .pcb-cuentas-tira {
    max-height: 260px; }
  .pcb-renglon {
    grid-template-columns: 1fr; }
  .pcb-acciones {
    justify-content: flex-start; } }
/** /periodos de cierre bancarios **/
/** pantallas de soporte **/
/* Las pantallas de Soporte: cada una junta en un solo lugar los catalogos de un dominio, con el
   alta, el cambio y la baja dentro del propio renglon. La primera es SoporteBancos/Index; las de
   compras, cuentas e informes salen del mismo molde y usan estas mismas clases sin agregar ninguna.

   Todo cuelga del prefijo `sb-`, que no se usa en ninguna otra pantalla -y `ss-` para lo que solo
   tiene la de sistema-, salvo la fila de contadores que las encabeza: esa es el juego compartido
   `.contador*`, que estas cinco comparten con la pantalla del patio.

   El reparto de columnas NO esta aca: cada panel trae su `grid-template-columns` en un atributo
   `style`, porque el numero de columnas lo decide el catalogo y no la hoja. Ver
   MdlPanelDeCatalogo.PlantillaDeColumnas.

   Los colores son los del tema y ya estaban en este archivo: #2A3F54 y #1ABB9C son los del menu
   lateral, #73879C el del texto suave, y el ambar -#B9770E sobre #FDF6EC- el mismo que ya usa el
   contador de piezas fuera de uso de la pantalla del patio.

   No se usa `campo-de-formulario` ni ninguna clase del tema para el espaciado: todo el reparto va con grid y
   `gap`, asi que no depende de reglas que la proxima subida de Bootstrap pueda mover. */

.sb-paneles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  align-items: start; }

/* El panel se dibuja sobre el fondo blanco de la x_panel que lo contiene, asi que un borde claro
   por si solo no lo separa de nada: la sombra es lo que lo despega. */
.sb-panel {
  border: 1px solid #C9D4DE;
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(42, 63, 84, .07);
  overflow: hidden; }

/* La cabecera va sobre banda: es lo que dice donde empieza cada catalogo. Con cuatro paneles en
   pantalla y los titulos sueltos sobre blanco, los cuatro se leian como una lista sola. */
.sb-panel-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: #EDF2F6;
  border-bottom: 1px solid #C9D4DE; }

.sb-panel-titulo h3 {
  margin: 0;
  color: #2A3F54;
  font-size: 15px;
  font-weight: 600; }

/* El resumen son numeros, y son lo unico que dice cuanto hay de cada cosa antes de contar los
   renglones a ojo: en #73879C a 11px se perdia contra la banda. */
.sb-panel-resumen {
  color: #52657A;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums; }

.sb-panel-ayuda {
  margin: 0;
  padding: 8px 14px;
  color: #5A6E82;
  font-size: 12px;
  background: #FFFFFF;
  border-bottom: 1px solid #EDF1F4; }

/* El encabezado usa la misma plantilla de columnas que los renglones, asi que los rotulos caen
   sobre sus campos sin repetir anchos en dos lugares. Lleva banda y cierra con un borde marcado
   porque es la cabecera de la tabla y no un renglon mas: debajo empiezan los datos. */
.sb-encabezado {
  display: grid;
  gap: 8px;
  padding: 7px 14px;
  background: #F4F7F9;
  border-bottom: 1px solid #C9D4DE;
  color: #52657A;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase; }

.sb-encabezado-acciones {
  text-align: right; }

/* Un renglon: a la izquierda el formulario con los campos, a la derecha los dos formularios de
   vigencia y de eliminar. Van hermanos y no anidados porque un <form> dentro de otro no es HTML
   valido y el navegador descarta el de adentro sin avisar. */
.sb-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-bottom: 1px solid #E4EAEF; }

/* El cebreado, que es lo que permite seguir un renglon de tres o cuatro columnas sin perder la
   linea. `nth-of-type` cuenta hermanos del MISMO tipo, y los <div> del panel son el titulo, el
   encabezado y las filas -la ayuda es un <p> y el alta un <form>, asi que ninguno de los dos
   cuenta-: la primera fila es siempre el tercer <div>, tenga el panel ayuda o no. Con `nth-child`
   la franja se invertia entre un panel con ayuda y uno sin ella. Si algun dia se le agrega otro
   <div> al panel, hay que volver a mirar esta regla. */
.sb-fila:nth-of-type(even) {
  background: #F6F8FA; }

/* El hover tiene que ganarle a la franja y a la fila fuera de uso, asi que es de otro color y no
   un gris mas: el verde del tema, muy diluido. */
.sb-fila:hover,
.sb-fila:nth-of-type(even):hover {
  background: #E8F5F2; }

.sb-datos {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 0; }

/* Bloqueado, un campo tiene que leerse como texto y no como un formulario: sin borde ni fondo. Al
   desbloquearse aparece la caja, que es la senal de que se puede escribir. */
.sb-campo {
  width: 100%;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: #2A3F54;
  font-size: 13.5px;
  line-height: 1.4; }

.sb-campo-numero {
  font-variant-numeric: tabular-nums; }

.sb-campo[readonly],
.sb-campo:disabled {
  color: #2A3F54;
  cursor: default;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none; }

.sb-editando .sb-campo {
  border-color: #1ABB9C;
  background: #FFFFFF; }

.sb-campo:focus {
  outline: 2px solid #1ABB9C;
  outline-offset: 1px; }

/* Un campo que se fija al crear no es un input sino texto: no hay nada que escribir ahi, asi que
   tampoco aparece la caja al poner el renglon en edicion. El gris lo separa de lo editable. */
.sb-campo-fijo {
  display: block;
  color: #73879C;
  font-variant-numeric: tabular-nums;
  cursor: help; }

.sb-editando .sb-campo-fijo {
  border-color: transparent;
  background: transparent; }

.sb-botones-fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap; }

.sb-extras {
  display: flex;
  align-items: center;
  gap: 2px; }

.sb-forma-extra {
  display: inline; }

.sb-icono {
  padding: 2px 6px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #73879C;
  font-size: 14px;
  line-height: 1.2; }

.sb-icono:hover {
  color: #2A3F54;
  background: #EDF1F4; }

.sb-icono:focus {
  outline: 2px solid #1ABB9C;
  outline-offset: 1px; }

.sb-editar:hover {
  color: #1ABB9C; }

.sb-eliminar:hover {
  color: #E74C3C;
  background: #FDEDEC; }

.sb-reactivar {
  color: #1ABB9C; }

/* La papelera apagada no es un boton: es la explicacion de por que no se puede borrar, y el motivo
   se lee en el `title` antes de intentar nada. */
/* Al .3 de antes la papelera apagada practicamente no se veia, y con ella se perdia su `title`,
   que es donde esta escrito POR QUE no se puede borrar esa fila. */
.sb-apagado {
  opacity: .45;
  cursor: help; }

.sb-apagado:hover {
  color: #73879C;
  background: transparent; }

.sb-btn {
  padding: 2px 9px;
  border: 1px solid #1ABB9C;
  border-radius: 2px;
  background: #FFFFFF;
  color: #1ABB9C;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5; }

.sb-btn:hover {
  background: #1ABB9C;
  color: #FFFFFF; }

.sb-cancelar {
  border-color: #DAE1E7;
  color: #73879C; }

.sb-cancelar:hover {
  background: #DAE1E7;
  color: #2A3F54; }

/* Guardar y Cancelar solo existen mientras el renglon se esta corrigiendo; el lapiz, al reves. */
.sb-guardar,
.sb-cancelar {
  display: none; }

.sb-editando .sb-guardar,
.sb-editando .sb-cancelar {
  display: inline-block; }

.sb-editando .sb-editar {
  display: none; }

/* El candado dice que el codigo nombra esa fila por su numero. Lleva el numero escrito para que se
   pueda buscar en Enumeraciones.cs sin adivinar cual es. */
.sb-candado {
  padding: 0 4px;
  border: 1px solid #E8C48A;
  border-radius: 2px;
  color: #B9770E;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
  cursor: help; }

/* Los avisos de estas pantallas no son texto de relleno: dicen que la sigla de un documento no se
   puede cambiar, que dos categorias escritas distinto parten en dos un grupo del resumen de ventas
   impreso, o que dar de baja una estacion no saca a nadie del sistema. En gris apagado se leian
   como el pie de una pagina. Van en la misma caja ambar que el aviso de «no hay tanques» de la
   pantalla del patio. */
.sb-aviso-sistema {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid #E8C48A;
  border-left: 3px solid #F39C12;
  border-radius: 3px;
  background: #FDF6EC;
  color: #7D5B1E;
  font-size: 12.5px; }

/* Dentro del aviso, el candado queda ambar sobre ambar y su borde desaparece: se le pone fondo
   blanco para que se siga leyendo como la pastilla que es en el renglon. */
.sb-aviso-sistema .sb-candado {
  background: #FFFFFF; }

/* Una fila desusada se dibuja apagada y tachada, pero NO desaparece: si desapareciera, nadie
   podria volver a ponerla en uso desde aca. Es la misma decision que en la pantalla del patio.

   La franja de la izquierda va como sombra interior y no como `border-left`: un borde de verdad
   correria los campos tres pixeles y la fila dejaria de alinearse con las de arriba. */
.sb-fila.sb-fila-desusada {
  background: #F4F6F8;
  box-shadow: inset 3px 0 0 #C3CED8; }

.sb-fila.sb-fila-desusada:hover {
  background: #E8F5F2; }

.sb-fila-desusada .sb-campo {
  color: #8595A5;
  text-decoration: line-through;
  text-decoration-color: #C3CED8; }

/* Lo mismo que dice el tachado, pero con palabras -el tachado hay que saber leerlo-. Es la misma
   pildora que la pantalla del patio le pone a una manguera fuera de uso. */
.sb-etiqueta-desusada {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #C3CED8;
  border-radius: 9px;
  color: #73879C;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help; }

/* El alta va donde termina la lista y se distingue por el fondo, no por un boton aparte arriba. */
.sb-alta {
  grid-template-columns: minmax(0, 1fr);
  background: #F4F7F9;
  border-top: 1px solid #C9D4DE;
  border-bottom: none; }

.sb-alta:hover {
  background: #F2F5F7; }

.sb-alta .sb-campo {
  border-color: #DAE1E7;
  background: #FFFFFF; }

.sb-agregar {
  display: inline-block; }

/* Por debajo de 768px la rejilla ya cae a una columna sola por el auto-fit, pero los renglones
   siguen siendo rejillas: se les quita el ancho fijo para que el nombre no quede en dos letras. */
@media (max-width: 767px) {
  .sb-fila {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px; }
  .sb-extras {
    justify-content: flex-end; } }

/* --- Soporte al sistema: las tres listas de arriba, que no son rejillas de catalogos ---

   Son tres acordeones con la misma forma -las estaciones, los usuarios y los roles-, asi que
   comparten las reglas del renglon en vez de tener cada uno las suyas. La lista de usuarios estuvo
   hasta el 10 de agosto de 2026 dentro del cuerpo de la estacion abierta; salio afuera porque un
   usuario llega a varias estaciones, y porque los que no tienen ninguna no aparecian en ningun
   lado. La de roles es de la misma familia y se agrego el 12 de agosto de 2026: es el renglon del
   usuario mirado del otro lado, con los usuarios de un rol en vez de los roles de un usuario.

   El acordeon es <details>/<summary> nativo: abre y cierra sin JavaScript, se maneja con el
   teclado de fabrica y sigue funcionando si el guion no carga. Lo unico que se estiliza es el
   triangulo, que cada navegador dibuja distinto. */
.ss-empresa,
.ss-usuario,
.ss-rol {
  border-bottom: 1px solid #EDF1F4; }

.ss-empresa:last-of-type,
.ss-usuario:last-of-type,
.ss-rol:last-of-type {
  border-bottom: none; }

.ss-empresa-titulo,
.ss-usuario-titulo,
.ss-rol-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  background: #F7F9FA;
  font-size: 13.5px; }

.ss-empresa-titulo::-webkit-details-marker,
.ss-usuario-titulo::-webkit-details-marker,
.ss-rol-titulo::-webkit-details-marker {
  display: none; }

.ss-empresa-titulo::before,
.ss-usuario-titulo::before,
.ss-rol-titulo::before {
  content: "\25B8";
  color: #73879C;
  font-size: 11px;
  width: 10px;
  flex: none; }

.ss-empresa[open] > .ss-empresa-titulo::before,
.ss-usuario[open] > .ss-usuario-titulo::before,
.ss-rol[open] > .ss-rol-titulo::before {
  content: "\25BE"; }

.ss-empresa-titulo:hover,
.ss-usuario-titulo:hover,
.ss-rol-titulo:hover {
  background: #EDF2F6; }

/* Abierta se marca mas fuerte y cierra con un borde: con varias estaciones en la lista, saber cual
   esta abierta no puede depender solo de la negrita. */
.ss-empresa[open] > .ss-empresa-titulo,
.ss-usuario[open] > .ss-usuario-titulo,
.ss-rol[open] > .ss-rol-titulo {
  background: #E8F5F2;
  border-bottom: 1px solid #C9D4DE;
  font-weight: 600; }

.ss-empresa-nombre,
.ss-usuario-nombre,
.ss-rol-nombre {
  color: #2A3F54; }

.ss-empresa-resumen,
.ss-usuario-resumen,
.ss-rol-resumen {
  color: #52657A;
  font-size: 12.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums; }

.ss-empresa-cuerpo,
.ss-usuario-cuerpo,
.ss-rol-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 12px 16px 22px; }

/* El alta va donde termina la lista y se distingue por el fondo, igual que la de los catalogos:
   es un renglon mas del acordeon y no un boton aparte arriba. */
.ss-alta > .ss-empresa-titulo,
.ss-alta > .ss-usuario-titulo,
.ss-alta > .ss-rol-titulo {
  background: #F4F7F9;
  border-top: 1px solid #C9D4DE;
  color: #1ABB9C; }

.ss-alta > .ss-empresa-titulo .ss-empresa-nombre,
.ss-alta > .ss-usuario-titulo .ss-usuario-nombre,
.ss-alta > .ss-rol-titulo .ss-rol-nombre {
  color: #16A085;
  font-weight: 600; }

/* Los tres datos del alta de un usuario, antes de las casillas de roles. */
.ss-alta-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px; }

.ss-ayuda-clave {
  margin: 0;
  color: #5A6E82;
  font-size: 12px; }

/* La contraseña recien generada, que se muestra UNA SOLA VEZ y hay que dictar por telefono.

   No comparte el renglon del aviso verde a proposito. Ese es un texto que se lee de corrido y este
   hay que leerlo caracter por caracter: va en caja propia, en monoespaciada grande y con separacion
   entre letras, que es lo que hace distinguibles las que se parecen. El generador ya saca del
   alfabeto las peores -I, l, 1, O, o, 0- pero el ojo todavia tiene que separar rn de m.

   En ambar y no en verde: no es «listo, salio bien» sino «esto es lo unico que hay que hacer ahora,
   y despues desaparece». */
.ss-secreto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px 0;
  border: 1px solid #E0A800;
  border-left: 4px solid #E0A800;
  border-radius: 3px;
  background: #FFFBF0;
  padding: 12px 14px; }

.ss-secreto-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8A6D00;
  word-break: break-all; }

/* `user-select: all` hace que un solo clic la seleccione entera: copiarla no deberia depender de
   arrastrar sin fallar sobre un texto que no se puede volver a ver. */
.ss-secreto-valor {
  font-family: "Courier New", Consolas, monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #2A3F54;
  user-select: all;
  word-break: break-all; }

.ss-secreto-ayuda {
  margin: 0;
  color: #5A6E82;
  font-size: 12px; }

/* Lo que si se hizo, en verde y no en el rojo del renglon de error de arriba: son el mismo
   renglon del layout y leerlos igual haria pasar un exito por una falla. */
.ss-aviso-hecho {
  color: #16A085;
  font-size: 14px; }

.ss-aviso-hecho:empty {
  display: none; }

/* La ficha de la estacion. Rejilla que se acomoda sola; los subrotulos y los dos campos largos
   ocupan el ancho entero. */
.ss-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
  border: 1px solid #EDF1F4;
  border-radius: 3px;
  padding: 14px; }

.ss-campo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-weight: 400; }

.ss-ancho {
  grid-column: 1 / -1; }

.ss-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #73879C; }

.ss-campo input[type="text"],
.ss-campo input[type="email"],
.ss-campo input[type="password"],
.ss-campo select {
  width: 100%;
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid #DAE1E7;
  border-radius: 2px;
  background: #FFFFFF;
  color: #2A3F54;
  font-size: 13px;
  line-height: 1.4; }

.ss-campo input[type="text"]:focus,
.ss-campo input[type="email"]:focus,
.ss-campo input[type="password"]:focus,
.ss-campo select:focus {
  outline: 2px solid #1ABB9C;
  outline-offset: 1px; }

/* Un dato que se muestra y no se corrige. Mismo tratamiento que .sb-campo-fijo de los catalogos:
   texto en gris, sin caja, con el motivo al pasar el mouse. */
.ss-fijo {
  padding: 4px 7px;
  color: #73879C;
  font-size: 13px;
  border: 1px dashed #DAE1E7;
  border-radius: 2px;
  background: #F7F9FA;
  cursor: help; }

.ss-subrotulo {
  grid-column: 1 / -1;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid #EDF1F4;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1ABB9C; }

.ss-acciones {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px; }

/* Las acciones que sacan algo de la lista van juntas y al final: dar de baja y eliminar. La
   segunda solo aparece cuando de verdad se puede, y apagada explica en su `title` por que no. */
.ss-baja {
  display: flex;
  justify-content: flex-end;
  gap: 8px; }

/* El boton principal de cada formulario.

   NO se usa `sb-guardar` para esto, aunque el texto diga Guardar: en el molde de catalogos esa
   clase significa «boton que solo existe mientras el renglon se esta corrigiendo» y esta en
   display:none salvo dentro de .sb-editando. Puesta aca, donde no hay lapiz que abra la edicion, el
   boton no se veia -y con el, la estacion no se podia guardar-. */
.ss-principal {
  background: #1ABB9C;
  color: #FFFFFF; }

.ss-principal:hover {
  background: #16A085;
  border-color: #16A085; }

/* Eliminar se lee distinto que el resto: es lo unico de esta pantalla que no se puede deshacer. */
.ss-peligro {
  border-color: #E74C3C;
  color: #E74C3C; }

.ss-peligro:hover {
  background: #E74C3C;
  border-color: #E74C3C;
  color: #FFFFFF; }

/* Un usuario por renglon: la ficha de accesos con sus dos juegos de casillas y un solo boton. */
.ss-accesos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  border: 1px solid #EDF1F4;
  border-radius: 3px;
  padding: 12px 14px; }

.ss-usuario-nombre,
.ss-rol-nombre {
  font-weight: 600;
  word-break: break-all; }

/* El nombre de un rol es una palabra corta. Sin tope se estira a todo el ancho del panel -es un
   `.ss-campo`, que fija width:100%- y se lee como un campo de texto largo que espera una frase. */
.ss-campo-corto {
  max-width: 320px; }

.ss-alerta {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid #D9534F;
  border-radius: 9px;
  background: #FDF1F0;
  color: #C9302C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: help; }

.ss-marcas {
  display: flex;
  flex-direction: column;
  gap: 5px; }

/* Un dato fijo dentro de un bloque de marcas se encoge a lo que dice. Estirado a todo el ancho se
   lee como un campo vacio y desactivado, que es justo lo que no es. */
.ss-marcas > .ss-fijo {
  align-self: flex-start; }

.ss-marcas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px; }

.ss-marca {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: #2A3F54;
  cursor: pointer; }

.ss-marca input {
  margin: 0; }

.ss-marca:hover {
  color: #1ABB9C; }

@media (max-width: 767px) {
  .ss-ficha,
  .ss-alta-datos {
    grid-template-columns: minmax(0, 1fr); }
  .ss-empresa-cuerpo,
  .ss-usuario-cuerpo,
  .ss-rol-cuerpo {
    padding-left: 12px; }
  .ss-baja {
    flex-wrap: wrap; } }
/** /pantallas de soporte **/
/** ficha de cuenta **/
/* Las pantallas de la cuenta propia. Prefijo `cta-`. Nacio con Manage/Index —la ficha que abre
   «Administrar cuenta»— y lo comparten las otras dos del mismo circuito: Manage/ChangePassword usa
   `cta-nota` para la regla de la contrasena, y Account/ContrasenaOlvidada usa `cta-pasos`,
   `cta-nota` y `cta-acciones`.

   Es una ficha de solo lectura con un boton, asi que no reutiliza `ss-ficha` de las pantallas de
   soporte aunque la rejilla sea parecida: ese juego nombra a «soporte al sistema» y estas las abre
   cualquiera —ContrasenaOlvidada, incluso sin sesion iniciada—. Compartirlas ataria pantallas que no
   tienen por que moverse juntas. */
/* DOS columnas fijas y ancho tope, en vez de `auto-fit`. Con auto-fit la rejilla se abria a cuatro
   columnas en una pantalla ancha y los dos primeros datos quedaban apretados contra la izquierda de
   un recuadro casi vacio, con el texto de ayuda partido en tres renglones cortos. Se vio recien al
   fotografiar la pantalla: leyendo el CSS parecia lo correcto. */
.cta-ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
  gap: 14px 22px;
  border: 1px solid #EDF1F4;
  border-radius: 3px;
  padding: 16px; }

.cta-campo {
  display: flex;
  flex-direction: column;
  gap: 3px; }

.cta-ancho {
  grid-column: 1 / -1; }

.cta-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #73879C; }

.cta-valor {
  color: #2A3F54;
  font-size: 15px;
  word-break: break-word; }

/* Lo que le falta a la cuenta va en rojo, igual que la etiqueta «sin rol» del renglon del usuario en
   soporte: no es un dato mas, es algo que esa persona tiene que ir a resolver. */
.cta-falta {
  color: #C9302C;
  font-weight: 600; }

.cta-ayuda {
  color: #73879C;
  font-size: 12px; }

.cta-acciones {
  margin-top: 16px; }

/* Los tres pasos de Account/ContrasenaOlvidada. Un `ol` pelado sale con los renglones pegados y
   ocupando todo el ancho de la pantalla, que para un texto que hay que leer entero es lo peor. */
.cta-pasos {
  max-width: 720px;
  padding-left: 20px;
  color: #2A3F54; }

.cta-pasos li {
  margin-bottom: 10px;
  line-height: 1.55; }

.cta-nota {
  margin: 14px 0 0 0;
  color: #5A6E82;
  font-size: 12.5px; }

/* El subrayado de los enlaces de estas pantallas ya no vive aca. Nacio como `.cta-nota a,
   .cta-pasos a` —solo el circuito de la cuenta, para no repintar el sistema entero— y el 12 de agosto
   de 2026 Amilcar pidio extenderlo a todo. Ahora lo hace la seccion «enlaces en el texto», que subraya
   por contexto (`p a`, `address a`, ...) en vez de por pantalla: `cta-nota` es siempre un `<p>`, asi
   que queda cubierta sola, y `cta-pasos` esta nombrada alla porque es un `<ol>`. No repongas la regla
   aca: duplicarla haria creer que estas pantallas son un caso especial, y ya no lo son. */

/* Mismo verde y misma regla que el aviso de soporte: vacio no ocupa lugar. */
.cta-hecho {
  color: #16A085;
  font-size: 14px; }

.cta-hecho:empty {
  display: none; }

@media (max-width: 767px) {
  .cta-ficha {
    grid-template-columns: minmax(0, 1fr); } }
/* La ventana emergente de ingreso, Views/Shared/_ModalDeIngreso.cshtml. Son tres reglas y viven acá
   porque es la misma familia: las pantallas de la cuenta propia. Todo lo demas —el recuadro, el
   encabezado, los campos, los botones— sale de Bootstrap y del tema, sin nada propio. */

/* El aviso de que el correo o la contrasena no son correctos. Vacio no ocupa lugar, igual que
   `.cta-hecho` y que el aviso de «Soporte al sistema»: sin esto, el modal abre con un hueco arriba
   de los campos que no significa nada. */
.ing-error {
  color: #C9302C;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 12px; }

.ing-error:empty {
  display: none; }

/* «¿Olvido su contrasena?», debajo del casillero de recordar. Mismo gris y mismo tamano que el resto
   de las notas de estas pantallas, y con el subrayado que el tema no pone. */
.ing-ayuda {
  margin: 14px 0 0 0;
  font-size: 12.5px; }

.ing-ayuda a {
  text-decoration: underline; }
/** /ficha de cuenta **/
/** precios de productos **/
/* La pantalla CProductos/IndexPlantillaProductos: los productos que no son combustible con su precio
   de venta, en maestro-detalle. La tira de categorias a la izquierda y un renglon ancho por producto
   a la derecha. Todo cuelga del prefijo `pp-`.

   POR QUE MAESTRO-DETALLE Y NO LA TABLA DE SIEMPRE: Amilcar lo eligio el 12 de agosto de 2026 entre
   dos maquetas con datos reales; la otra era esta misma tira con `#datatable` a la derecha. Lo que
   decidio la forma es que ES UNA LISTA DE PRECIOS -el precio se consulta de reojo y en una celda de
   tabla se lee peor-, y que el costo y el precio puestos uno al lado del otro son lo unico que hace
   visibles los 26 productos que cuestan mas de lo que se venden.

   EL CODIGO DE COLOR ES EL DEL SISTEMA, y aca esta la decision que conviene no deshacer:

     · AMBAR (#B9770E sobre #FDF6EC, el mismo de `.contador-aviso`) es «hay que mirar esto», y lo
       lleva UNA sola cosa: `pp-renglon-revisar`, el producto cuyo costo supera al precio.
     · EL IMPUESTO NO VA EN AMBAR. Lo llevan 60 de los 135 productos y es lo normal, no un problema:
       en ambar, media pantalla de ESCOTECHI se leeria como si estuviera mal. Va en la chapa azul
       `pp-impuesto`, que es el molde de `.byc-tipo`: un dato, no una alarma.
     · SIN PRECIO Y SIN COSTO SE QUEDAN EN GRIS, que es lo que Amilcar decidio el 8 de agosto de 2026:
       los cuatro de «Oficina» son insumos que no se venden y estan bien asi.

   DEL MARCO DE LISTADO conserva el encabezado (`encabezado-de-listado` con el desplegable
   «Acciones») y las tarjetas (`tarjetas-de-encabezado`, `.contador*` y `.destacado*`). NO usa
   `.columna-*` ni el cebreado, porque no dibuja una tabla.

   ES HERMANA DE `byc-` Y NO LA MISMA, deliberadamente, que es la regla que ya separo `pcb-` de
   `pdc-`: las dos son tira mas renglones anchos, pero alla el renglon es una cuenta bancaria con
   tres cifras acumulables y aca es un producto con tres precios que no se suman. Lo que SI se
   comparte es el marco. */

/* Las dos columnas. La tira tiene ancho fijo porque su contenido lo tiene -un nombre de categoria y
   una linea de resumen-, y el detalle se lleva el resto con `minmax(0, 1fr)`: sin el cero como
   minimo, una pista de rejilla no baja del ancho de su contenido y los renglones desbordan el panel
   hacia la derecha. Es la misma trampa que ya costo una vuelta en `byc-`. */
.pp-pantalla {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 16px;
  align-items: start; }

/* ----- La tira de categorias ----- */

.pp-tira {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #FFFFFF; }

.pp-tira-cabeza {
  padding: 9px 11px;
  border-bottom: 1px solid #E6E9ED;
  background: #F7F9FA; }

.pp-tira-rotulo {
  display: block;
  margin-bottom: 6px;
  color: #73879C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

/* Las dos cajas de busqueda de la pantalla, la de la tira y la de los productos. Van iguales a
   proposito: son dos filtros del mismo tipo y los escribimos los dos, asi que no hay motivo para
   que se comporten distinto. Las esquinas rectas y el foco propio son los que `custom.css` ya le da
   a `.form-control`. */
.pp-buscador {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #CCD1D6;
  border-radius: 0;
  background: #FFFFFF;
  color: #2A3F54;
  font-size: 12.5px; }

.pp-buscador:focus {
  outline: 2px solid #2A3F54;
  outline-offset: -2px; }

.pp-buscador::placeholder {
  color: #A3AFB8; }

.pp-buscador-ancho {
  width: 230px; }

/* El tope de alto con desplazamiento propio: son 11 renglones -las 10 del catalogo mas «Todas»- y
   sin esto la tira queda mas alta que el panel de al lado cuando hay una categoria chica elegida.
   NO presenta la trampa que obliga a `pdc-` a usar <details>, porque aca no hay ningun menu
   posicionado en absoluto que este contenedor pueda recortar. */
.pp-tira-cuerpo {
  max-height: 430px;
  overflow-y: auto; }

/* Cada categoria es un <a> de verdad -lleva su direccion, se abre en otra pestana y se comparte-,
   asi que hay que apagarle el subrayado y el color de enlace. */
.pp-categoria {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 11px;
  border-top: 1px solid #F0F2F4;
  border-left: 3px solid transparent;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none; }

.pp-categoria:first-child {
  border-top: none; }

.pp-categoria:hover,
.pp-categoria:focus {
  background: #FAFBFC;
  color: inherit;
  text-decoration: none; }

.pp-categoria-elegida,
.pp-categoria-elegida:hover,
.pp-categoria-elegida:focus {
  border-left-color: #2A3F54;
  background: #F2F5F7; }

/* Las categorias del catalogo que ESTA estacion no usa. Se dibujan igual, apagadas: el catalogo
   tiene 10 sin contar combustibles y una estacion usa entre 2 y 4, asi que sin ellas la tira
   quedaria en cuatro renglones y su caja de busqueda no tendria sobre que buscar. */
.pp-categoria-vacia .pp-categoria-nombre {
  color: #A3AFB8;
  font-weight: 400; }

.pp-categoria-nombre {
  color: #2A3F54;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25; }

.pp-categoria-cuenta {
  color: #73879C;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; }

.pp-categoria-nota {
  grid-column: 1 / -1;
  color: #A3AFB8;
  font-size: 10.5px; }

/* En la tira el ambar es la LETRA de la nota y no un fondo: el fondo ya lo usa la categoria elegida
   para decir cual es, y dos fondos peleando por el mismo renglon no se leen. */
.pp-categoria-revisar .pp-categoria-nota {
  color: #B9770E; }

.pp-tira-nada {
  padding: 14px 11px;
  color: #A3AFB8;
  font-size: 12px; }

/* ----- El panel de los productos ----- */

.pp-detalle {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #FFFFFF; }

.pp-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid #E6E9ED;
  background: #F7F9FA; }

.pp-titulo {
  margin: 0;
  color: #2A3F54;
  font-size: 16px;
  font-weight: 700; }

.pp-subtitulo {
  color: #73879C;
  font-size: 11.5px; }

.pp-cabeza-controles {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; }

/* El interruptor que deja a la vista solo los que hay que mirar. El casillero se pinta del ambar de
   la pantalla con `accent-color`, que es una linea y evita dibujar un control propio. */
.pp-solo-revisar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #4A5A6A;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  user-select: none; }

.pp-solo-revisar input {
  margin: 0;
  accent-color: #B9770E; }

.pp-solo-revisar-cuenta {
  color: #B9770E;
  font-weight: 700; }

/* ----- Los renglones de producto ----- */

.pp-renglones {
  display: flex;
  flex-direction: column; }

/* Seis columnas: el codigo, el producto, y las tres cifras, mas los botones. Los minimos estan
   puestos para que ninguna parta su texto con los datos reales mas largos -«COCA COLA 2 LITRO Y
   MONSTER» y «B/. 54.00»-. El borde izquierdo esta siempre, transparente, para que marcar un
   renglon no lo corra tres pixeles respecto de los de al lado. */
.pp-renglon {
  display: grid;
  grid-template-columns: 54px minmax(150px, 1fr) 104px 108px 104px auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-top: 1px solid #F0F2F4;
  border-left: 3px solid transparent; }

.pp-renglon:first-child {
  border-top: none; }

/* El unico ambar de la pantalla: el producto que cuesta mas de lo que se vende. Son 26 de los 64 de
   Auto Servicios y ninguno de las otras tres estaciones. El fondo es apenas mas calido que el
   #FDF6EC de la tarjeta porque aca lo llevan renglones seguidos y a pantalla completa cansa. */
.pp-renglon-revisar {
  border-left-color: #E8C48A;
  background: #FDFAF4; }

/* El codigo con que la estacion numera sus productos. Ancho fijo y en versalitas para que el nombre
   empiece siempre en el mismo lugar. Donde no hay codigo -ESCOTECHI y Petrocomerciales no los
   usan- queda vacio y no se dibuja: ver `.pp-chapa:empty`. */
.pp-chapa {
  display: inline-block;
  padding: 3px 0;
  border: 1px solid #DAE1E7;
  border-radius: 3px;
  background: #F2F5F7;
  color: #4A5A6A;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums; }

/* Una chapa vacia pintaria un recuadro gris hueco, asi que se le apaga la decoracion. PERO NO CON
   `display: none`, que es lo que decia esta regla y se vio recien al fotografiar la pantalla: la
   chapa es un ELEMENTO DE REJILLA, asi que sacarla del flujo corre una columna a todo lo que sigue
   -el nombre se montaba encima del costo y los botones se partian en dos lineas-. Pasaba en los 11
   productos de Auto Servicios que no tienen nombre. Se queda ocupando su celda, invisible. */
.pp-chapa:empty {
  border-color: transparent;
  background: transparent; }

/* Donde NINGUN producto lleva codigo -ESCOTECHI y Petrocomerciales, los 67 entre las dos- la
   columna de la chapa no reserva nada. Lo decide el modelo con `HayCodigos`, porque el CSS no puede
   preguntarle a sus hijos si estan todos vacios. */
.pp-renglones-sin-codigo .pp-renglon {
  grid-template-columns: minmax(150px, 1fr) 104px 108px 104px auto; }

.pp-renglones-sin-codigo .pp-chapa {
  display: none; }

.pp-renglon-sin-precio .pp-chapa {
  background: #FAFBFC;
  color: #A3AFB8; }

.pp-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

.pp-nombre {
  color: #2A3F54;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3; }

/* Once productos de Auto Servicios no tienen nombre, solo el codigo. Antes se veia el numero en el
   lugar del nombre y parecia un nombre; asi se lee que falta el dato. */
.pp-sin-nombre {
  color: #A3AFB8;
  font-style: italic;
  font-weight: 400; }

.pp-linea {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: #73879C;
  font-size: 11px; }

/* El impuesto es un ATRIBUTO del producto, no un problema, asi que va en azul de dato y nunca en
   ambar ni en rojo. Mismo molde que `.byc-tipo`. */
.pp-impuesto {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #BBD6E8;
  border-radius: 3px;
  background: #EAF3F8;
  color: #2C6C93;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  white-space: nowrap; }

/* ----- Las tres cifras ----- */

.pp-cifra {
  display: flex;
  flex-direction: column;
  min-width: 0; }

/* El alto minimo es la misma trampa que ya cerraron `.contador-valor`, `.pdc-cifra-valor` y
   `.byc-cifra-valor`: los formatos de dinero de este sistema ESCRIBEN EL CERO EN BLANCO, asi que
   una cifra en cero no reserva su linea y su rotulo sube, desalineado con los de al lado. */
.pp-cifra-valor {
  min-height: 21px;
  color: #2A3F54;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* «sin costo», «sin precio» e «igual» no son cifras: van chicos y en gris para que no compitan con
   los numeros de al lado, que es lo que la pantalla existe para mostrar. */
.pp-cifra-valor-tenue {
  color: #A3AFB8;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5; }

.pp-cifra-valor-aviso {
  color: #B9770E; }

.pp-cifra-rotulo {
  color: #73879C;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

/* Reemplaza al rotulo «Costo» en el renglon marcado: el ambar dice que hay algo, y esta linea dice
   QUE. Sin ella hay que comparar dos numeros para entender por que el renglon esta pintado. */
.pp-cifra-nota {
  color: #B9770E;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase; }

/* ----- Los botones del renglon ----- */

.pp-acciones {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap; }

/* Con el nombre escrito y no con el icono de 14px de `_EditDeletePartial`: el renglon ancho tiene
   lugar, y en una pantalla que ahora tambien borra conviene que diga cual es cual. */
/* Sirve en <a> y en <button>: «Eliminar» es un borrado, asi que va por POST adentro de un formulario
   y no puede ser un enlace. La clase ya declaraba borde, fondo, color y tamaño, o sea casi todo lo
   que habria que anularle a un <button>; lo unico que faltaba son estas dos ultimas lineas, que un
   <button> no hereda solo. */
.pp-boton {
  padding: 4px 8px;
  border: 1px solid #C6CFD6;
  border-radius: 3px;
  background: #FFFFFF;
  color: #2A3F54;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  /* Igual que en `.accion-fila`: sin declararlo, la regla del tema de la linea 829 le mete
     `margin-bottom: 5px` al <button> y no al <a>, y los dos botones dejan de estar alineados. */
  margin: 0; }

.pp-boton:hover,
.pp-boton:focus {
  border-color: #2A3F54;
  color: #2A3F54;
  text-decoration: none; }

.pp-boton-peligro {
  border-color: #E4B9B8;
  color: #C9302C; }

.pp-boton-peligro:hover,
.pp-boton-peligro:focus {
  border-color: #C9302C;
  color: #C9302C; }

.pp-nada {
  padding: 16px 14px;
  color: #A3AFB8;
  font-size: 12.5px; }

/* LA TRAMPA DEL `hidden`, que en `pdc-` y en `pcb-` costo media hora cada vez: el atributo viene de
   la hoja del navegador y PIERDE contra cualquier `display` declarado aca. Los cuatro elementos que
   el guion esconde al filtrar lo declaran, asi que sin estas reglas la busqueda no escondería nada
   aunque el contador de abajo si cambie. */
.pp-renglon[hidden],
.pp-categoria[hidden],
.pp-tira-nada[hidden],
.pp-nada[hidden] {
  display: none; }

/* El aviso de cuando se actualizan los precios. Es la misma caja que los avisos de las pantallas
   de Soporte: decide cuando hay que tocar esta pantalla, y en gris se leia como un pie de pagina. */
.pp-aviso {
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid #E8C48A;
  border-left: 3px solid #F39C12;
  border-radius: 3px;
  background: #FDF6EC;
  color: #7D5B1E;
  font-size: 12.5px; }

.pp-vacio {
  padding: 30px 20px;
  border: 1px dashed #C3CED8;
  border-radius: 4px;
  text-align: center;
  color: #73879C; }

/* En pantalla angosta la tira se va arriba y los renglones se apilan: con seis columnas de rejilla
   sobre 400px no hay reparto que se lea. Es la misma regla de `byc-`. */
@media (max-width: 900px) {
  .pp-pantalla {
    grid-template-columns: 1fr; }

  .pp-renglon {
    grid-template-columns: 1fr; }

  .pp-acciones {
    justify-content: flex-start; }
}
/** /precios de productos **/
/** precios de combustibles **/
/* El tablero de precios de CProductos/IndexPlantillaCombustibles. NO ES UN LISTADO y por eso no
   reutiliza `.columna-*` ni la tabla: las cuatro estaciones tienen exactamente TRES combustibles
   cada una, asi que se dibuja como el rotulo que se lee desde la calle, un panel por combustible
   con el precio en grande. Lo decidio Amilcar el 8 de agosto de 2026 sobre una maqueta.

   DEL MARCO DE LISTADO conserva el encabezado (`encabezado-de-listado`, con el desplegable
   «Acciones») y las tarjetas de contador (`tarjetas-de-encabezado`). Lo propio es de acá para
   abajo, y lleva prefijo porque no se comparte. */

.surtidores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px; }

/* `flex-basis` de 250px: con tres paneles entran en fila en cualquier pantalla de escritorio, y en
   una angosta caen enteros al renglon de abajo en vez de encogerse hasta que el precio no se lea. */
.surtidor {
  display: flex;
  flex: 1 1 250px;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #D6DDE3;
  border-radius: 6px;
  background: #FFFFFF;
  overflow: hidden; }

/* EL COLOR ES LA NORMA DE LAS ESTACIONES DE SERVICIO —91 amarillo, 95 verde, diesel rojo—, no una
   eleccion de diseño: esta para reconocer el combustible de un vistazo.

   POR ESO VIVE SOBRE EL TABLERO OSCURO Y NO SOBRE EL FONDO CLARO. En el resto de la aplicacion el
   ambar significa «conviene mirar esto» y el rojo «hay que resolverlo»; sobre este azul oscuro no
   hay ningun color de estado con el que puedan confundirse, asi que un panel rojo se lee como
   «diesel» y no como «algo anda mal». */
.surtidor-91 { --grado: #F2C40C; }
.surtidor-95 { --grado: #35B058; }
.surtidor-diesel { --grado: #E0483A; }

/* Gris para el combustible cuyo nombre no dice si es 91, 95 o diesel. Se dibuja igual: lo que no se
   puede reconocer no se esconde. */
.surtidor-sin-grado { --grado: #93A4B3; }

.surtidor-tablero {
  position: relative;
  padding: 16px 18px 15px;
  background: #22313F;
  color: #FFFFFF; }

.surtidor-tablero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--grado); }

/* Tinta oscura sobre los tres colores y no blanca sobre el rojo: la etiqueta mide 11px y en negrita,
   y el blanco sobre un rojo legible como rojo no llega al contraste que ese tamaño necesita. */
.surtidor-grado {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 9px;
  border-radius: 3px;
  background: var(--grado);
  color: #1A1206;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em; }

.surtidor-nombre {
  display: block;
  margin-bottom: 6px;
  overflow: hidden;
  color: #C6D2DC;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap; }

.surtidor-precio {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums; }

.surtidor-moneda {
  color: #8FA3B4;
  font-size: 15px;
  font-weight: 600; }

.surtidor-cifra {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em; }

.surtidor-unidad {
  color: #8FA3B4;
  font-size: 12px; }

/* Un combustible sin precio no se puede vender, asi que el hueco se nombra en vez de dejarse en
   blanco; el contador rojo del encabezado dice cuantos hay. */
.surtidor-sin-precio {
  display: block;
  padding: 9px 0 8px;
  color: #E8A9A2;
  font-size: 15px;
  font-style: italic; }

.surtidor-pie {
  padding: 12px 18px 14px; }

.surtidor-dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 12.5px; }

.surtidor-dato + .surtidor-dato {
  border-top: 1px dotted #E1E7EB; }

.surtidor-rotulo {
  color: #73879C; }

.surtidor-valor {
  font-weight: 600;
  font-variant-numeric: tabular-nums; }

.surtidor-igual {
  color: #9AA9B5;
  font-style: italic; }

.surtidor-acciones {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #E6E9ED; }

.pc-aviso {
  margin: 18px 0 0;
  color: #73879C;
  font-size: 12.5px;
  line-height: 1.55; }

.pc-vacio {
  margin: 6px 0 0;
  padding: 22px;
  border: 1px dashed #C3CED8;
  border-radius: 4px;
  color: #73879C;
  text-align: center; }

/* El rango de precios es un texto, no un numero de dos cifras: en la tarjeta de contador entra
   apretado con los 22px de `.contador-valor`. */
.pc-rango {
  font-size: 15px; }

/** /precios de combustibles **/
/** tabla de exportacion **/
/* LA TABLA QUE ALIMENTA EL PDF Y LA HOJA DE EXCEL, y que no se ve. Lo que hay que imprimir de una
   pantalla de tarjetas sigue siendo una tabla, asi que en vez de un informe propio la vista dibuja
   ademas esta tabla oculta, desde el MISMO modelo que las tarjetas -no hay dos verdades- y
   `listado.js` la usa cuando no encuentra `#datatable`.

   Sin prefijo de pantalla a proposito: la comparten «Precios de combustibles» y «Plantilla de
   turnos», que son las dos pantallas que imprimen sin ser un listado. */
.tabla-de-exportacion {
  display: none; }
/** /tabla de exportacion **/
/** bancos y cuentas **/
/* La pantalla BancosYCuentas/Index: los bancos de la estacion con sus cuentas, en maestro-detalle.
   La tira de bancos a la izquierda y el banco elegido a la derecha, con un renglon ancho por cuenta.

   POR QUE MAESTRO-DETALLE Y NO DOS LISTADOS: eran el mismo dato a dos alturas -«Bancos» mostraba
   nombre y direccion, y desde cada banco se entraba a «Cuentas», que volvia a mostrar el banco en su
   primera columna-. Amilcar eligio esta forma el 10 de agosto de 2026 entre dos maquetas con datos
   reales. La otra maqueta era un bloque por banco con sus cuentas adentro, sin nada que elegir.

   POR QUE NO HAY CAJA DE BUSQUEDA, que su hermana `pdc-` si tiene: son 1 o 2 bancos y 1 o 2 cuentas
   por estacion -medido sobre las cuatro-, asi que un filtro no filtraria nada. Por lo mismo la tira
   no lleva `max-height` con `overflow-y: auto`, y por lo mismo NO se presenta la trampa que obliga a
   `pdc-` a usar <details> para su menu: no hay contenedor que recorte nada posicionado.

   ES DELIBERADAMENTE HERMANA DE `pdc-` Y NO LA MISMA. Los renglones se parecen porque el sistema
   dibuja asi sus pantallas unificadas, pero aquella tiene dos buscadores, un menu por renglon y un
   separador de «sin movimiento» que aca no hacen falta. Lo que SI se comparte es el marco:
   `.encabezado-de-listado*` para la barra de arriba, `.contador*` y `.tarjetas-de-dinero` para las
   tarjetas, `.tabla-de-exportacion` para el PDF y la hoja de Excel, y `SiSeguroDeEliminar` de
   custom.js para la confirmacion del borrado. */

.byc-nada {
  padding: 14px;
  color: #73879C;
  font-size: 13px; }

/* Las dos columnas. La tira tiene ancho fijo porque su contenido lo tiene -un nombre de banco y dos
   lineas de resumen-, y el detalle se lleva el resto con `minmax(0, 1fr)`: sin el cero como minimo,
   una fila de rejilla no baja del ancho de su contenido y los renglones de cuenta desbordaban el
   panel hacia la derecha. */
.byc-pantalla {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start; }

.byc-tira {
  display: flex;
  flex-direction: column;
  gap: 8px; }

/* Cada banco es un <a> de verdad, asi que hay que apagarle el subrayado y el color de enlace. */
.byc-banco {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #E6E9ED;
  border-left: 3px solid #E6E9ED;
  border-radius: 3px;
  background: #fff;
  color: inherit;
  text-decoration: none; }

.byc-banco:hover,
.byc-banco:focus {
  border-color: #C6CFD6;
  color: inherit;
  text-decoration: none; }

.byc-banco-elegido {
  border-left-color: #2A3F54;
  background: #F2F5F7; }

/* Gris y no ambar: un banco configurado y sin usar NO es un error. Es el mismo tratamiento que
   reciben los clientes sin movimiento de «Periodos de cierre». Las dos cuentas de Petrocomerciales
   de Azuero estan asi desde que se cargaron. */
.byc-banco-quieto .byc-inicial {
  background: #A3AFB8; }

.byc-inicial {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2A3F54;
  color: #fff;
  font-size: 15px;
  font-weight: 700; }

.byc-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

.byc-nombre {
  color: #2A3F54;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25; }

.byc-resumen {
  color: #73879C;
  font-size: 11.5px; }

/* ----- El banco elegido ----- */

.byc-detalle {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #fff; }

.byc-cabeza {
  padding: 12px 16px;
  border-bottom: 1px solid #E6E9ED;
  background: #F7F9FA; }

.byc-titulo {
  margin: 0 0 8px;
  color: #2A3F54;
  font-size: 18px;
  font-weight: 700; }

/* Los seis datos de contacto del banco. Se envuelven solos: cinco de los siete bancos de las cuatro
   estaciones no tienen ninguno, y este es el unico sitio donde se ven y donde se entiende que se
   pueden llenar. */
.byc-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 10px; }

.byc-campo {
  display: flex;
  flex-direction: column; }

.byc-campo-rotulo {
  color: #73879C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

.byc-campo-valor {
  color: #4A5A6A;
  font-size: 13px; }

/* ----- Los renglones de cuenta ----- */

.byc-cuentas {
  display: flex;
  flex-direction: column; }

/* Seis columnas: que clase de cuenta es, cual es, y las tres cifras, mas los botones. Los minimos
   estan puestos para que ninguna parta su texto con los datos reales mas largos -«AUTO SERVICIOS
   VERAGUAS, S.A. (PLANILLA)» y «B/. 12,061,340.98»-. */
.byc-cuenta {
  display: grid;
  grid-template-columns: 92px minmax(190px, 1.5fr) 76px 104px 152px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid #F0F2F4; }

.byc-cuenta:first-child {
  border-top: none; }

.byc-cuenta-quieta .byc-tipo {
  color: #A3AFB8; }

.byc-tipo {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid #DAE1E7;
  border-radius: 3px;
  background: #F2F5F7;
  color: #4A5A6A;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: center; }

.byc-cuenta-nombre {
  color: #2A3F54;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3; }

.byc-numero {
  color: #73879C;
  font-size: 12px;
  font-variant-numeric: tabular-nums; }

.byc-cifra {
  display: flex;
  flex-direction: column;
  min-width: 0; }

/* El alto minimo es la misma trampa que ya cerraron `.contador-valor` y `.pdc-cifra-valor`: los
   formatos de dinero de este sistema ESCRIBEN EL CERO EN BLANCO, asi que una cuenta sin movimiento
   -las dos de Petrocomerciales- no reserva la linea y su rotulo sube, desalineado con los de al
   lado. */
.byc-cifra-valor {
  min-height: 21px;
  color: #2A3F54;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; }

.byc-cifra-rotulo {
  color: #73879C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

.byc-linea {
  color: #4A5A6A;
  font-size: 12.5px; }

.byc-tenue {
  color: #73879C; }

/* ----- Los botones ----- */

.byc-acciones {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap; }

/* En el encabezado del banco los botones van a la izquierda, debajo del nombre. */
.byc-cabeza .byc-acciones {
  justify-content: flex-start; }

.byc-boton {
  padding: 4px 8px;
  border: 1px solid #C6CFD6;
  border-radius: 3px;
  background: #fff;
  color: #2A3F54;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none; }

.byc-boton:hover,
.byc-boton:focus {
  border-color: #2A3F54;
  color: #2A3F54;
  text-decoration: none; }

.byc-boton-fuerte {
  border-color: #2A3F54;
  background: #2A3F54;
  color: #fff; }

.byc-boton-fuerte:hover,
.byc-boton-fuerte:focus {
  background: #1F2F3F;
  color: #fff; }

.byc-boton-peligro {
  border-color: #E4B9B8;
  color: #C9302C; }

.byc-boton-peligro:hover,
.byc-boton-peligro:focus {
  border-color: #C9302C;
  color: #C9302C; }

/* Apagado va como <span> y no como <button disabled>: un elemento deshabilitado no dispara eventos
   de raton, asi que su title -que es el motivo de no poder borrar- no se mostraria nunca. */
.byc-boton-apagado {
  border-color: #EDEFF1;
  background: #FAFBFC;
  color: #A3AFB8;
  cursor: not-allowed; }

/* El formulario de eliminar es un <form> propio dentro de la fila de botones: sin esto se lleva el
   ancho de una linea entera y empuja al de al lado al renglon de abajo. Es la misma regla que
   `.pt-forma`. */
.byc-forma {
  display: inline;
  margin: 0; }

/* En pantalla angosta la tira se va arriba y los renglones se apilan: con seis columnas de rejilla
   sobre 400px no hay reparto que se lea. */
@media (max-width: 900px) {
  .byc-pantalla {
    grid-template-columns: 1fr; }

  .byc-cuenta {
    grid-template-columns: 1fr; }

  .byc-acciones {
    justify-content: flex-start; }
}
/** /bancos y cuentas **/
/** tanques y mangueras **/
/* La pantalla TanquesYMangueras/Index: los tanques de la estacion y, en el elegido, lo que pasa por
   el repartido en cuatro pestanas —mangueras, descargas, transferencias e inventario—.

   POR QUE MAESTRO-DETALLE: unifica dos listados encadenados que eran el mismo dato a dos alturas
   —«Tanques» tenia una insignia y un enlace «Mangueras», y ese enlace abria un listado que volvia a
   mostrar el tanque en DOS de sus columnas porque todas sus filas eran del mismo—. Amilcar la
   eligio el 11 de agosto de 2026 entre dos maquetas con datos reales; la otra era un renglon ancho
   por tanque con las mangueras en un <details>.

   LO QUE DECIDIO LA FORMA FUE CONTAR: de los 14 tanques de ESCOTECHI y de Petrocomerciales SOLO 4
   tienen mangueras, y el mas cargado llega a 26. Los otros diez son cisternas que reciben descargas
   y le pasan combustible a los que surten, asi que necesitaban las otras tres pestanas: desde el
   tanque no se veia nada de ellos.

   ES HERMANA DE `byc-` Y NO LA MISMA, y la diferencia es una sola: ESTA SI LLEVA CAJA DE BUSQUEDA,
   en la tira y en cada pestana, porque Amilcar la pidio. La de la tira la resuelve
   tanques-y-mangueras.js —la tira no es una tabla—; las de las pestanas son las de DataTables,
   porque adentro de cada pestana va `#datatable`. De ahi que la tira SI lleve `max-height` con
   `overflow-y: auto`: con el filtro puesto se recorta sola, y son 14 renglones contra los 2 bancos
   de aquella.

   LO QUE SE COMPARTE: `.encabezado-de-listado*` para la barra de arriba, `.contador*` para las
   tarjetas, `.tarjetas-de-listado` para las que dibuja listado.js siguiendo el filtro de la pestana,
   `tanque-color-N` para el color del tanque —la misma paleta del patio, repartida por el mismo
   numero, para que las dos pantallas pinten el mismo tanque igual— y `SiSeguroDeEliminar` de
   custom.js para la confirmacion del borrado. */

.tym-nada {
  padding: 14px;
  color: #73879C;
  font-size: 13px; }

/* Un pie de tabla que explica lo que la tabla no dice sola: de que lado esta el tanque en una
   transferencia, o donde vive la merma del inventario. */
.tym-pie {
  margin: 0 0 10px;
  font-size: 12.5px; }

/* Las dos columnas. La tira tiene ancho fijo porque su contenido lo tiene —un nombre de tanque y dos
   lineas de resumen—, y el detalle se lleva el resto con `minmax(0, 1fr)`: sin el cero como minimo,
   una fila de rejilla no baja del ancho de su contenido y una tabla de ocho columnas desbordaba el
   panel hacia la derecha. */
.tym-pantalla {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 16px;
  align-items: start; }

.tym-tira-columna {
  display: flex;
  flex-direction: column;
  gap: 8px; }

/* ----- La caja de busqueda de la tira ----- */

.tym-buscador {
  display: flex;
  align-items: center;
  gap: 6px; }

.tym-buscador-rotulo {
  margin: 0;
  color: #73879C;
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap; }

/* `flex: 1 1 auto` con `min-width: 0`: sin el minimo en cero un campo de formulario no baja de su
   ancho por omision y empuja la cuenta fuera de la columna. */
.tym-buscador-campo {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 2px 8px;
  font-size: 12.5px; }

.tym-buscador-cuenta {
  color: #73879C;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* ----- La tira ----- */

/* CON `overflow-y` a diferencia de la tira de «Bancos y Cuentas», y el motivo es el buscador: son 14
   tanques y no 2 bancos. La consecuencia hay que tenerla presente si algun dia se le agrega un menu
   por renglon: un contenedor que recorta tambien recorta lo que se posicione en absoluto adentro, y
   es exactamente la trampa que obligo a `pdc-` a usar <details> para el suyo. */
.tym-tira {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 640px;
  overflow-y: auto; }

/* Cada tanque es un <a> de verdad, asi que hay que apagarle el subrayado y el color de enlace. */
.tym-tanque {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #E6E9ED;
  border-left: 3px solid #E6E9ED;
  border-radius: 3px;
  background: #fff;
  color: inherit;
  text-decoration: none; }

.tym-tanque:hover,
.tym-tanque:focus {
  border-color: #C6CFD6;
  color: inherit;
  text-decoration: none; }

.tym-tanque-elegido {
  border-left-color: #2A3F54;
  background: #F2F5F7; }

/* Gris y no ambar: un tanque sin mangueras NO es un error. Son las cisternas y los depositos, que
   existen justamente para eso —diez de los catorce en las dos estaciones grandes—. Es el mismo
   tratamiento que reciben los bancos sin usar de `byc-` y los clientes sin movimiento de `pdc-`. */
.tym-tanque-quieto .tym-resumen {
  color: #A3AFB8; }

.tym-tanque-quieto .tym-chapa {
  opacity: .45; }

/* La chapa lleva ademas `tanque-color-N`, que es la que le pone el fondo. Aca no se declara
   `background` para no ganarle por orden a la paleta. */
.tym-chapa {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  color: #fff;
  font-size: 13px;
  font-weight: 700; }

.tym-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

/* Con puntos suspensivos: «Tanque No. 7 Cisterna Gasolina 91 / 9100 galones» no entra en 286px, y
   partirlo en tres lineas descuadraria la altura de los renglones de la tira. El nombre completo
   esta en el `title` del enlace y en el titulo del panel. */
.tym-nombre {
  color: #2A3F54;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.tym-resumen {
  color: #73879C;
  font-size: 11px; }

/* ----- El tanque elegido ----- */

.tym-detalle {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #fff; }

.tym-cabeza {
  padding: 12px 16px;
  border-bottom: 1px solid #E6E9ED;
  background: #F7F9FA; }

.tym-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
  color: #2A3F54;
  font-size: 18px;
  font-weight: 700; }

/* Lleva ademas `tanque-color-N`, igual que la chapa. */
.tym-combustible {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

/* Los cuatro datos del tanque y sus tres botones, en el MISMO renglon: los botones van despues de
   «Capacidad de venta» y contra el borde derecho del panel, no debajo del nombre. Es lo unico en que
   esta cabeza se separa de la de `byc-` y la de `ayd-`, que siguen con los botones arriba.

   Con `space-between` y SIN `margin-left: auto` en los botones: asi, cuando la pantalla se angosta y
   caen a su propia linea, esa linea tiene un solo elemento y `space-between` lo deja a la IZQUIERDA,
   que es donde se lo busca en un telefono. Con el margen automatico se quedarian pegados a la
   derecha, solos y lejos de todo. */
.tym-cabeza-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 22px;
  margin-top: 10px; }

/* `align-self` en los botones y no `align-items` en la fila: puesto en el contenedor alinearia por
   abajo tambien a los cuatro campos, y el dia que un valor ocupe dos lineas —un nombre de unidad
   largo en una pantalla angosta— los rotulos, que hoy quedan todos a la misma altura, se
   desalinearian. Alineados al pie, los botones quedan sobre la linea de los valores y no sobre la de
   los rotulos. */
.tym-cabeza-fila .tym-acciones {
  align-self: flex-end; }

/* El `margin-top` que separa esto del titulo lo pone `.tym-cabeza-fila`, que es hoy el que cuelga
   del titulo. */
.tym-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px; }

.tym-campo {
  display: flex;
  flex-direction: column; }

.tym-campo-rotulo {
  color: #73879C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

.tym-campo-valor {
  color: #4A5A6A;
  font-size: 13px;
  font-variant-numeric: tabular-nums; }

/* ----- Las cuatro pestanas ----- */

/* Son ENLACES y no botones de JavaScript: la pestana viaja en la direccion junto con el tanque, asi
   que se puede compartir, se ve sin JavaScript y volver de una ficha reabre la misma. El
   `margin-bottom` negativo con el borde inferior transparente es lo que hace que la elegida se
   fusione con el panel de abajo en vez de quedar flotando encima de una raya. */
.tym-pestanas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px 16px 0;
  border-bottom: 1px solid #E6E9ED;
  background: #F7F9FA; }

.tym-pestana {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: -1px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: transparent;
  color: #73879C;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none; }

.tym-pestana:hover,
.tym-pestana:focus {
  background: #EDF1F4;
  color: #2A3F54;
  text-decoration: none; }

.tym-pestana-elegida,
.tym-pestana-elegida:hover,
.tym-pestana-elegida:focus {
  border-color: #E6E9ED;
  background: #fff;
  color: #2A3F54; }

.tym-pestana-cuenta {
  padding: 1px 7px;
  border-radius: 9px;
  background: #E6EAEE;
  color: #5A6B7C;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums; }

.tym-pestana-elegida .tym-pestana-cuenta {
  background: #2A3F54;
  color: #fff; }

/* En cero va apagada: asi no hay que hacer clic para descubrir que no hay nada. Va DESPUES de la
   regla de la elegida para ganarle cuando las dos apliquen —una pestana elegida y vacia—. */
.tym-pestana-cuenta-cero,
.tym-pestana-elegida .tym-pestana-cuenta-cero {
  background: #F0F2F4;
  color: #A3AFB8; }

.tym-panel {
  padding: 14px 16px; }

/* La PRIMERA columna de las cuatro pestanas no se parte, y no es cosmetico: en las cuatro es la que
   identifica el renglon —la isla, el numero de descarga, la fecha y el periodo—, y en la de
   transferencias «2024-08-19» se partia en dos lineas porque «El otro tanque» se lleva el ancho.
   Una fecha en dos renglones se lee mal y ademas descuadra el alto de las filas. Se vio
   fotografiando.

   Va por posicion y no por una clase en el <th>: DataTables solo repite en las celdas las clases que
   estan en su `columnDefs` —`columna-numero` y `columna-acciones`—, asi que una clase nueva se
   quedaria en el encabezado. */
.tym-panel table.table td:first-child,
.tym-panel table.table th:first-child {
  white-space: nowrap; }

/* ----- Las pildoras de estado ----- */

.tym-pildora {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #DAE1E7;
  border-radius: 10px;
  background: #F2F5F7;
  color: #4A5A6A;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap; }

/* Ambar: la manguera esta fuera de uso. El listado que esta pantalla reemplaza NO las mostraba
   —filtraba Vigente y tenia igual una columna «Estado», que por eso decia siempre «Vigente»—; son 16
   en ESCOTECHI y 20 en Petrocomerciales. Amilcar pidio el 11 de agosto de 2026 que se vieran. */
.tym-pildora-desusada {
  border-color: #F0DCC0;
  background: #FDF6EC;
  color: #B9770E; }

/* Rojo: hay algo mal en los datos y conviene mirarlo. Lo llevan la manguera repetida en la misma
   surtidora, la que cuelga de una surtidora de otra estacion, y la transferencia que va de un tanque
   a si mismo. Los tres son hallazgos medidos, no casos teoricos. */
.tym-pildora-alerta {
  border-color: #E4B9B8;
  background: #FDF1F0;
  color: #C9302C; }

.tym-pildora-entra {
  border-color: #BFE3DA;
  background: #EFF9F6;
  color: #1B8570; }

.tym-pildora-sale {
  border-color: #C9D8E4;
  background: #F1F6FA;
  color: #3A6D96; }

/* ----- Los botones ----- */

.tym-acciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap; }

.tym-boton {
  padding: 4px 8px;
  border: 1px solid #C6CFD6;
  border-radius: 3px;
  background: #fff;
  color: #2A3F54;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none; }

.tym-boton:hover,
.tym-boton:focus {
  border-color: #2A3F54;
  color: #2A3F54;
  text-decoration: none; }

.tym-boton-fuerte {
  border-color: #2A3F54;
  background: #2A3F54;
  color: #fff; }

.tym-boton-fuerte:hover,
.tym-boton-fuerte:focus {
  background: #1F2F3F;
  color: #fff; }

.tym-boton-peligro {
  border-color: #E4B9B8;
  color: #C9302C; }

.tym-boton-peligro:hover,
.tym-boton-peligro:focus {
  border-color: #C9302C;
  color: #C9302C; }

/* Apagado va como <span> y no como <button disabled>: un elemento deshabilitado no dispara eventos
   de raton, asi que su title —que es el motivo de no poder borrar, y aca es el que enumera las
   cuatro tablas— no se mostraria nunca. */
.tym-boton-apagado {
  border-color: #EDEFF1;
  background: #FAFBFC;
  color: #A3AFB8;
  cursor: not-allowed; }

/* El formulario de eliminar es un <form> propio dentro de la fila de botones: sin esto se lleva el
   ancho de una linea entera y empuja al de al lado al renglon de abajo. Misma regla que `.byc-forma`. */
.tym-forma {
  display: inline;
  margin: 0; }

/* La capacidad de venta de la ventana emergente, que se calcula mientras se escribe y no es un
   campo: la guarda el servidor multiplicando capacidad por conversion. */
.tym-calculado {
  margin: 0;
  color: #2A3F54;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* En pantalla angosta la tira se va arriba y deja de recortarse: con la tabla de la pestana debajo,
   una tira con scroll propio sobre 400px obliga a dos gestos para llegar al mismo sitio. */
@media (max-width: 900px) {
  .tym-pantalla {
    grid-template-columns: 1fr; }

  .tym-tira {
    max-height: none;
    overflow-y: visible; }
}
/** /tanques y mangueras **/
/** acreedores y deducciones **/
/* Las pantallas AcreedoresYDeducciones/Index y EmpleadosYDeducciones/Index: la tira de la izquierda
   y, en el elegido, las deducciones que le cuelgan.

   UN SOLO BLOQUE PARA LAS DOS PANTALLAS, y no es un atajo. Son el mismo componente con el maestro
   cambiado de lado: una deduccion tiene DOS padres —el acreedor y el empleado— y hasta el 11 de
   agosto de 2026 se listaba desde los dos con la misma vista, que repetia el nombre del padre en una
   de sus columnas. Por eso las clases no nombran ningun lado: `ayd-maestro` es un acreedor en una
   pantalla y un empleado en la otra, y `ayd-renglon-nombre` es el empleado alla y el acreedor aca.
   Duplicarlo con un prefijo `eyd-` serian doscientas lineas que hay que cambiar de a dos.

   POR QUE MAESTRO-DETALLE: unifica dos listados encadenados que eran el mismo dato a dos alturas
   —«Acreedores» tenia una insignia y un enlace «Deducciones», y ese enlace abria un listado que
   volvia a mostrar el acreedor en su primera columna porque todas sus filas eran del mismo—. Amilcar
   la eligio el 12 de agosto de 2026 entre dos maquetas con datos reales; la otra era un bloque por
   acreedor con sus deducciones adentro, todos abiertos a la vez.

   LO QUE DECIDIO LA FORMA FUE CONTAR: son 8 acreedores y 5 deducciones en TODO el sistema, y ningun
   acreedor tiene mas de una. Del lado de los empleados son 31, de los que solo 4 deben algo.

   LLEVA CAJA DE BUSQUEDA EN LA TIRA, y hasta el 12 de agosto de 2026 no la llevaba: la pidio Amilcar
   para las dos pantallas, como ya habia hecho con `tym-`. Lo medido sigue en pie del lado de los
   acreedores —tres renglones por estacion, un filtro no filtra nada—, pero del lado de los empleados
   son 31 y ahi si trabaja; va escrita igual en las dos vistas porque son el mismo componente y
   partirlas seria mantener dos. La resuelve deducciones.js y no DataTables: la tira no es una tabla.
   De ahi que la tira lleve ahora `max-height` con `overflow-y`, igual que la de `tym-`.

   LO QUE RECORTA, RECORTA TODO: un contenedor con `overflow-y` recorta tambien lo que se posicione
   en absoluto adentro, asi que si algun dia la tira gana un menu por renglon hay que resolverlo como
   `pdc-`, con un <details>, y no con un desplegable posicionado.

   Lo que NO esta aca porque ya existe: `.x_panel` y `.x_title` para el recuadro,
   `.encabezado-de-listado*` para la barra de arriba, `.contador*` y `.tarjetas-de-dinero` para las
   tarjetas, `.tabla-de-exportacion` para el PDF y la hoja de Excel, y `SiSeguroDeEliminar` de
   custom.js para la confirmacion del borrado. */

.ayd-nada {
  padding: 14px;
  color: #73879C;
  font-size: 13px; }

/* Las dos columnas. La tira tiene ancho fijo porque su contenido lo tiene, y el detalle se lleva el
   resto con `minmax(0, 1fr)`: sin el cero como minimo, una fila de rejilla no baja del ancho de su
   contenido y los renglones desbordaban el panel hacia la derecha.

   320px y no los 300 de `byc-`: «Coop. de Servicios Multiples Nueva Union R.L.» es el nombre de
   acreedor mas largo del sistema y a 300 partia en cuatro lineas. */
.ayd-pantalla {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start; }

/* La columna de la izquierda entera: la caja de busqueda, la tira y el aviso de que no coincidio
   nada. La tira sola no alcanza como contenedor porque ella es la que recorta. */
.ayd-tira-columna {
  display: flex;
  flex-direction: column;
  gap: 8px; }

/* ----- La caja de busqueda de la tira ----- */

.ayd-buscador {
  display: flex;
  align-items: center;
  gap: 6px; }

.ayd-buscador-rotulo {
  margin: 0;
  color: #73879C;
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap; }

/* `flex: 1 1 auto` con `min-width: 0`: sin el minimo en cero un campo de formulario no baja de su
   ancho por omision y empuja la cuenta fuera de la columna. Es la misma regla que `tym-`. */
.ayd-buscador-campo {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 2px 8px;
  font-size: 12.5px; }

.ayd-buscador-cuenta {
  color: #73879C;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* ----- La tira ----- */

/* 640px es lo mismo que `tym-`, y da unos ocho renglones: los de esta son mas altos porque llevan
   dos lineas de resumen y no una. */
.ayd-tira {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 640px;
  overflow-y: auto; }

/* Cada renglon de la tira es un <a> de verdad, asi que hay que apagarle el subrayado y el color. */
.ayd-maestro {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #E6E9ED;
  border-left: 3px solid #E6E9ED;
  border-radius: 3px;
  background: #fff;
  color: inherit;
  text-decoration: none; }

.ayd-maestro:hover,
.ayd-maestro:focus {
  border-color: #C6CFD6;
  color: inherit;
  text-decoration: none; }

.ayd-elegido {
  border-left-color: #2A3F54;
  background: #F2F5F7; }

/* Gris y no ambar: un acreedor cargado al que no le debe nadie NO es un error, y un empleado que no
   debe nada es lo normal. Es el mismo trato que reciben los bancos sin cuentas. Los tres acreedores
   de Petrocomerciales de Azuero estan asi desde que se cargaron, y de los 31 empleados del sistema
   solo 4 deben algo. */
.ayd-quieto .ayd-inicial {
  background: #A3AFB8; }

.ayd-inicial {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2A3F54;
  color: #fff;
  font-size: 15px;
  font-weight: 700; }

.ayd-identidad {
  display: flex;
  flex-direction: column;
  min-width: 0; }

.ayd-nombre {
  color: #2A3F54;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25; }

.ayd-resumen {
  color: #73879C;
  font-size: 11.5px; }

/* ----- El elegido ----- */

.ayd-detalle {
  border: 1px solid #E6E9ED;
  border-radius: 3px;
  background: #fff; }

.ayd-cabeza {
  padding: 12px 16px;
  border-bottom: 1px solid #E6E9ED;
  background: #F7F9FA; }

.ayd-titulo {
  margin: 0 0 8px;
  color: #2A3F54;
  font-size: 18px;
  font-weight: 700; }

/* La ficha del empleado, en la pantalla de empleados: documento y numero. En la de acreedores no se
   dibuja, porque un acreedor no tiene mas dato que su nombre —es la unica columna que tenia su
   listado viejo—. */
.ayd-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 10px; }

.ayd-campo {
  display: flex;
  flex-direction: column; }

.ayd-campo-rotulo {
  color: #73879C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

.ayd-campo-valor {
  color: #4A5A6A;
  font-size: 13px; }

/* ----- Los renglones de deduccion ----- */

.ayd-deducciones {
  display: flex;
  flex-direction: column; }

/* Seis columnas: quien debe, las dos cifras cargadas, los cheques, lo que falta pagar, y los
   botones. Los minimos estan puestos para que ninguna parta su texto con los datos reales mas largos
   —«Coop. de Servicios Multiples Nueva Union R.L.» del lado de empleados, y «B/. 1,000.00» en las
   cifras—.

   LA SEXTA ES DEL 21 DE AGOSTO DE 2026: hasta ese dia el renglon mostraba la deuda original al lado
   del contador de cheques y no los restaba, asi que anunciaba «B/. 200,00 de deuda» sobre una
   deduccion a la que ya se le habian girado B/. 219,00. Va DESPUES de los cheques porque sale de
   ellos. */
.ayd-deduccion {
  display: grid;
  grid-template-columns: minmax(190px, 1.6fr) 116px 116px 84px 116px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid #F0F2F4; }

.ayd-deduccion:first-child {
  border-top: none; }

/* Una deduccion cargada sin deuda y sin pago. Cuatro de las cinco del sistema tienen la deuda en
   cero y dos tienen tambien el pago, asi que esto es la mayoria y no un caso de borde. El gris dice
   que esta vacia sin decir que esta mal: llenarla es decision de quien carga los datos. */
.ayd-deduccion-quieta .ayd-renglon-nombre {
  color: #5A6E82; }

.ayd-renglon-nombre {
  color: #2A3F54;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3; }

.ayd-cifra {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none; }

/* El alto minimo es la misma trampa que ya cerraron `.contador-valor` y `.byc-cifra-valor`: los
   formatos de dinero de este sistema ESCRIBEN EL CERO EN BLANCO, asi que una cifra en cero no
   reserva la linea y su rotulo sube, desalineado con los de al lado. Aca ademas el renglon escribe
   una raya en vez del cero —ver MdlDeduccionEnPantalla.DeudaTexto—, pero el minimo se queda: es lo
   que sostiene la fila si algun dia vuelve a escribirse en blanco. */
.ayd-cifra-valor {
  min-height: 21px;
  color: #2A3F54;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; }

.ayd-cifra-rotulo {
  color: #73879C;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; }

.ayd-cifra-cero .ayd-cifra-valor {
  color: #A3AFB8; }

/* Una deduccion a la que ya se le giro toda la deuda. El verde es el `#169F85` del tema bajado para
   que contraste sobre blanco, el mismo que usan los iconos de `.accion-fila`. */
.ayd-cifra-saldada .ayd-cifra-valor {
  color: #169F85; }

/* Y una a la que se le giro MAS que la deuda cargada. Ambar y no verde aunque tambien este saldada:
   es lo que hay que mirar —o la deuda quedo vieja, o el cheque no era solo de esto—, y el verde
   diria que esta todo en orden. Hay una asi en el sistema: Canal Bank con Manuel Samudio, B/. 200,00
   de deuda contra un cheque de B/. 219,00.

   EL AMBAR ES EL `#B9770E` DE `.contador-aviso` Y NO EL `#96600A` DE LAS CELDAS DE TABLA: aca vive
   en un valor de 18px en negrita, que es donde la pauta pide 3:1 y este le sobra. */
.ayd-cifra-aviso .ayd-cifra-valor {
  color: #B9770E; }

/* El contador de cheques cuando hay alguno: es un enlace a la lista de esos cheques. Va subrayado al
   pasar por encima y no antes, para que la fila no parezca cuatro enlaces. HASTA EL 11 DE AGOSTO DE
   2026 ESTE NUMERO NO SE VEIA EN NINGUN LADO: `AcreePers/BCargoBancarios` redirigia a una accion que
   no estaba escrita, y ninguna vista la enlazaba. */
.ayd-cifra-enlace:hover,
.ayd-cifra-enlace:focus {
  color: inherit;
  text-decoration: none; }

.ayd-cifra-enlace:hover .ayd-cifra-valor,
.ayd-cifra-enlace:focus .ayd-cifra-valor {
  color: #1ABB9C;
  text-decoration: underline; }

.ayd-linea {
  color: #4A5A6A;
  font-size: 12.5px; }

.ayd-tenue {
  color: #73879C; }

/* ----- Los botones ----- */

.ayd-acciones {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap; }

/* En el encabezado del elegido los botones van a la izquierda, debajo del nombre. */
.ayd-cabeza .ayd-acciones {
  justify-content: flex-start; }

.ayd-boton {
  padding: 4px 8px;
  border: 1px solid #C6CFD6;
  border-radius: 3px;
  background: #fff;
  color: #2A3F54;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none; }

.ayd-boton:hover,
.ayd-boton:focus {
  border-color: #2A3F54;
  color: #2A3F54;
  text-decoration: none; }

.ayd-boton-fuerte {
  border-color: #2A3F54;
  background: #2A3F54;
  color: #fff; }

.ayd-boton-fuerte:hover,
.ayd-boton-fuerte:focus {
  background: #1F2F3F;
  color: #fff; }

.ayd-boton-peligro {
  border-color: #E4B9B8;
  color: #C9302C; }

.ayd-boton-peligro:hover,
.ayd-boton-peligro:focus {
  border-color: #C9302C;
  color: #C9302C; }

/* Apagado va como <span> y no como <button disabled>: un elemento deshabilitado no dispara eventos
   de raton, asi que su title —que es el motivo de no poder borrar— no se mostraria nunca. */
.ayd-boton-apagado {
  border-color: #EDEFF1;
  background: #FAFBFC;
  color: #A3AFB8;
  cursor: not-allowed; }

/* El formulario de eliminar es un <form> propio dentro de la fila de botones: sin esto se lleva el
   ancho de una linea entera y empuja al de al lado al renglon de abajo. Es la misma regla que
   `.byc-forma`. */
.ayd-forma {
  display: inline; }

/* En pantalla angosta la tira pasa arriba y a lo ancho, como hace `tym-`, y deja de recortarse: con
   el detalle debajo, una tira con scroll propio obliga a dos gestos para llegar al mismo sitio. */
@media (max-width: 900px) {
  .ayd-pantalla {
    grid-template-columns: 1fr; }

  .ayd-tira {
    max-height: none;
    overflow-y: visible; }
}
/** /acreedores y deducciones **/
/* NProgress: se retiró el 4 de agosto de 2026 junto con el plugin. Acá había 3 reglas que le
   daban el color del tema a la barra y al disco. Ver el comentario en custom.js. */
/** bootstrap-wysiwyg **/
div[data-role="editor-toolbar"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.dropdown-menu a {
  cursor: pointer; }

/** /bootstrap-wysiwyg **/
/** Normalize.css **/
fieldset {
  border: none;
  margin: 0;
  padding: 0; }

/** /Normalize.css **/
/** Cropper **/
@media (max-width: 414px) {
  .item {
    display: block; }
   }

@media (max-width: 400px) {
    .item {
    display: block; }
       }

/** /Cropper **/
/** bootstrap-progressbar  **/
.progress {
  border-radius: 0; }

/** bootstrap-progressbar  **/
/** PNotify **/
.alert-info {
  color: #E9EDEF;
  background-color: rgba(52, 152, 219, 0.88);
  border-color: rgba(52, 152, 219, 0.88); }

.img-circle {
  border-radius: 50%; }

/** /PNotify **/
/** validacion de formularios **/

/* ----- El campo que la validacion rechazo -----
   Las cuatro clases las escribe MVC solo, en el campo, en su mensaje y en el resumen, y ninguna de
   las ocho hojas que se sirven las definia: el mensaje salia en negro al lado del campo y el
   recuadro quedaba igual que los demas. O sea que marcar el campo no se veia.

   ESTAS CUATRO NO LAS PUEDE VER NINGUN BARRIDO DEL ARBOL, y por eso la limpieza del 17 de agosto de
   2026 se las llevo y hubo que reponerlas. No estan escritas en ninguna vista ni en ningun guion:
   las emite `System.Web.Mvc.dll` en tiempo de ejecucion -`Html.ValidationMessageFor` pone
   `field-validation-error`, `Html.TextBoxFor` pone `input-validation-error`-. Un barrido que cruce
   las clases de las vistas contra las hojas las da por muertas con razon y se equivoca igual.
   Es la misma familia que `SiSeguroDeEliminar`, que el guardian lleva en su lista de excepciones. */
.form-control.input-validation-error,
.input-validation-error {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }

.form-control.input-validation-error:focus,
.input-validation-error:focus {
  border-color: #843534;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; }

.field-validation-error {
  display: inline-block;
  margin-top: 4px;
  color: #a94442;
  font-size: 0.9em; }

.validation-summary-errors {
  color: #a94442; }

/** /validacion de formularios **/

/** acciones sin permiso **/
/* El enlace que el rol de quien mira NO puede seguir. Lo decide `Html.PuedoEntrar(...)` leyendo el
   `[Authorize]` del destino -ver `Models/Html/PermisosHelpers.cs`-, y la vista dibuja un <span> con
   esta clase encima de la clase de forma que ya usaba: `ficha-kpi sin-permiso`, `dropdown-item
   sin-permiso`, `accion-fila sin-permiso`, `btn btn-outline-primary sin-permiso`.

   VA COMO <span> Y NO COMO <a> APAGADO NI COMO `.disabled` DE BOOTSTRAP, que es la trampa que ya
   costo una vuelta en las otras pantallas apagadas de este archivo: la 5 le pone
   `pointer-events: none` a `.disabled`, asi que el elemento no recibe eventos de raton y su `title`
   -que es el motivo, o sea todo lo que el usuario necesita leer- no se muestra NUNCA. Un <a> sin
   `href` tampoco sirve: sigue siendo foco de tabulacion y promete un clic que no pasa nada.

   ES TRANSVERSAL Y POR ESO NO LLEVA PREFIJO DE PANTALLA, como `.accion-fila` y `.ficha-kpi`: la
   misma condicion apaga un renglon de desplegable, una tarjeta de ficha y un icono de fila. No
   inventes una variante por pantalla.

   Y gana por orden y no por `!important`, porque este bloque cierra el archivo y `custom.css` se
   carga despues de Bootstrap. Si algun dia se mueve mas arriba, deja de ganarle a `.btn` y a
   `.ficha-kpi`, y el enlace apagado se veria igual que uno vivo. La unica excepcion es la pastilla
   del contador, y su regla explica por que. El gris es el mismo `#AEBAC6` de
   `.ficha-accion-apagada`, para que apagado se lea igual en toda la aplicacion. */
.sin-permiso {
  color: #AEBAC6;
  border-color: #E6E9ED;
  background: #F2F5F7;
  cursor: help;
  text-decoration: none; }

.sin-permiso:hover,
.sin-permiso:focus {
  color: #AEBAC6;
  border-color: #E6E9ED;
  background: #F2F5F7;
  text-decoration: none;
  box-shadow: none; }

/* La pastilla del contador que va adentro -«3 productos», «12 cargos bancarios»- es `text-bg-dark`
   de Bootstrap, o sea fondo casi negro: apagado el enlace, esa pastilla queda como lo mas oscuro de
   la fila y se lleva la vista justo hacia lo que no se puede usar.

   ES LA UNICA REGLA DEL JUEGO CON `!important`, y no es negligencia: `.text-bg-dark` de la 5 declara
   sus DOS propiedades con `!important` -medido en `Vendors/bootstrap/dist/css/bootstrap.min.css`-,
   asi que no hay orden ni especificidad que le gane. Sin esto la pastilla se queda negra, que es
   como se vio servido antes de corregirlo.

   Y LA PASTILLA TIENE QUE ESTAR ADENTRO del elemento con `.sin-permiso`. Si la vista la deja como
   hermana -que es como estaba escrito el marcado de los dos listados- este selector no la alcanza y
   la regla no hace nada, sin ningun error que lo delate. */
.sin-permiso .badge {
  color: #FFF !important;
  background-color: #AEBAC6 !important; }

/* En el desplegable la clase de forma es `.dropdown-item`, que trae fondo propio al pasar el raton
   y al recibir el foco. Sin esto, el renglon apagado se ilumina igual que los vivos. */
.dropdown-item.sin-permiso:hover,
.dropdown-item.sin-permiso:focus {
  color: #AEBAC6;
  background: #F2F5F7; }

/** /acciones sin permiso **/

/** formulario en columnas **/
/* LOS CAMPOS EN REJILLA EN VEZ DE APILADOS, uno debajo del otro. Del 30 de agosto de 2026, pedido
   de Amilcar sobre el formulario de producto: son ocho campos, y en una sola columna la ventana
   quedaba mas alta que la pantalla y habia que desplazarla para llegar a «Guardar».

   ES OPT-IN, IGUAL QUE EL MOLDE DE LA VENTANA: lo enciende la vista envolviendo sus campos en un
   `<div class="formulario-en-columnas">`. Los otros 25 catalogos que abren en ventana no lo llevan y
   siguen apilando, que es lo correcto para los que tienen tres o cuatro campos.

   NO REEMPLAZA A `.campo-de-formulario` NI LE TOCA NADA. Aquella sigue poniendo el espacio de abajo
   de cada campo -los 10 px del tema, 14 dentro de la ventana- y esta solo reparte las columnas. Por
   eso el hueco vertical NO se pide con `gap`: se sumaria al margen y daria el doble de aire que en
   los otros 49 formularios.

   UNA COLUMNA HASTA 576 px, que es el corte `sm` de Bootstrap. Debajo de eso dos columnas dejan cada
   campo mas angosto que su etiqueta.

   Un campo escondido -los `@ViewBag.Xcrud` que valen «hidden», que es como este formulario decide
   que mostrar segun el listado del que se venga- NO deja su celda vacia: `[hidden]` de Bootstrap
   viene con `!important` y le gana al `display` de aca. La rejilla se recompone sola, asi que no hay
   filas escritas que se descuadren. */
.formulario-en-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 16px; }

@media (min-width: 576px) {
  .formulario-en-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La etiqueta arriba y el campo debajo, que es lo unico que entra en una columna angosta. Dentro de
   la ventana esto ya lo hace `#frm-modal .campo-de-formulario > label` y dice lo mismo; se escribe
   igual aca porque el formulario TAMBIEN se sirve como pantalla completa -es el camino de quien
   entra sin JavaScript- y ahi no hay ninguna regla que lo apile. */
.formulario-en-columnas .campo-de-formulario > label {
  display: block;
  width: auto;
  max-width: none;
  margin-bottom: 4px;
  padding: 0;
  text-align: left; }

/* El `_GuardarCancelar` y el resumen de validacion van FUERA de la rejilla, en el marcado, y no hay
   regla que los saque: partirlos en dos columnas dejaria «Guardar» a media pantalla. */
/** /formulario en columnas **/

/** colores de categoria de producto **/
/* LA PILDORA DE LA COLUMNA «Categoria» de «Productos» y «Combustibles». Doce tonos que se reparten
   entre las categorias del catalogo por su posicion, no por su id ni por su nombre: el reparto vive
   en `Models/ColoresDeCategoria.cs`, que explica por que las otras dos formas fallan.

   ES UN COLOR DE AGRUPACION Y NO DE SIGNIFICADO, y esa es la diferencia con `combustible-color-*`,
   que esta doce lineas mas abajo. Alla el color ES el dato -91 amarillo, 95 verde, diesel rojo, la
   norma de las estaciones-; aca solo sirve para que dos filas de la misma categoria se reconozcan de
   un vistazo entre las 85 de «LUBRICANTES». Ningun tono de aca significa nada por si mismo.

   POR ESO SON SUAVES Y NO SATURADOS. La celda de al lado es la pildora «Estado», que usa las
   `text-bg-*` de Bootstrap: verde lleno para «Vigente», gris lleno para «Desusado». Con dos
   pildoras saturadas en columnas vecinas la tabla se lee como un semaforo y la que importa deja de
   destacar.

   Y NO HAY AMBAR NI ROJO EN LA PALETA, a proposito: en esta aplicacion el ambar es «hay que mirar
   esto» -`.pp-renglon-revisar`, `.contador-aviso`- y el rojo es alerta. Una categoria pintada de
   ambar se leeria como un hallazgo que no existe.

   LA FORMA LA PONE `.badge` DE BOOTSTRAP y el color lo pone esta seccion, igual que
   `.combustible-punto` mas abajo pone la forma del punto sin color. `.badge` declara
   `color: var(--bs-badge-color)`, que es blanco, con la misma especificidad que estas reglas: lo que
   decide es que `custom.css` se carga DESPUES de `bootstrap.min.css` en el `_Layout`. Si algun dia
   se invierte ese orden, los doce tonos quedan con texto blanco sobre fondo claro y no hay ningun
   error que lo diga.

   NINGUN BARRIDO LAS ENCUENTRA ESCRITAS ENTERAS, porque la clase se arma pegando el sufijo
   (`"categoria-color-" + SufijoDe(...)`). Es el caso que documenta Bootstrap-5.md para el prefijo
   pegado, el mismo de `combustible-color-*`. Lo cuida
   `PruebasColoresDeCategoria.CadaColorDeCategoria_TieneSuReglaEnLaHoja`, que recorre
   `ColoresDeCategoria.SUFIJOS` en vez de llevar una lista escrita. */
.categoria-color-1 {
  background: #E3EDF9;
  color: #1F4E79; }

.categoria-color-2 {
  background: #E1F1E5;
  color: #1E5B34; }

.categoria-color-3 {
  background: #ECE6F6;
  color: #4A3577; }

.categoria-color-4 {
  background: #DEF1F1;
  color: #14595B; }

.categoria-color-5 {
  background: #FAE5EE;
  color: #8A2E56; }

.categoria-color-6 {
  background: #EDF1DC;
  color: #4F5B15; }

.categoria-color-7 {
  background: #E5E8F7;
  color: #2E3A80; }

.categoria-color-8 {
  background: #F7E7DE;
  color: #8A4B2A; }

.categoria-color-9 {
  background: #DFF3EA;
  color: #14603F; }

.categoria-color-10 {
  background: #F2E7F3;
  color: #6B2A6E; }

.categoria-color-11 {
  background: #E7ECF0;
  color: #3C4E5E; }

.categoria-color-12 {
  background: #EFE3EA;
  color: #6B2F4C; }

/* Gris para la categoria que no vino en el catalogo repartido. Se dibuja igual en vez de esconderse
   -mismo trato que `combustible-color-sin-grado`-: que aparezca significa que hay algo que ir a
   mirar. */
.categoria-color-sin-color {
  background: #EEF1F4;
  color: #5A6E82; }
/** /colores de categoria de producto **/

/** colores de combustible **/
/* LOS COLORES SON LA NORMA DE LAS ESTACIONES, no una eleccion de diseno: 91 amarillo, 95 verde,
   diesel rojo. Son los mismos tres de los paneles `surtidor-*` de «Precios de combustibles», de
   donde salieron, para que un combustible se reconozca igual en toda la aplicacion.

   QUIEN LOS REPARTE: `MdlPreciosDeCombustibles.SufijoDeColorDe`, que deduce el grado del NOMBRE del
   producto. Es el unico lugar donde el grado se convierte en color. Las clases se arman pegando ese
   sufijo -`91`, `95`, `diesel`, `sin-grado`-, asi que un barrido del repositorio no las encuentra
   escritas enteras; es la misma forma que ya documenta `Bootstrap-5.md` para el prefijo pegado.

   TRES PANTALLAS LAS USAN: «Configuracion de la estacion» y «Plantilla de informes» -el punto de la
   leyenda, la chapa de la manguera y el filete izquierdo- y «Tanques y mangueras» -la chapa del
   tanque en la tira y la pastilla del combustible-. Antes del 26 de agosto de 2026 esto era
   `tanque-color-N`: seis colores repartidos por NUMERO de tanque, o sea que el color no significaba
   nada que el usuario pudiera nombrar. Hoy DOS TANQUES DEL MISMO COMBUSTIBLE SALEN DEL MISMO COLOR,
   y cual tanque es lo dice la chapa.

   POR QUE ESTA SECCION VIVE AL FINAL DEL ARCHIVO Y NO DENTRO DE UNA PANTALLA. Estas reglas declaran
   `color` ademas de `background`, porque el amarillo del 91 es demasiado claro para texto blanco y
   necesita texto oscuro. Las clases de las pantallas -`.tym-chapa`, `.ce-manguera-tanque`,
   `.pi-manguera-tanque`- declaran su propio `color: #fff` y tienen la misma especificidad, asi que
   la unica forma de ganarles sin subir la especificidad es venir DESPUES. Si esta seccion se mueve
   hacia arriba, el 91 queda blanco sobre amarillo y no hay error que lo diga. */
.combustible-color-91 {
  background: #F2C40C;
  color: #22313F; }

.combustible-color-95 {
  background: #35B058;
  color: #FFFFFF; }

.combustible-color-diesel {
  background: #E0483A;
  color: #FFFFFF; }

/* Gris para el combustible cuyo nombre no dice si es 91, 95 o diesel, y tambien para la manguera
   colgada de un tanque que ya no esta vigente. Se dibuja igual: lo que no se puede reconocer no se
   esconde, y en los dos casos es justamente lo que hay que ir a corregir. */
.combustible-color-sin-grado {
  background: #93A4B3;
  color: #FFFFFF; }

/* EL PUNTO: la forma, sin color. Se combina con una `combustible-color-*` y sirve para marcar con
   el color del combustible una fila de tabla donde no hay ni filete ni chapa donde ponerlo -las
   mangueras de un tanque, los items de un inventario, los combustibles del catalogo-. Es el mismo
   dibujo que `.leyenda-tanque-punto`, que se queda donde esta: aquella es de la leyenda y esta es
   para las tablas, y separarlas evita que mover una rompa la otra. */
.combustible-punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: baseline; }

.combustible-borde-91 {
  border-left-color: #F2C40C; }

.combustible-borde-95 {
  border-left-color: #35B058; }

.combustible-borde-diesel {
  border-left-color: #E0483A; }

.combustible-borde-sin-grado {
  border-left-color: #93A4B3; }
/** /colores de combustible **/

/** arrastre de lecturas **/
/* La ventana de «Arrastrar lecturas» del listado de mangueras de un informe: la tabla de informes
   anteriores entre los que se elige de cuál traer las medidas de apertura del turno.

   SON CINCO REGLAS Y NINGUNA PINTA NADA. Lo que resuelven es que treinta filas se puedan leer
   dentro de una ventana: el encabezado se queda a la vista al desplazar, la fecha no se parte en
   dos renglones, y la fila entera responde al clic.

   NO LLEVA `max-height` NI `overflow` PROPIOS, Y ESO ES LO QUE HACE QUE FUNCIONE. Quien desplaza es
   el `.modal-body`, que ya viene con `overflow-y: auto` del `modal-dialog-scrollable` del molde, y
   `position: sticky` SE RESUELVE CONTRA EL ANCESTRO QUE DESPLAZA. Un contenedor propio con overflow
   en el medio se volvería ese ancestro y el encabezado se pegaría al borde de la caja —que no
   desplaza— en vez de al de la ventana: es la misma trampa que ya está anotada en `.table-responsive`
   unas cuantas reglas más arriba, y falla sin dejar rastro en el CSS.

   Y SIN `!important`, que es la convención de esta hoja. La excepción está en el encabezado de
   DataTables, que pelea contra un `style` en línea del adaptador; acá esta tabla no es de
   DataTables y nadie le escribe `position`. */
.arr-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  box-shadow: inset 0 -1px 0 #E6E9ED; }

/* La fecha en un solo renglón: es lo que ordena la lista, así que partida en dos deja de leerse
   como una columna. */
.arr-fecha {
  white-space: nowrap; }

/* Las tres celdas de datos SON la etiqueta de su radio, así que la fila entera se elige con un
   clic. `display: block` es lo que hace que la etiqueta ocupe la celda en vez del ancho de su
   texto; el `margin: 0` le saca el de abajo que Bootstrap le pone a todo `<label>`, que dentro de
   una celda de tabla se ve como una fila más alta que las otras. */
.arr-tabla td label.arr-elegir {
  display: block;
  margin: 0;
  cursor: pointer; }

/* La columna del radio: lo justo para el círculo, y centrado. */
.arr-columna-elegir {
  width: 2.5rem;
  text-align: center; }

/* Los dos textos que acompañan a la tabla —el pie que dice que la lista está recortada, y el aviso
   de cuando no hay ningún informe anterior—. Gris y chico: son explicaciones, no datos. */
.arr-pie,
.arr-nada {
  color: #73879C;
  font-size: 13px; }
/** /arrastre de lecturas **/