/*css modo oscuro simpre deber ir al final siempreeeeeeeeeee*/

/*BOTÓN MODO OSCURO*/

#modooscuro{
    border:none;
    padding:10px 14px;
    border-radius:14px;
    cursor:pointer;
    font-weight:600;
    transition: all 0.4s ease;
    background: linear-gradient(135deg,#222,#111);
    color:white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    position:relative;
    overflow:hidden;
}
/* hover pro */
#modooscuro:hover{
    transform: scale(1.12);
    background: linear-gradient(135deg,var(--naranja-claro),var(--naranja));
    box-shadow:
    0 20px 40px rgba(0,0,0,0.4),
    0 0 20px rgb(50, 158, 179);
}
/* click */
#modooscuro:active{
    transform: scale(0.92);
}
/* brillo */
#modooscuro::before{
    position:absolute;
    top:-80%;
    left:-80%;
    width:250%;
    height:250%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    );
    transform: rotate(25deg);
    animation: shineDark 2.8s infinite;
}


/*modo oscuro*/
body.dark{
    background-color: #121212;
    color: white;
}
/*fondo de registro*/
body.dark .registro{
    background: #1e1e1e;
    color: white;
}
/* header */
body.dark .header{
    background: #1e1e1e;
}

/* menu */
body.dark .menu{
    background: #1e1e1e;
}

/* Tarjetas */
body.dark .carde {
    background: white;
    color: black;
}
body.dark .card h3,
body.dark .card p {
    color: black;
}

/* tarjetas equipo */
body.dark .carde{
    background: #1e1e1e;
    color: white;
    border: 1px solid #333;
}

body.dark .carde h3,
body.dark .carde h5,
body.dark .carde p{
    color: white;
}
/*tarjetas de reportes*/
body.dark .ca{
    background: #1e1e1e;
    color: white;
    border: 1px solid #333;
}
body.dark .ca button{
    background: #ff7b00;
    color: white;
    border: none;
}

body.dark .ca button:hover{
    background:  #35c2c2;
}

/* overlays */
body.dark .overlay{
    background: rgba(0,0,0,0.7);
}
/*secciones*/
/* Sección informativa de donaciones */
body.dark .info-adopcion{
    background: #1e1e1e;
    color: white;
}

body.dark .info-adopcion p,
body.dark .info-adopcion li,
body.dark .info-adopcion strong{
    color: white;
}

/* links */
body.dark a{
    color: white;
}

/* botones */
body.dark button{
    background: black;
    color: white;
}

/*
.dark .botn-reportar {
    background:#2b2b2b;
    color:#ff6b6b;
    border:2px solid #ff6b6b;
    transition:.3s;
}

body.dark .botn-reportar:hover{
    background:#ff6b6b;
    color:white;

    transform:translateY(-3px);

    box-shadow:
    0 10px 20px rgba(255,107,107,.25);
}

body.dark .botn-reportar:active{
    transform:scale(.98);
}

/* footer */
body.dark .footer{
    background: #1a1a1a;
    color: white;
    border-top: 3px solid #ff7b00;
}

body.dark .footer-card{
    background: #252525;
    border: 2px solid #ff7b00;
    border-radius: 20px;
    padding: 15px;
}

body.dark .footer h2,
body.dark .footer h3{
    color: #ff7b00;
}

body.dark .footer p,
body.dark .footer small{
    color: white;
}

body.dark .footer a{
    color: white;
}

body.dark .footer a:hover{
    color: #ff7b00;
}
/* Inputs */
body.dark input,
body.dark select,
body.dark textarea{
    background: #1f1f1f;
    color: white;
}

/* Modales */
/*modal de IA, modal de veterinarias y modal de contacto*/
body.dark dialog,
body.dark .modalIA,
body.dark .contenidoIA{
    background: #1f1f1f;
    color: white;
}

/* Modal veterinarias - modo oscuro */
body.dark #ventanaEmergencia{
    background: #1e1e1e;
    color: white;
    border: 2px solid #ff7b00;
}

body.dark #ventanaEmergencia h2{
    color: white;
}

body.dark #cerrarVentana{
    background: #ff7b00;
    color: white;
}

/* Modal agregar mascota */
/*agregar perro*/
body.dark .modalagregar{
    background: rgba(0,0,0,0.8);
}

body.dark .modalform{
    background: #1e1e1e;
    color: white;
    border: 3px solid #ff7b00;
    border-radius: 25px;
    box-shadow: 0 0 15px rgba(255,123,0,.3);
}

body.dark .modalform h2{
    color: #ff7b00;
}

body.dark .modalform input{
    background: #2a2a2a;
    color: white;
    border: 2px solid #444;
    border-radius: 12px;
}

