/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #ff6b0e; /* Naranja */
    border-color: #ff6b0e;
}

    .btn-primary:hover {
        background-color: #ff5722; /* Naranja más oscuro */
        border-color: #ff5722;
    }


.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 100px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

/* Archivo CSS (por ejemplo, site.css) */
.truncate-multiline {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 35em; /* Ajusta esto según la altura de la línea */
}

.input-fixed-width {
    width: auto; /* Puedes ajustar el ancho según tus necesidades, por ejemplo, width: 200px; */
}

.modal-dialog-wide {
    max-width: 90%; /* Ajusta este valor según tus necesidades */
}

/* Aplica un color naranja a las filas impares */
.table tbody tr:nth-child(odd) {
    background-color: #FFEADF; /* Color naranja claro */
}

/* Aplica un fondo blanco (o transparente) a las filas pares */
.table tbody tr:nth-child(even) {
    background-color: white; /* Fondo blanco, puedes cambiarlo */
}



.table-scroll-3rows {
    max-height: 12.4em;
    overflow-y: auto;
}

.nav-button {
    border: 1px solid blue;
    border-radius: 10px;
    padding: 5px 10px;
    margin-left: 5px;
    background-color: white;
    color: #ff6b0e;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

    .nav-button:hover {
        background-color: #ff6b0e;
        color: white;
        border-color: blue;
        box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.9);
    }

@media (max-width: 991.98px) {
    .navbar-nav {
        width: 100%;
        padding-left: 0; /* elimina margen innecesario */
        padding-right: 0;
    }

        .navbar-nav .nav-item {
            width: 100%;
            margin-bottom: 0.5rem;
        }

        .navbar-nav .nav-link.nav-button {
            width: 100%;
            display: block;
            text-align: left;
            padding-left: 1rem; /* espacio a la izquierda */
            padding-right: 1rem; /* espacio a la derecha */

            color: #ff6b0e;
            background-color: white;
            border-color: #ff6b0e;
            box-sizing: border-box; /* importante para que el padding no empuje el borde fuera */
        }
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
}


.cta-login-button {
    display: inline-block;
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: bold;
    color: #ff6b0e;
    background-color: white;
    border: 2px solid #ff6b0e;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .cta-login-button:hover {
        background-color: #ff6b0e;
        color: white;
        box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
    }

.nav-button-admin {
    border: 2px solid #ff6b0e;
    border-radius: 10px;
    padding: 5px 10px;
    margin-left: 5px;
    background-color: #fff1e6; /* naranja claro */
    color: #ff6b0e;
    font-weight: bold;
    transition: all 0.3s ease;
}

    .nav-button-admin:hover {
        background-color: #ff6b0e;
        color: white;
        border-color: #ff6b0e;
    }
.admin-label-separator {
    writing-mode: vertical-rl; /* Letras en vertical, de abajo a arriba */
    transform: rotate(180deg); /* Las pone de arriba a abajo */
    font-size: 0.7rem;
    color: white;
    padding: 0 5px;
    margin-left: 20px;
    margin-right: 1px;
    border-left: 1px solid #ff6b0e;
}

.icono-ayuda-naranja {
    color: #ff6b0e;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cuadrado-naranja:hover .icono-ayuda-naranja {
    color: white;
}

.fondo-difuminado {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('/img/background-one.jpg') center center no-repeat;
    background-size: contain; /* mantiene proporciones sin recorte */
    z-index: -1;
    filter: blur(8px);
    opacity: 0.6;
}

.circulo {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: 0 auto;
}

.prioridad-urgente {
    background-color: #e74c3c; /* rojo intenso */
}

.prioridad-normal {
    background-color: #27ae60; /* verde */
}

.prioridad-desconocida {
    background-color: #95a5a6; /* gris */
}

.field-validation-error,
.field-validation-valid {
    display: block; /* Para que el mensaje esté en su propia línea */
    margin-top: 4px; /* Un poco de espacio con el input */
    font-size: 0.9rem;
}

/* Hacer que el select se parezca visualmente al input */
select.select-as-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: auto;
    padding: .375rem .75rem;
    padding-right: 2.25rem; /* espacio para el caret */
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, transparent 50%, #000 50%),
        linear-gradient(135deg, #000 50%, transparent 50%);
    background-position: calc(100% - 1rem) calc(50% - .05em), calc(100% - .7rem) calc(50% - .05em);
    background-size: .45em .45em, .45em .45em;
    background-repeat: no-repeat;
    line-height: 1.5;
    box-shadow: none;
}

/* Placeholder (opción deshabilitada) con color atenuado */
select.select-as-input option[disabled] {
    color: #6c757d;
}

/* Focus similar al input bootstrap */
select.select-as-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* Estilos para los recuadros de filtros */
.filter-card {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .375rem;
    box-shadow: none;
}

.filter-card-header {
    background-color: #fff;
    color: #ff6b0e;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Ajustes para que select se vea como input si usa select-as-input */
.select-as-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image:
        linear-gradient(45deg, transparent 50%, #000 50%),
        linear-gradient(135deg, #000 50%, transparent 50%);
    background-position: calc(100% - 1rem) calc(50% - .05em), calc(100% - .7rem) calc(50% - .05em);
    background-size: .45em .45em, .45em .45em;
    background-repeat: no-repeat;
}

/* Tom Select: asegurar fondo opaco, sombra y z-index alto */
.tom-select-dropdown, .ts-dropdown, .tom-select .ts-dropdown {
  background-color: #ffffff !important; /* opaco */
  z-index: 3000 !important;             /* subir por encima de checks u otros controles */
  opacity: 1 !important;                /* eliminar transparencias */
  pointer-events: auto !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15) !important;
}

/* Asegurar control ocupa el ancho */
.tom-select .ts-control {
  width: 100% !important;
}

/* espacio a la izquierda para el bloque "Motivo" */
.motivo-left-space {
  margin-left: 22px; /* ajusta según necesites */
}