/* layout.css */

/* Fuentes y colores generales */
body{
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background-color:#f9fafb;
color:#374151;
margin:0;
padding:0;
}

a,
a:focus,
a:active{
text-decoration:none !important;
}

a:hover{
text-decoration:underline;
}

/* NAVBAR */

.navbar-brand img{
width:36px;
height:36px;
}

.navbar-nav .nav-link{
font-weight:600;
}

.navbar-nav .nav-link.text-primary{
font-weight:700;
}

/* FOOTER */

footer{
background-color:#111827;
color:#d1d5db;
padding:2rem 1rem;
}

footer a{
color:#66b3ff;
text-decoration:none;
}

footer a:hover{
color:#ffffff;
}

/* CONTAINER CONTROLADO */

.container{
padding-left:1rem;
padding-right:1rem;
}

@media (min-width:992px){
.container{
padding-left:2rem;
padding-right:2rem;
}
}

@media (min-width:1200px){
.container{
max-width:1400px;
}
}

@media (min-width:1600px){
.container{
max-width:1600px;
}
}

#autocomplete-list{
top:100%;
left:0;
max-height:300px;
overflow-y:auto;
border-radius:.5rem;
}

#autocomplete-list .ncb{
font-size:.85rem;
color:#6c757d;
}


/* MODO CLARO / OSCURO */

.dark-mode{
  background-color:#121212;
  color:#e0e0e0;
}

.dark-mode body{
  background-color:#121212;
  color:#e0e0e0;
}

.dark-mode .navbar{
  background-color:#1e1e1e !important;
}

.dark-mode .dropdown-menu{
  background-color:#1e1e1e;
}

.dark-mode .dropdown-item{
  color:#e0e0e0;
}

.dark-mode .dropdown-item:hover{
  background:#333;
}

.dark-mode .dropdown-menu{
  background-color:#1e1e1e;
  border-color:#333;
}

.dark-mode .dropdown-item{
  color:#e6e6e6 !important;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus{
  color:#ffffff !important;
  background-color:#2c2c2c;
}

.dark-mode .dropdown-divider{
  border-color:#444;
}

.dark-mode .navbar .nav-link{
  color:#e6e6e6 !important;
}

.dark-mode .navbar .nav-link:hover{
  color:#ffffff !important;
}

/* Nombre científico en cursiva y verde (similar a text-success de Bootstrap) */
.nombreCursiva,
.nc {
    font-style: italic;
    color: #198754; /* color de text-success de Bootstrap */
}

/* Número de registro */
.cr {
    font-size: 0.9em;
    color: #6c757d; /* gris tipo text-muted */
}

/* Negrita (equivalente a font-weight-bold de Bootstrap 4) */
.font-weight-bold {
    font-weight: 700;
}

/* Base para reemplazar Bootstrap Icons con Unicode */
.bi::before{
display:inline-block;
font-style:normal;
font-weight:normal;
line-height:1;
}
.bi-film::before{
content:"🎬";
}
.bi-camera::before{content:"📷";}
.bi-camera-fill::before{
content:"📷";
}
.bi-camera-video::before{content:"📹";}
.bi-image::before{content:"🖼";}
.bi-geo-alt::before{content:"📍";}
.bi-map::before{content:"🗺";}
.bi-calendar::before{content:"📅";}
.bi-clock::before{content:"🕒";}
.bi-person::before{content:"👤";}
.bi-people::before{content:"👥";}
.bi-search::before{content:"🔍";}
.bi-download::before{content:"⬇";}
.bi-upload::before{content:"⬆";}
.bi-link::before{content:"🔗";}
.bi-film::before{content:"🎬";}
.bi-play::before{content:"▶";}
.bi-pause::before{content:"⏸";}
.bi-info-circle::before{content:"ℹ";}
.bi-exclamation-triangle::before{content:"⚠";}
.bi-suit-club-fill::before{content:"♣";}
.bi-envelope::before{content:"📧";}
.bi-list::before{content:"📋";}
.bi-arrow-right-short::before{
content:"→";
}
.bi-lock::before{
  content:"🔒";
}
.bi-pencil-fill::before{content:"✏️";}
.bi-x-circle::before{content:"❌";}
.bi-check2-square::before{
content:"☑";
}
.bi-pencil-square::before{
content:"✏";
}
.bi-arrow-right-circle-fill::before{
content:"➜";
}
.bi-exclamation-circle-fill::before{
content:"!";
display:inline-block;
width:1em;
height:1em;
line-height:1em;
text-align:center;
border-radius:50%;
background:#198754;
color:#fff;
font-weight:bold;
font-size:1.3em;
}
.bi-calendar-check-fill::before{
content:"📅";
}
.bi-plus-lg::before{
content:"➕";
}
.bi-mic-fill::before{
content:"🎤";
}
.bi-camera-video-fill::before{
content:"🎬";
}
.bi-card-list::before{
content:"📋";
}

/* corregir text-dark en modo oscuro */
.dark-mode .text-dark{
color:#e6e6e6 !important;
}
/* TABLAS EN MODO OSCURO */