body.dark .modalform input::placeholder{
    color: #bdbdbd;
}

body.dark .modalform input:focus{
    border-color: #ff7b00;
    box-shadow: 0 0 8px rgba(255,123,0,.4);
    outline: none;
}

/* Botón Guardar */
body.dark .modalform button[type="submit"]{
    background: #ff7b00;
    color: white;
    border: none;
}

/* Botón Cancelar */
body.dark #cerrarModal{
    background: #444;
    color: white;
    border: none;
}

/* Tarjeta Agregar mascota */
body.dark .cardagregarperro{
    background: #1e1e1e;
    color: white;
    border: 2px dashed #ff7b00;
}

body.dark .cardagregar .icono{
    color: #ff7b00;
}

/*css modo oscuro de la tarjeta de perros*/

.dark .cardperro{
    background: #1f1f1f;
    border-color: #ff7b00;
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.dark .cardperro:hover{
    box-shadow: 0 0 30px rgba(255,123,0,.7);
}

.dark .cardinfoperro{
    color: #f1f1f1;
}

.dark .cardinfoperro h3{
    color: #ff7b00;
}

.dark .cardinfoperro p{
    color: black;
    background-color: #ffce9f;
}

.dark .btnadoptar{
    background: #ff7b00;
    color: white;
}

.dark .btnadoptar:hover{
    background: #ff9500;
    box-shadow: 0 0 15px rgba(255,123,0,.8);
}

.dark .caracteristicas{
    background: rgba(255,255,255,.08);
    color: white;
}

/*css de agregar gato*/
.dark .modalagregargato{
    background: rgba(0,0,0,0.8);
}

.dark .modalformgato{
    background: #1e1e1e;
    color: white;
    border: 3px solid #ff7b00;
    border-radius: 25px;
    box-shadow: 0 0 15px rgba(255,123,0,.3);
}

.dark .modalformgato h2{
    color: #ff7b00;
}

.dark .modalformgato input{
    background: #2a2a2a;
    color: white;
    border: 2px solid #444;
    border-radius: 12px;
}

.dark .modalformgato input::placeholder{
    color: #bdbdbd;
}

.dark .modalformgato input:focus{
    border-color: #ff7b00;
    box-shadow: 0 0 8px rgba(255,123,0,.4);
    outline: none;
}

/* Botón Guardar */
.dark .modalformgato button[type="submit"]{
    background: #ff7b00;
    color: white;
    border: none;
}

/* Botón Cancelar */
.dark #cerrarModal{
    background: #444;
    color: white;
    border: none;
}

/* Tarjeta Agregar mascota */
.dark .cardagregargato{
    background: #1e1e1e;
    color: white;
    border: 2px dashed #ff7b00;
}

.dark .cardagregargato .icono{
    color: #ff7b00;
}

/*css modo oscuro de la tarjeta de perros*/

.dark .cardgato{
    background: #1f1f1f;
    border-color: #ff7b00;
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.dark .cardgato:hover{
    box-shadow: 0 0 30px rgba(255,123,0,.7);
}

.dark .cardinfogato{
    color: #f1f1f1;
}

.dark .cardinfogato h3{
    color: #ff7b00;
}

.dark .cardinfogato p{
    color: black;
    background-color: #ffce9f;
}

/*adoptar gato
.dark .btnadoptargato{
    background: #ff7b00;
    color: white;
}

.dark .btnadoptargato:hover{
    background: #ff9500;
    box-shadow: 0 0 15px rgba(255,123,0,.8);
}

.dark .caracteristicasgato{
    background: rgba(255,255,255,.08);
    color: white;
}


/*formularios*/
/* formulario de solicitud */
body.dark #formsolicitud{
  background: #1e1e1e;
  border: 3px solid #ff7b00;
  border-radius: 25px;
  color: white;
}
/* formulario de donación */
body.dark #formdonacion{
  background: #1e1e1e;
  border: 3px solid #ff7b00;
  border-radius: 25px;
  color: white;
}

body.dark #formdonacion label,
body.dark #formdonacion p,
body.dark #formdonacion .textocuenta{
  color: white;
}

body.dark #formdonacion input,
body.dark #formdonacion textarea{
  background: #2a2a2a;
  color: white;
  border: 2px solid #444;
}

body.dark #formdonacion input::placeholder,
body.dark #formdonacion textarea::placeholder{
  color: #bdbdbd;
}

body.dark #formdonacion input:focus,
body.dark #formdonacion textarea:focus{
  border-color: #ff7b00;
  box-shadow: 0 0 8px rgba(255,123,0,.5);
}

body.dark .botondonacion{
  background: #ff7b00;
  color: white;
}

body.dark .botondonacion:hover{
  background: #e66f00;
}

/*css de formulario rescatita modo oscuro*/


