/* RESET */

*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:Segoe UI, Arial, sans-serif;
}


/* BODY */

body{
color:#333333;
background:none;
}

/* HEADER de Nuevo paciente y fichas*/

header{
position:relative;
background:linear-gradient(135deg,#a829b9e5,#6b1277);
color:white;
padding:40px;
font-size:20px;
letter-spacing:1px;
box-shadow:0 2px 5px rgba(0,0,0,0.2);
}


/* CONTENEDOR */

.container{
width:90%;
max-width:1050px;
margin:30px auto;
background:rgb(255, 255, 255);
padding:30px;
border-radius:8px;
box-shadow:0 5px 15px rgba(142, 20, 179, 0.219);
}


/* INPUTS */

input, textarea{
width:100%;
max-width:800px;
padding:10px;
margin:8px 0 15px 0;
border:1px solid #ccc;
border-radius:5px;
font-size:14px;
transition:0.2s;
resize:vertical;
}

input:focus, textarea:focus{
outline:none;
border-color:#3498db;
box-shadow:0 0 3px rgba(52,152,219,0.5);
}

/* BUSCADOR */

#buscar{
width:250px;
margin-bottom:15px;
}


/* BOTONES */

button{
padding:9px 14px;
border:none;
border-radius:5px;
background:#a5067d;
color:white;
cursor:pointer;
font-size:14px;
margin-right:5px;
transition:0.2s;
}

button:hover{
background:#a829b9e5;
}


/* TABLAS */

table{
width:100%;
border-collapse:collapse;
margin-top:20px;
font-size:14px;
}

thead{
background:linear-gradient(135deg,#4c2053,#291749);
color:white;
}

th{
padding:12px;
text-align:left;
}

td{
padding:12px;
border-bottom:1px solid #eee;
}


/* TITULOS */

h1{
font-weight:500;
}

h2{
margin-bottom:10px;
}

h3{
margin-top:20px;
margin-bottom:10px;
color:#a829b9e5;
}

.totalpaciente{
font-size:16px;
font-weight:bold;
margin-top:20px;
margin-bottom:7px;
color:#5f0b74e5;
}

/* HR */

hr{
margin:20px 0;
border:none;
border-top:1px solid #eeeeee00;
}


.header{
position:relative;
margin:0;
font-family: Arial, sans-serif;

background-image:url("fondo4.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;

display:flex;
align-items:center;
justify-content:center;
padding:40px;
color:white;
}

/* CAPA OSCURA ENCIMA DE LA IMAGEN */

.header::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.712); /* mientras mas alto mas oscuro */
z-index:0;
}

/* CONTENIDO DEL HEADER ENCIMA */

.header *{
position:relative;
z-index:1;
}

.logo{
width:200px;
height:200px;
border-radius:80%;
object-fit:cover;
border:3px solid #ccae2b94;
animation: respirar 3s ease-in-out infinite;

}

.logo-area{
display:flex;
align-items:center;
gap:20px;
}

/* ANIMACION */

@keyframes respirar{

0%{
transform:scale(1);
box-shadow:0 0 10px rgba(202, 173, 6, 0.555);
}

50%{
transform:scale(1.06);
box-shadow:0 0 28px rgba(190, 146, 51, 0.918);
}

100%{
transform:scale(1);
box-shadow:0 0 10px rgba(240, 216, 3, 0.692);
}

}


.titulo h1{

margin:0;
color:#ff4fa4b9;
font-size:22px;

}


.titulo p{
margin:0;
font-size:13px;
color:#888;

}


.modo-btn{
background:none;
border:none;
font-size:20px;
cursor:pointer;
color:#ff4fa4e7;

}

.encabezado{
    display: flex;
    align-items: center;
    gap: 15px;
}

.form-grid{
display:grid;
grid-template-columns: 250px 1fr;
gap:10px 20px;
align-items:center;
max-width:700px;
}

.form-grid label{
font-weight:600;
margin:0;
}

