html, 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;
}

.pizarra-nota-nueva,
.formacion-nueva {
    background: #eef6ff;
}

html[data-bs-theme="dark"] .pizarra-nota-nueva,
html[data-bs-theme="dark"] .formacion-nueva {
    background: rgba(76, 110, 245, 0.15);
}

/* Nota editada que alguien todavía no revisó en su versión actual: más llamativa
   que el resaltado celeste de "nueva", para que salte a la vista que hay que
   volver a leerla. */
.pizarra-nota-editada-urgente,
.formacion-editada {
    background: #fdecea;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.35);
}

html[data-bs-theme="dark"] .pizarra-nota-editada-urgente,
html[data-bs-theme="dark"] .formacion-editada {
    background: rgba(220, 53, 69, 0.18);
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.45);
}

/* Procedimientos: categoría que tiene alguna formación nueva (celeste) o editada
   (rojo) sin abrir todavía. No pisa el resaltado de la categoría seleccionada. */
.list-group-item.formacion-categoria-nueva:not(.active) {
    background: #eef6ff;
    border-left: 4px solid #0d6efd;
}

.list-group-item.formacion-categoria-editada:not(.active) {
    background: #fdecea;
    border-left: 4px solid #dc3545;
}

html[data-bs-theme="dark"] .list-group-item.formacion-categoria-nueva:not(.active) {
    background: rgba(76, 110, 245, 0.15);
}

html[data-bs-theme="dark"] .list-group-item.formacion-categoria-editada:not(.active) {
    background: rgba(220, 53, 69, 0.18);
}

/* Palabras agregadas/cambiadas en la última edición de una nota de la Pizarra (ver
   Utils/DiffTexto), mientras alguien todavía no la revisó en su versión actual —
   mismo amarillo que ya usa el buscador de la planilla, para no inventar un tercer
   color de "resaltado" en la app. */
.pizarra-texto-editado {
    background: #fff3a3;
    color: #000000;
    padding: 0 1px;
    border-radius: 2px;
}

/* Mis notas/tareas: en modo noche, el texto con un color oscuro (el negro por
   defecto u otro elegido por el usuario) se muestra en blanco para que se pueda
   leer; en modo día se ve tal cual el color que el usuario eligió. */
html[data-bs-theme="dark"] .notas-texto-oscuro {
    color: #fff !important;
}

/* Planilla de Tareas Compartidas (grilla en modo compacto, ver GrillaEditor.razor):
   el botón de eliminar fila/columna queda oculto hasta que se pasa el mouse por esa
   fila o columna, para no amontonar íconos en cada encabezado. */
.grilla-compacta .grilla-boton-eliminar {
    opacity: 0;
    /* Un botón con opacity:0 sigue recibiendo clics aunque no se vea — sin esto podía
       "robarle" el clic a un borde arrastrable que quedara cerca o superpuesto. */
    pointer-events: none;
    transition: opacity .15s;
}
.grilla-compacta th:hover .grilla-boton-eliminar,
.grilla-compacta tr:hover .grilla-boton-eliminar {
    opacity: 1;
    pointer-events: auto;
}

/* Grilla de notas/planilla: el borde arrastrable de columna/fila tiene un área de
   agarre generosa (16px, ver GrillaEditor.razor) para que sea fácil de acertar con el
   mouse, pero queda TODA para adentro de la celda (nunca se sale de la tabla, ni
   siquiera en la última columna/fila) y solo se PINTA una línea fina de 2px pegada al
   borde real (el límite exterior de esa área) — así se nota dónde agarrar sin que se
   vea como una franja ancha ni quede flotando fuera de la tabla. Se engrosa un poco al
   pasar el mouse, como señal extra de que ahí se puede arrastrar. */