.dark-mode .table{
background-color:#1e1e1e;
color:#e6e6e6;
}

.dark-mode .table td,
.dark-mode .table th{
background-color:#1e1e1e;
color:#e6e6e6;
border-color:#444;
}

/* rayado de table-striped */
.dark-mode .table-striped > tbody > tr:nth-of-type(odd){
background-color:#252525;
}

/* hover */
.dark-mode .table-hover tbody tr:hover{
background-color:#2f2f2f;
}
.dark-mode .form-select{
background-color:#1e1e1e;
color:#e6e6e6;
border-color:#444;
}

.dark-mode .form-select option{
background-color:#1e1e1e;
color:#e6e6e6;
}
.table{
background-color:transparent;
}
.dark-mode td{
background-color:transparent;
}

/* =========================
   MODO OSCURO GENERAL
========================= */

.dark-mode body{
background:#121212;
color:#e6e6e6;
}

/* cards */
.dark-mode .card{
background:#1e1e1e;
color:#e6e6e6;
border-color:#333;
}

.dark-mode .card-header{
background:#252525;
color:#fff;
border-color:#333;
}

.dark-mode .card-body{
color:#e6e6e6;
}

/* contenedores con fondo claro */
.dark-mode div[style*="#f9f9f9"]{
background:#1e1e1e !important;
color:#e6e6e6 !important;
}

/* avisos amarillos */
.dark-mode div[style*="#fff9c4"]{
background:#3a3a20 !important;
color:#fff !important;
}

/* tablas */
.dark-mode table{
background:#1e1e1e;
color:#e6e6e6;
}

.dark-mode table td,
.dark-mode table th{
background:#1e1e1e;
color:#e6e6e6;
border-color:#444;
}

/* filas verdes bootstrap */
.dark-mode .bg-success{
background:#1f5f3a !important;
}

/* alerts */
.dark-mode .alert{
background:#2b2b2b;
color:#fff;
border-color:#444;
}

/* links */
.dark-mode a{
color:#66b3ff;
}

/* =========================
   COMENTARIOS - DARK MODE
========================= */

.dark-mode .card{
background:#1e1e1e;
color:#e6e6e6;
border-color:#333;
}

.dark-mode .card-body{
background:#1e1e1e;
color:#e6e6e6;
}

.dark-mode .card-header{
border-color:#333;
}

.dark-mode .bg-light{
background:#1e1e1e !important;
}

.dark-mode .text-muted{
color:#aaaaaa !important;
}

/* caja agregar comentario */

.dark-mode div[style*="#f8f9fa"]{
background:#1e1e1e !important;
color:#e6e6e6 !important;
border-color:#333 !important;
}

/* editor */

.dark-mode #txtcomentario{
background:#1e1e1e;
color:#e6e6e6;
border-color:#444;
}

/* inputs de configuración de imagen */

.dark-mode .form-control{
background:#1e1e1e;
color:#e6e6e6;
border-color:#444;
}

/* toolbar */

.dark-mode .toolbar button{
border-color:#444;
}

/* =========================
   LIST GROUP - DARK MODE
========================= */

.dark-mode .list-group-item{
background:#1e1e1e;
color:#e6e6e6;
border-color:#333;
}

.dark-mode .list-group-item a{
color:#e6e6e6;
}

/* encabezado verde */

.dark-mode .list-group-item-success{
background:#1f5f3a;
color:#ffffff;
border-color:#1f5f3a;
}

/* badges */

.dark-mode .badge.bg-success{
background:#28a745;
}

/* link "ver más" */

.dark-mode .text-success{
color:#6ddf8f !important;
}

/* =========================
   BUSCADOR - DARK MODE
========================= */

/* fondo del buscador */
.dark-mode #buscador-principal{
background:#1e1e1e !important;
color:#e6e6e6;
border:1px solid #333;
}

/* input */
.dark-mode #buscador-principal .form-control{
background:#121212;
color:#e6e6e6;
border-color:#444;
}

.dark-mode #buscador-principal .form-control::placeholder{
color:#aaaaaa;
}

/* sugerencias (badges) */

.dark-mode #buscador-principal .badge{
background:#2a2a2a !important;
color:#e6e6e6 !important;
border:1px solid #444;
}

/* texto muted */

.dark-mode #buscador-principal .text-muted{
color:#aaaaaa !important;
}

/* autocomplete */

.dark-mode #autocomplete-list{
background:#1e1e1e;
border:1px solid #333;
}

.dark-mode #autocomplete-list .list-group-item{
background:#1e1e1e;
color:#e6e6e6;
border-color:#333;
}

.dark-mode #autocomplete-list .list-group-item:hover{
background:#2a2a2a;
}

.btn-success{
color:#fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active{
color:#fff !important;
}
/* también en modo oscuro */
.dark-mode .btn-success{
color:#fff !important;
}

h3 {
    color: #198754 !important; /* Color exacto de text-success de Bootstrap 5 */
}

/* Color de texto para enlaces transformados a botón */
a.btn-outline-success:not(:hover){
    color: var(--bs-success) !important;
}