.form-grid input{
width:100%;
max-width:400px;
margin:0;
}

.form-section{
margin-top:30px;
margin-bottom:10px;
font-size:18px;
color:#a829b9e5;
border-bottom:2px solid #eee;
padding-bottom:5px;
}

#seccionFicha{
max-width:800px;
width:90%;
margin:auto;
}

.tabs button{
padding:8px 16px;
margin-right:10px;
cursor:pointer;
}


.tabs{
display:flex;
gap:10px;
margin-bottom:25px;
}

.tab-btn{
padding:14px 30px;
font-size:17px;
border:none;
border-radius:10px;
background:#e9e9e9;
cursor:pointer;
font-weight:700;
transition:0.25s;
letter-spacing:0.5px;
}

.tab-btn:hover{
background:#d8d8d8;
}

.tab-btn.activo{
background:#a5067d;
color:white;
box-shadow:0 3px 8px rgba(0,0,0,0.2);
}


/* POP UP DE ESTAS SEGURO? */

.notificacion{
position: fixed;
top: 20px;
right: 20px;
background: #9c27b0;
color: white;
padding: 15px 25px;
border-radius: 8px;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
opacity: 0;
transform: translateY(-20px);
transition: 0.3s;
z-index: 999;
}

.notificacion.mostrar{
opacity: 1;
transform: translateY(0);
}

.notificacion.error{
background:#e53935;
}

.notificacion.ok{
background:#4CAF50;
}

.seccion{
display:none;
animation: aparecer 0.35s ease;
}

.seccion.activa{
display:block;
}

@keyframes aparecer{
from{
opacity:0;
transform: translateY(10px);
}
to{
opacity:1;
transform: translateY(0);
}
}

/* sombra estilo tarjeta profesional */

.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
box-shadow:0 12px 35px rgba(0,0,0,0.12);
}



/* Estilos de exportar e importar */

.backup-float{
position:fixed;
right:25px;
bottom:40px;
z-index:999;
}

.backup-main{
background:linear-gradient(135deg,#9c27b0,#673ab7);
color:white;
border:none;
padding:16px 22px;
border-radius:50px;
font-size:16px;
font-weight:bold;
cursor:pointer;
box-shadow:0 8px 20px rgba(0,0,0,0.25);
transition:all 0.25s ease;
letter-spacing:0.5px;
}

.backup-main:hover{
transform:translateY(-2px) scale(1.05);
box-shadow:0 12px 25px rgba(0,0,0,0.35);
}

.backup-menu{
display:flex;
flex-direction:column;
gap:10px;
position:absolute;
bottom:70px;
right:0;
opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:0.25s;
}

.backup-menu.activo{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

.backup-float{
position:fixed;
right:25px;
bottom:20px;
z-index:999;
display:flex;
flex-direction:column;
align-items:flex-end;
}

.backup-float:hover .backup-menu{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

.btn-backup{
padding:10px 16px;
border:none;
border-radius:8px;
font-size:14px;
font-weight:bold;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.exportar{
background:#4CAF50;
color:white;
}

.importar{
background:#2196F3;
color:white;
}


.home-logo{
position:absolute;
top:10px;
right:20px;
cursor:pointer;
text-align:center;
}

.home-logo img{
width:90px;
height:90px;
object-fit:cover;
border-radius:50%;
transition:0.25s;
}

.home-logo span{
display:block;
margin-top:4px;
font-size:13px;
font-weight:bold;
color:white;
letter-spacing:1px;
}

.home-logo:hover img{
transform:scale(1.08);
box-shadow:0 0 10px rgba(255,80,160,0.6);
}

#fecha{
width:100%;
max-width:150px;
padding:10px;
margin:8px 0 15px 0;
border:1px solid #ccc;
border-radius:5px;
font-size:14px;
transition:0.2s;
resize:vertical;
}

#fecha:focus:focus{
outline:none;
border-color:#3498db;
box-shadow:0 0 3px rgba(52,152,219,0.5);
}

#motivo{
width:100%;
max-width:650px;
padding:10px;
margin:8px 0 15px 0;
border:1px solid #ccc;
border-radius:5px;
font-size:14px;
transition:0.2s;
resize:vertical;
}

#motivo:focus:focus{
outline:none;
border-color:#3498db;
box-shadow:0 0 3px rgba(52,152,219,0.5);
}