.resize-handle-col,
.resize-handle-fila {
    background: transparent;
}
.resize-handle-col::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    width: 2px;
    height: 100%;
    background: rgba(27, 110, 194, 0.4);
}
.resize-handle-fila::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 100%;
    height: 2px;
    background: rgba(27, 110, 194, 0.4);
}
.resize-handle-col:hover::before {
    left: 12px;
    width: 4px;
    background: rgba(27, 110, 194, 0.75);
}
.resize-handle-fila:hover::before {
    top: 12px;
    height: 4px;
    background: rgba(27, 110, 194, 0.75);
}

/* Franja de encabezado de una tarea compartida (VerTareaCompartida.razor): el negro
   real de la esquina "Apartamentos 3000 / Gestión Argentina" (Components/Layout/
   NavMenu.razor.css, .top-row: rgba(0,0,0,0.4) superpuesto sobre el #1f2937 de
   MainLayout.razor.css, .sidebar — el resultado es #131921, más oscuro/neutro que el
   gris azulado del resto del sidebar). Y "a sangre" hasta el borde de la pantalla en
   vez de quedar recuadrada dentro del padding normal del contenido, para que quede
   alineada con ese borde. Mismo alto (90px) que esa esquina (.top-row) para que
   coincida también en tamaño, no solo en color. */
.tareas-banner-completo {
    background: #131921;
    color: #ffffff;
    min-height: 90px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: -1.1rem -1.5rem 1rem;
    padding: 1rem 1.5rem;
}
@media (min-width: 641px) {
    .tareas-banner-completo {
        margin: -1.1rem -1.5rem 1rem -2rem;
        padding: 1rem 2rem;
    }
}

/* Resaltado del buscador de NotaCompartidaEditor (tareas de tipo "Nota"): amarillo
   para todas las apariciones, y un tono más fuerte para la que está seleccionada en
   ese momento (ver notaEditorIrAResultado en App.razor). */
.nota-resultado-busqueda {
    background: #fff3a3;
    color: #000000;
}
.nota-resultado-actual {
    background: #ffb700;
}
.nota-compartida-editor {
    min-height: 400px;
}

/* Agenda: cuadrícula del calendario mensual (7 columnas, lunes a domingo). */
.agenda-grilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.agenda-cabecera-dia {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    padding-bottom: 4px;
}

.agenda-celda {
    position: relative;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--bs-border-color, #dee2e6);
    overflow: hidden;
}

.agenda-celda:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.agenda-celda-vacia {
    visibility: hidden;
}

.agenda-numero-dia {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

.agenda-celda-hoy {
    border-color: #0d6efd;
    border-width: 2px;
}

.agenda-celda-hoy .agenda-numero-dia {
    color: #0d6efd;
}

.agenda-celda-seleccionada {
    background: #eef6ff;
}

html[data-bs-theme="dark"] .agenda-celda-seleccionada {
    background: rgba(76, 110, 245, 0.2);
}

.agenda-tareas-celda {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    width: 100%;
}

.agenda-tarjeta-tarea {
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 1px 5px;
    border-radius: 4px;
    background: #0d6efd;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.agenda-tarjeta-tarea:hover {
    filter: brightness(1.1);
}

.agenda-tarjeta-hecha {
    background: #198754;
    color: #fff;
}

.agenda-tarjeta-mas {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6c757d);
    padding-left: 5px;
}

/* Mis Gastos: cada titulo con su propio relleno para distinguirlos del fondo de la pagina. */
.mg-titulo {
    background-color: #e3eefb;
    border-color: #9fbfe6;
}

.mg-titulo > .card-header,
.mg-titulo > .card-footer {
    background-color: #c9ddf5;
    border-color: #9fbfe6;
}

.mg-titulo .table > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
}

.mg-titulo .table tfoot > tr > td {
    background-color: #d6e6f8;
}

/* Titulo marcado como pagado: todo el cuadro en verde. */
.mg-titulo.mg-pagado {
    background-color: #dff3e3;
    border-color: #86c595;
}

.mg-titulo.mg-pagado > .card-header,
.mg-titulo.mg-pagado > .card-footer {
    background-color: #bfe5c8;
    border-color: #86c595;
}

.mg-titulo.mg-pagado .table tfoot > tr > td {
    background-color: #cdebd4;
}