.dark .login-container {
      background:
    linear-gradient(
        135deg,
        #0f0f0f 0%,
        #1a1a1a 50%,
        #242424 100%
    );

    min-height:100vh;
}

.dark .login-card{
    background:rgba(24,24,24,.92);
    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 10px 30px rgba(255,122,0,.15);
}

.dark .login-card::before{
    background:radial-gradient(
        circle,
        rgba(255,122,0,.18),
        transparent
    );
}

.dark .login-title{
    color:#ff9b20;

    text-shadow:
    0 0 20px rgba(255,155,32,.35);
}

.dark .login-subtitle{
    color:#c9c9c9;
}

.dark .login-input{
    background:#2b2b2b;
    color:#fff;
    border:2px solid transparent;
}

.dark .login-input::placeholder{
    color:#9c9c9c;
}

.dark .login-input:hover{
    box-shadow:
    0 10px 20px rgba(0,0,0,.25);
}

.dark .login-input:focus{
    border-color:#ff9b20;

    box-shadow:
    0 0 0 5px rgba(255,155,32,.12),
    0 15px 25px rgba(255,155,32,.12);
}

.dark .login-btn{
    background:linear-gradient(
        135deg,
        #ff7a00,
        #ffae42
    );
}

.dark .login-btn:hover{
    box-shadow:
    0 20px 35px rgba(255,122,0,.45);
}

.dark .login-status{
    color:#e0e0e0;
}