#notas{
width:100%;
max-width:820px;
padding:10px;
margin:8px 0 15px 0;
border:1px solid #ccc;
border-radius:5px;
font-size:14px;
transition:0.2s;
resize:vertical;
}

#notas:focus:focus{
outline:none;
border-color:#3498db;
box-shadow:0 0 3px rgba(52,152,219,0.5);
}

/* FONDO SLIDER */

.background-slider{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-999;

background-image:url("fondo.png");
background-size:cover;
background-position:center;

animation:sliderFondo 15s infinite;
}

/* CAPA OSCURA */

.background-slider::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

/* CAMBIO DE IMAGENES */

@keyframes sliderFondo{

0%{
background-image:url("fondo2.avif");
}

33%{
background-image:url("fondo3.jpg");
}

66%{
background-image:url("fondo4.jpg");
}

100%{
background-image:url("fondo.png");
}

}

/* =========================
MODAL NUEVA CONSULTA
========================= */

.modal-consulta{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);

    justify-content:center;
    align-items:center;

    z-index:9999;
}
.modal-contenido{
background:white;
padding:30px;
border-radius:12px;
width:90%;
max-width:700px;
max-height:90vh;
overflow-y:auto;
box-shadow:0 10px 35px rgba(0,0,0,0.3);
animation:abrirModal .25s ease;

position:relative;
}

@keyframes abrirModal{

from{
opacity:0;
transform:scale(.9);
}

to{
opacity:1;
transform:scale(1);
}

}

/* Organización del formulario del modal para la caja de nuevas consultas */

.modal-contenido{
    display:flex;
    flex-direction:column;
}

.modal-contenido label{
    margin-top:15px;
    margin-bottom:5px;
    font-weight:bold;
}

.modal-contenido input,
.modal-contenido textarea{
    width:100%;
}

.cerrar-modal{
    position:absolute;
    top:10px;
    right:10px;

    width:35px !important;
    height:35px;

    border:none;
    border-radius:50%;

    background:#a01f10;
    color:white;

    font-size:20px;
    font-weight:bold;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* ===========================
   MENÚ PRINCIPAL
=========================== */

.menu-principal{
    display:flex;
    justify-content:center;
    gap:15px;

    margin:20px auto;

    width:90%;
}

.menu-principal button{
padding:12px 25px;
border:none;
border-radius:10px;
background:#e207d757;
cursor:pointer;
font-size:16px;
transition:.2s;
}

.menu-principal button:hover{
transform:translateY(-2px);

}

.menu-principal .activo{

    background:#6b46c1;
    color:white;

}

/* ===========================
barras de agenda
=========================== */
.barra-fecha{
display:flex;
justify-content:center;
align-items:center;
gap:25px;
margin:25px 0;

}

.barra-fecha button{
width:45px;
height:45px;
border:none;
border-radius:10px;
cursor:pointer;
font-size:18px;

}

#agendaHorarios{
width:750px;
max-width:95%;
margin:auto;

}

.filaHorario{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
margin-bottom:8px;
padding:15px;
border-radius:10px;
cursor:pointer;
transition:.2s;

}

.filaHorario:hover{

    transform:scale(1.01);

}

.horaAgenda{
font-weight:bold;
font-size:18px;

}

.estadoAgenda{
color:green;
font-weight:bold;

}

/* ===========================
turnos pacientes pop up
=========================== */
#turnoPaciente{

    width:100%;
    padding:10px;
    margin:8px 0 15px 0;

    border:1px solid #ccc;
    border-radius:5px;

    font-size:14px;

}

