body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Para campos específicos que sabes que son requeridos */
.required-form-field .rz-textbox,
.required-form-field .rz-textarea,
.required-form-field .rz-numeric input,
.required-form-field .rz-datepicker input,
.required-form-field .rz-dropdown {
   border: 2px solid #007BFF !important;
   border-radius: 4px;
}

/* ====== MENSAJES DE VALIDACION EMERGENTES ====== */

/* Los validadores de la aplicacion se declaran asi:
 *
 *    <RadzenRequiredValidator Component="X" Text="..." Popup="true" Style="position: absolute" />
 *
 * y se colocan DENTRO del RadzenFormField. Ahi acaban dentro de .rz-form-field-content, que es
 * un inline-flex con align-items:center y position:relative. La posicion estatica del mensaje
 * queda entonces A LA DERECHA del input y centrada verticalmente, y el translateY(12px) que
 * aplica Radzen lo baja un poco: con un campo ancho, el globo cae ENCIMA del cuadro de texto y
 * no deja escribir dentro.
 *
 * Aqui se ancla explicitamente debajo del campo, que es donde la propia flecha del globo
 * (.rz-message-popup:before apunta hacia arriba) da por hecho que va a estar.
 *
 * Se hace en el CSS y no quitando Popup de los veinte validadores de la ficha porque el
 * problema es de colocacion, no de cada validador, y asi no hay veinte sitios donde se pueda
 * volver a colar. */
.rz-form-field-content > .rz-message-popup,
.rz-form-field-content > .rz-messages-error {
   inset-block-start: 100%;
   inset-block-end: auto;
   inset-inline-start: 0;
   inset-inline-end: auto;
   transform: translateY(6px);

   /* Sin esto un texto largo se estira en una sola linea y se sale de la pantalla. */
   max-width: 100%;
   white-space: normal;

   /* Por encima del campo siguiente, que si no lo tapa el globo a el. */
   z-index: 10;
}

/* Campos inválidos siguen teniendo prioridad */
.rz-state-invalid,
.validation-errors {
   border: 2px solid red !important;
}

/* ====== ESTILOS PARA CAMPOS REQUERIDOS EN RADZEN ====== */

/* Clase para marcar campos requeridos manualmente */
.required-form-field .rz-textbox,
.required-form-field .rz-textarea,
.required-form-field .rz-numeric input,
.required-form-field .rz-datepicker input,
.required-form-field .rz-dropdown {
   border: 2px solid #007BFF !important;
   border-radius: 4px;
   box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.1);
}

/* Campos requeridos detectados automáticamente por JavaScript */
.required-field {
   border: 2px solid #007BFF !important;
   border-radius: 4px;
   box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.1);
}

   /* Estados de focus para campos requeridos */
   .required-form-field .rz-textbox:focus,
   .required-form-field .rz-numeric input:focus,
   .required-form-field .rz-datepicker input:focus,
   .required-field:focus {
      border-color: #0056b3 !important;
      box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25) !important;
      outline: none;
   }

   /* Campos inválidos tienen prioridad sobre required */
   .rz-state-invalid,
   .required-form-field .rz-state-invalid,
   .required-field.rz-state-invalid {
      border: 2px solid #dc3545 !important;
      box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.1) !important;
   }

      .rz-state-invalid:focus,
      .required-form-field .rz-state-invalid:focus,
      .required-field.rz-state-invalid:focus {
         border-color: #b02a37 !important;
         box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
      }

/* Estilos para asterisco de campos requeridos */
.required-asterisk {
   color: #dc3545;
   font-weight: bold;
   margin-left: 2px;
}

/* Mejorar la visualización del label con asterisco */
.required-form-field .rz-formfield-label,
.rz-formfield.has-required .rz-formfield-label {
   font-weight: 500;
}

/* Estilos específicos para diferentes tipos de componentes Radzen */

/* TextBox */
.required-form-field .rz-textbox:hover,
.required-field.rz-textbox:hover {
   border-color: #0056b3;
}

/* Numeric */
.required-form-field .rz-numeric:hover input,
.rz-numeric:hover .required-field {
   border-color: #0056b3;
}

/* DatePicker */
.required-form-field .rz-datepicker:hover input,
.rz-datepicker:hover .required-field {
   border-color: #0056b3;
}