/*css de filtro de mascota*/
body.dark .filtros{
    background:#1f1f1f !important;/*aqui hay algo que no me deja cambiar el color luego lo busco*/
    color:#f3f4f6;
    box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.dark .filtros h3{
    color:#ff7b00;
}

.dark .grupo label{
    color:#e5e7eb;
}

.dark .radio-group label{
    color:#d1d5db;
}

.dark .filtros select{
    background:#374151;
    color:white;
    border:1px solid #4b5563;
}

.dark .filtros select:focus{
    border-color:#ff7b00;
    outline:none;
}

.filtros option{
    background:#374151;
    color:white;
}

.dark .btn-filtrar{
    background:#ff7b00;
    color:white;
}

.dark .btn-filtrar:hover{
    background:#e66d00;
}


.dark .icono-cerrar{
    color:#d1d5db;
}

.dark .icono-cerrar:hover{
    color:#ff7b00;
}

.dark .btn-abrir-filtros{
    background:#ff7b00;
    color:white;
}

.dark .btn-abrir-filtros:hover{
    background:#e66d00;
}

.dark .btn-reset{
    width:100%;
    margin-top:10px;
    padding:12px;
    border:none;
    border-radius:10px;
    background:#4b5563;
    color:white;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.dark .btn-reset:hover{
    background:#6b7280;
}

/*formulario de mascota perdida*/
body.dark #formPerdido{
    background: #1e1e1e;
    color: white;
    border: 3px solid #ff7b00;
    border-radius: 25px;
    padding: 35px;
}

body.dark .contenedor{
    background: #1e1e1e;
    color: white;
}

body.dark .contenedor h2{
    color: #ff7b00;
}

body.dark .grupo label{
    color: white;
}

body.dark .grupo input,
body.dark .grupo select,
body.dark .grupo textarea{
    background: #2a2a2a;
    color: white;
    border: 2px solid #444;
    border-radius: 12px;
}

body.dark .grupo input::placeholder,
body.dark .grupo textarea::placeholder{
    color: #bdbdbd;
}

body.dark .grupo input:focus,
body.dark .grupo select:focus,
body.dark .grupo textarea:focus{
    border-color: #ff7b00;
    box-shadow: 0 0 8px rgba(255,123,0,.4);
    outline: none;
}

body.dark .pub{
    background: #ff7b00;
    color: white;
    border: none;
}

body.dark .pub:hover{
    background: #e66f00;
}

/*css modo oscuro del perfil*/

/* Contenedor principal */
body.dark .perfil-tiktok{
    color: white;
}

/* Encabezado */
body.dark .perfil-cover{
    color: white;
}

body.dark #nombrePerfil,
body.dark .usuario-perfil,
body.dark .bio-corta{
    color: white;
}

/* Estadísticas */
body.dark .estadisticas strong,
body.dark .estadisticas span{
    color: white;
}

/* Menú de pestañas */
body.dark .perfil-tabs{
    background: #1e1e1e;
    border-radius: 20px;
}

body.dark .perfil-tabs button{
    background: transparent;
    color: white;
}

body.dark .perfil-tabs .tab-activa{
    color: #ff7b00;
    border-bottom: 3px solid #ff7b00;
}

/* Tarjetas */
body.dark .card-perfil{
    background: #1e1e1e;
    color: white;
    border: 3px solid #ff7b00;
    border-radius: 25px;
    margin-bottom: 25px;
}

/* Títulos */
body.dark .card-perfil h2{
    color: #ff7b00;
}

/* Labels */
body.dark .card-perfil label{
    color: white;
}

/* Inputs */
body.dark .card-perfil input,
body.dark .card-perfil select,
body.dark .card-perfil textarea{
    width: 100%;
    background: #2a2a2a;
    color: white;
    border: 2px solid #444;
    border-radius: 12px;
}

body.dark .card-perfil input::placeholder,
body.dark .card-perfil textarea::placeholder{
    color: #bdbdbd;
}

body.dark .card-perfil input:focus,
body.dark .card-perfil select:focus,
body.dark .card-perfil textarea:focus{
    border-color: #ff7b00;
    box-shadow: 0 0 8px rgba(255,123,0,.4);
    outline: none;
}

/* Botón editar */
body.dark .btn-editar{
    background: #ff7b00;
    color: white;
    border: none;
}

body.dark .btn-editar:hover{
    background: #e66f00;
}

/* Botón configuración */
body.dark .btn-config{
    background: #2a2a2a;
    color: white;
    border: 1px solid #444;
}

body.dark .btn-config:hover{
    border-color: #ff7b00;
}

/* Botón cámara */
body.dark .editar-foto{
    background: #ff7b00;
    color: white;
    border: none;
}

/*css de acerca de nosotros
body.dark .titulo{
    color: #ff9d3f;
}

body.dark .titulo::after{
    background: #ff9d3f;
}*/

body.dark .frase{
    color: #ff9d3f;
}

body.dark .chipocles{
    background: #1f1f1f;
    color: #f5f5f5;
    border-left-color: #ff9d3f;
}

body.dark .titulon,
body.dark .tituloevento{
    color: #ff9d3f;
}

body.dark .carde{
    background: #1f1f1f;
    color: #f5f5f5;
}

body.dark .carde h3{
    color: #ff9d3f;
}

body.dark .carde h5{
    color: #d0d0d0;
}

body.dark .carde::before{
    background: #ff9d3f;
}

body.dark .eventoimportante{
    background: #1f1f1f;
    color: #f5f5f5;
}

/*css de modo oscuro de soy adoptante*/
body.dark .heroadoptante{
    background:#1f1f1f;
}

body.dark .beneficiosadoptar{
    background:#1f1f1f;
}

body.dark .cardadop{
    background:#1f1f1f;
    color:white;
}

body.dark .infoadopcion{
    background:#1f1f1f;
}

/*css de modo oscuro de cuidado de masacuota*/
body.dark .introducciondecm p{
    color: white;
}

/*tarjetas*/
body.dark .cardcm{
    background: #1f1f1f;
    color: white;
    border-radius: 25px;
    padding: 20px;
}

body.dark .cardcm h3{
    color: #ff9d3f;
}

body.dark .cardcm p{
    color: white;
}

body.dark .cardcm:hover{
    box-shadow: 0 0 10px rgb(255, 123, 0);
}

body.dark .tipscm{
    background: #1f1f1f;
   
    border-radius: 25px;
    padding: 20px;
}

body.dark .tipscm h2{
    color: #2aa5a5;
}

body.dark .tipscm ul{
    color: #1f1f1f;
}

body.dark .tipscm  li{
    border: 1px solid #333;
    color: white;
}

body.dark .tipscm ul li::before{
    color: #ff9d3f;
    margin-right: 8px;
}


/*css modo oscuro de soy rescatista*/

body.dark .soyrescatista{
    background: #121212;
}

body.dark .titulorescatista h2{
    color: #ff9d2f;
}

body.dark .titulorescatista p{
    color: #e0e0e0;
}

body.dark .contenidoderesct{
    background: #1f1f1f;
    color: white;
    border-radius: 25px;
    padding: 20px;
}

body.dark .contenidoderesct p{
    color: white;
}

body.dark .contenidoderesct:hover{
    box-shadow: 0 0 10px rgb(255, 123, 0);
}

/*modo oscuro del reglamento de rescatistas juan*/
body.dark .subcontenidoregla p{
    color: white;
    border-radius: 25px;
    padding: 20px;
}

body.dark .heroreglmnt{
    background: #121212;
}

body.dark .reglamentoresct{
    background: transparent;
}

body.dark .cardreglament{
    background: #1f1f1f;
    border: 1px solid #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

body.dark .cardreglament h4{
    color: #ffffff;
}

body.dark .cardreglament p,
body.dark .cardreglament li{
    color: #d6d6d6;
}

body.dark .cardreglament:hover{
    box-shadow: 0 0 20px rgba(255,123,0,0.4);
}