/* ===========================
pacientes existentes y nuevos en agenda
=========================== */

.tipoPaciente{

    display:flex;
    gap:10px;
    margin:15px 0;

}

.tipoPaciente button{

    flex:1;
    padding:12px;
    border-radius:8px;
    border:2px solid #d8d8d8;

    background:#f5f5f5;
    color:#555;

    font-weight:bold;

    transition:.2s;

}

.tipoPaciente button.tipoActivo{

    background:#a5067d;
    color:white;
    border-color:#a5067d;

}
/* ===========================
buscador de pacientes
=========================== */

.buscadorPaciente{
    position:relative;
}

.listaPacientes{

    max-height:220px;
    overflow-y:auto;

    border:1px solid #ddd;
    border-radius:8px;

    margin-top:5px;

    background:white;

}

.itemPaciente{
    padding:12px;
    cursor:pointer;
    border-bottom:1px solid #eee;
    transition:.2s;
}

.itemPaciente:hover{
background:#f5e8f5;

}

.itemPaciente:last-child{
 border-bottom:none;

}

/* ===========================
LISTA DE PACIENTES EXISTENTES
=========================== */

.listaPacientes{
    max-height:180px;
    overflow-y:auto;
    margin-top:10px;
}


.itemPaciente{
    background:white;
    padding:10px;
    border-radius:8px;
    margin-bottom:5px;
    cursor:pointer;
    border:1px solid #ddd;
}


.itemPaciente:hover{
    background:#eee;
}

.ocupado{
    background:#ffe5e5;
    cursor:pointer;
}


.ocupado:hover{
    transform:scale(1.02);
}

/* =========================
FECHA AGENDA
========================= */

.barra-fecha {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 25px 0;
}

.fecha-selector {
background: white;
padding: 12px 25px;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-size: 20px;
color: #99158e;
text-transform: capitalize;
cursor: pointer;
transition: .3s;
}

.fecha-selector:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* botones flechas */
.barra-fecha button {
    border:none;
    background:#99158e;
    color:white;
    width:42px;
    height:42px;
    border-radius:50%;
    font-size:20px;
    cursor:pointer;
    transition:.3s;
}

.barra-fecha button:hover {
    transform:scale(1.1);
}

/* boton calendario */
.btnCalendario {
    width: 45px;
    height: 45px;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.btnCalendario i {
    font-size: 22px;
    line-height: 1;
}

.selectorFechaOculto {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}


.contenedor-resumen{
    width:85%;
    margin:40px auto;
    background:white;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.contenedor-resumen h2{
    text-align:center;
    color:#b83bbd;
    margin-bottom:25px;
}

/* SELECCION DE ESTADISTICAS */
.tarjetas-resumen{
    display:flex;
    gap:20px;
    margin-top:30px;
}

.tarjeta{
    background:white;
    padding:25px;
    border-radius:15px;
    text-align:center;
    flex:1;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.tarjeta h3{
    margin-bottom:15px;
}

.tarjeta span{
    font-size:30px;
    font-weight:bold;
}

/* seleccion de mes en estadisticas */
.selector-resumen{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:20px;
    margin-bottom:20px;
}

.selector-resumen input{
    padding:10px;
    border-radius:8px;
    border:1px solid #ccc;
}

.selector-resumen button{
    padding:10px 20px;
    border:none;
    border-radius:8px;
    background:#6c4cff;
    color:white;
    cursor:pointer;
}

.selector-resumen button:hover{
    opacity:.8;
}


.btn-inicio-flotante{
    position:fixed;
    right:25px;
    bottom:25px;
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    padding:0;
    overflow:hidden;
    background:white;
    cursor:pointer;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
    z-index:9999;
    transition:.3s;
}


.btn-inicio-flotante img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:50%;
}


.btn-inicio-flotante:hover{
    transform:scale(1.1);
}tain;
}