/* Dropdown */
.required-form-field .rz-dropdown:hover,
.required-field.rz-dropdown:hover {
   border-color: #0056b3;
}

/* Switch - caso especial para campos booleanos requeridos */
.required-form-field .rz-switch .rz-switch-circle {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
}

/* Animaciones suaves para transiciones */
.required-form-field .rz-textbox,
.required-form-field .rz-textarea,
.required-form-field .rz-numeric input,
.required-form-field .rz-datepicker input,
.required-form-field .rz-dropdown,
.required-field {
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Estilo para el contenedor completo del campo requerido */
.required-form-field {
   position: relative;
}

   .required-form-field::before {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0.05));
      border-radius: 6px;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
   }

   .required-form-field:hover::before {
      opacity: 1;
   }

/* Para formularios en modo oscuro */
@media (prefers-color-scheme: dark) {
   .required-form-field .rz-textbox,
   .required-form-field .rz-textarea,
   .required-form-field .rz-numeric input,
   .required-form-field .rz-datepicker input,
   .required-form-field .rz-dropdown,
   .required-field {
      border-color: #4dabf7;
      box-shadow: 0 0 0 1px rgba(77, 171, 247, 0.2);
   }

   .required-asterisk {
      color: #ff6b6b;
   }
}

.rojoSpan .rz-cell-data span {
   font-weight: bold;
   color: #D32F2F !important; /* Un color rojo oscuro, por ejemplo */
   /* Puedes añadir cualquier otro estilo de fuente aquí */
}

.rojo .rz-cell-data {
   font-weight: bold;
   color: #D32F2F !important; /* Un color rojo oscuro, por ejemplo */
   /* Puedes añadir cualquier otro estilo de fuente aquí */
}
/* Estilo para las celdas <td> con la clase 'valor-negativo' */
.valor-negativo {
   background-color: #fff5f5; /* Fondo rojo muy claro */
}

   /* Estilo para el <span> interior de la celda para cambiar el color del texto */
   /* ¡Este es el selector específico que necesitas! */
   .valor-negativo .rz-cell-data {
      color: #c53030 !important; /* Rojo oscuro, con !important por si acaso */
      font-weight: bold;
   }


/* Estilos para el estado "Cancelado" */
.estado-cancelado .rz-cell-data {
   color: #888;
   font-style: italic;
}

@media print {

   /* Soluciona la fecha/hora del navegador */
   @page {
      size: A4;
      margin: 0;
   }

   /* --- ¡LA REGLA CLAVE BASADA EN TU DESCUBRIMIENTO! --- */
   /* Eliminamos el sidebar del layout por completo al imprimir. */
   .sidebar {
      display: none !important;
   }

   /* Ocultamos todo lo demás con visibility para no afectar al diálogo */
   body * {
      visibility: hidden;
   }

   /* Hacemos visible solo el área de impresión y su contenido */
   .printable-area, .printable-area * {
      visibility: visible;
   }

   /* Posicionamos el área en la esquina (ahora funcionará porque el sidebar ya no empuja) */
   .printable-area {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      padding: 20px; /* Añadimos padding para que no se pegue al borde */
      box-sizing: border-box;
   }

   /* Ocultamos el botón de imprimir y otros elementos no deseados */
   .no-print {
      display: none !important;
   }

   /* --- Estilos finales para el grid (alineación, etc.) --- */
   .printable-area .rz-data-grid {
      width: 100% !important;
   }

      .printable-area .rz-data-grid th {
         text-align: center !important;
      }

      .printable-area .rz-data-grid td {
         text-align: right !important;
         padding-right: 8px !important;
      }
}
.dialogo-en-esquina {
   left: 0 !important;
   top: 0 !important;
   transform: none !important;
   padding: 0px;
}
.rz-dialog-wrapper.dialogo-en-esquina {
   justify-content: flex-start !important; /* Alinea horizontalmente a la izquierda */
   align-items: flex-start !important; /* Alinea verticalmente arriba */
   /* Opcional: añade un pequeño margen para que no esté pegado a los bordes */
   padding: 10px;
}

.search-bar {
   display: flex;
   gap: 12px; /* espacio entre controles */
   margin-bottom: 12px; /* separación con la grid */
   align-items: center;
}

   .search-bar .rz-textbox {
      max-width: 250px; /* ancho máximo para que no se estiren demasiado */
   }