/* =========================
   ESTILOS GENERALES
========================= */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#f5f5f5;
    font-family:Arial, Helvetica, sans-serif;
    color:#222;
}

a{
    text-decoration:none;
}

.container-app{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:20px;
}

/* =========================
   ENCABEZADO
========================= */

.topbar{
    width:100%;
    background:#ffffff;
    border-bottom:3px solid #D6001C;
    padding:12px 18px;
    margin-bottom:20px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
}

.topbar-left,
.topbar-right{
    width:170px;
    padding-top:5px;
}

.topbar-right{
    text-align:right;
}

.topbar-center{
    flex:1;
    text-align:center;
}

.logo-top{
    display:block;
    width:auto;
    height:55px;
    max-width:100%;
    margin:0 auto 5px;
}

.empresa{
    font-size:18px;
    font-weight:bold;
    color:#222;
}

.slogan{
    margin-top:2px;
    font-size:12px;
    color:#666;
}

.titulo-modulo{
    margin-top:7px;
    font-size:16px;
    font-weight:bold;
    color:#D6001C;
}

.saludo{
    margin-top:5px;
    font-size:14px;
    font-weight:bold;
    color:#333;
}

.btn-regresar,
.btn-salir{
    display:inline-block;
    color:#D6001C;
    font-size:14px;
    font-weight:bold;
}

.btn-regresar:hover,
.btn-salir:hover{
    color:#a80016;
    text-decoration:underline;
}

/* =========================
   TARJETAS
========================= */

.card-app{
    width:100%;
    max-width:650px;
    margin:20px auto;
    padding:22px;

    background:#ffffff;
    border-radius:16px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.titulo-card{
    margin-bottom:18px;
    text-align:center;
    font-size:20px;
    font-weight:bold;
}

/* =========================
   FORMULARIOS
========================= */

.form-label{
    display:block;
    margin-bottom:6px;
    font-weight:bold;
}

.form-control{
    width:100%;
    min-height:42px;
    padding:9px 12px;

    border:1px solid #ccc;
    border-radius:8px;
    background:#fff;
    font-size:15px;
}

.form-control:focus{
    border-color:#D6001C;
    outline:none;
    box-shadow:0 0 0 3px rgba(214,0,28,.12);
}

.form-group{
    margin-bottom:16px;
}

/* =========================
   BOTONES
========================= */

.btn{
    display:inline-block;
    padding:10px 16px;

    border:none;
    border-radius:8px;
    cursor:pointer;

    font-size:15px;
    font-weight:bold;
    text-align:center;
}

.btn-rojo{
    background:#D6001C;
    color:#ffffff;
}

.btn-rojo:hover{
    background:#a80016;
    color:#ffffff;
}

.btn-secundario{
    background:#6c757d;
    color:#ffffff;
}

.btn-secundario:hover{
    background:#565e64;
    color:#ffffff;
}

.btn-bloque{
    display:block;
    width:100%;
}

.btn-danger{
    background:#dc3545;
    color:#fff;
}

.btn-danger:hover{
    background:#bb2d3b;
    color:#fff;
}

.btn-sm{
    padding:5px 10px;
    font-size:13px;
}




/* =========================
   MENSAJES
========================= */

.alerta{
    margin-bottom:16px;
    padding:12px 14px;
    border-radius:8px;
}

.alerta-exito{
    background:#d1e7dd;
    color:#0f5132;
    border:1px solid #badbcc;
}

.alerta-error{
    background:#f8d7da;
    color:#842029;
    border:1px solid #f5c2c7;
}

/* =========================
   TABLAS
========================= */

.tabla-responsive{
    width:100%;
    overflow-x:auto;
}

.tabla-app{
    width:100%;
    border-collapse:collapse;
    background:#ffffff;
}

.tabla-app th,
.tabla-app td{
    padding:10px;
    border:1px solid #ddd;
    text-align:left;
    vertical-align:top;
}

.tabla-app th{
    background:#D6001C;
    color:#ffffff;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:700px){

    .topbar{
        padding:10px;
        gap:5px;
    }

    .topbar-left,
    .topbar-right{
        width:90px;
    }

    .btn-regresar,
    .btn-salir{
        font-size:12px;
    }

    .logo-top{
        height:45px;
    }

    .empresa{
        font-size:15px;
    }

    .slogan{
        font-size:10px;
    }

    .titulo-modulo{
        font-size:14px;
    }

    .saludo{
        font-size:12px;
    }

    .container-app{
        padding:12px;
    }

    .card-app{
        margin-top:12px;
        padding:16px;
        border-radius:12px;
    }
}

/* =========================
   DASHBOARD
========================= */

.dashboard-card{
    max-width:850px;
}

.dashboard-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
}

.dashboard-btn{
    flex:0 1 360px;

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

    min-height:60px;
    padding:12px 16px;

    background:#747d84;
    color:#fff;

    border-radius:10px;

    font-size:16px;
    font-weight:bold;
    text-align:center;
}

.dashboard-btn:hover{
    background:#5f686f;
    color:#fff;
}

.dashboard-btn-principal{
    flex:0 0 736px;
    max-width:100%;
    background:#D6001C;
}

.dashboard-btn-principal:hover{
    background:#a80016;
}

@media screen and (max-width:700px){

    .dashboard-grid{
        display:block;
    }

    .dashboard-btn,
    .dashboard-btn-principal{
        width:100%;
        max-width:none;
        margin-bottom:12px;
    }

}

/* =========================
   UTILIDADES
========================= */

.mayusculas{
    text-transform:uppercase;
}

.texto-derecha{
    text-align:right;
}

.total-registros{
    margin-bottom:15px;
    text-align:right;
    font-size:14px;
    font-weight:bold;
    color:#666;
}

/* =========================
   REPORTAR ACTIVIDADES
========================= */

.formulario-reporte-card{
    max-width:1050px;
}

.reporte-fila{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    margin:0 -6px 12px;
}

.reporte-campo{
    padding:0 6px;
}

.campo-fecha{
    width:22%;
}

.campo-cargar{
    width:20%;
}

.campo-cliente{
    width:58%;
}

.campo-servicio{
    width:30%;
}

.campo-anio{
    width:14%;
}

.campo-actividad{
    width:40%;
}

.campo-horas{
    width:16%;
}

.reporte-accion{
    text-align:center;
    margin-top:6px;
}

.reporte-accion .btn{
    min-width:220px;
}

@media (max-width:700px){

    .reporte-fila{
        display:block;
        margin:0;
    }

    .reporte-campo,
    .campo-fecha,
    .campo-cargar,
    .campo-cliente,
    .campo-servicio,
    .campo-anio,
    .campo-actividad,
    .campo-horas{
        width:100%;
        padding:0;
        margin-bottom:14px;
    }

    .reporte-accion .btn{
        width:100%;
    }

}
/* =========================
   LISTA DE ACTIVIDADES
========================= */

.total-horas-dia{
    margin-top:16px;
    padding:12px 15px;
    background:#f5f5f5;
    border-left:4px solid #D6001C;
    border-radius:6px;
    text-align:right;
    font-size:17px;
}

.estado-disponible{
    color:#198754;
    font-weight:bold;
}

.estado-cerrado{
    color:#6c757d;
    font-weight:bold;
    white-space:nowrap;
}

.sin-registros{
    margin:0;
    padding:15px;
    color:#666;
    text-align:center;
}

@media (max-width:700px){

    .total-horas-dia{
        text-align:center;
    }

}

/* =========================
   REPORTE DIARIO
========================= */

.reporte-diario-card{
    max-width:1050px;
}

.reporte-empleado{
    margin-bottom:28px;
}

.reporte-empleado-titulo{
    padding:10px 14px;
    margin-bottom:10px;

    background:#f8f9fa;
    border-left:5px solid #D6001C;
    border-radius:6px;

    font-size:18px;
    font-weight:bold;
    color:#222;
}

.subtotal-empleado{
    padding:10px 12px;
    margin-bottom:18px;

    background:#f5f5f5;
    border-left:4px solid #D6001C;

    text-align:right;
    font-size:16px;
}

.resumen-reporte{
    margin-top:20px;
    padding:16px;

    background:#f5f5f5;
    border-radius:8px;

    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

.resumen-reporte div{
    margin:6px 10px;
}

.acciones-reporte{
    margin-top:18px;
    text-align:center;
}

.acciones-reporte .btn{
    margin:5px;
}

@media (max-width:700px){

    .resumen-reporte{
        display:block;
    }

    .resumen-reporte div{
        margin:8px 0;
    }

    .acciones-reporte .btn{
        display:block;
        width:100%;
        margin:8px 0;
    }

}

/* =========================
   BROWSE ACTIVIDADES
========================= */

.browse-grid{
    display:flex;
    flex-wrap:wrap;
    margin:0 -7px;
}

.browse-campo{
    padding:0 7px;
    margin-bottom:14px;
}

.browse-cliente{
    width:40%;
}

.browse-actividad{
    width:35%;
}

.browse-anio{
    width:25%;
}

.browse-servicio{
    width:40%;
}

.browse-empleado{
    width:35%;
}

.browse-desde{
    width:30%;
}

.browse-hasta{
    width:30%;
}

@media (max-width:700px){

    .browse-grid{
        display:block;
        margin:0;
    }

    .browse-campo,
    .browse-cliente,
    .browse-actividad,
    .browse-anio,
    .browse-servicio,
    .browse-empleado,
    .browse-desde,
    .browse-hasta{
        width:100%;
        padding:0;
    }

}

/* =========================
   RESULTADOS BROWSE
========================= */

.browse-resultados-card{
    max-width:1150px;
}
/* EDICIÓN DESDE BROWSE */

.campo-edicion-browse{
    min-width:90px;
    padding:6px 8px;
}

.acciones-browse{
    white-space:nowrap;
}

.acciones-browse .btn{
    margin:2px;
}

/* BOTONES SOLO ICONO */

.btn-icono{
    width:34px;
    height:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:2px;
    font-size:16px;
}

.btn-icono i{

    font-size:15px;

}

/* =====================================================
   ESTADÍSTICAS
===================================================== */

.estadisticas-filtros-card{
    max-width:700px;
}

.estadisticas-filtros{
    display:flex;
    margin:0 -8px;
}

.estadisticas-filtros .form-group{
    width:50%;
    padding:0 8px;
    margin-bottom:0;
}

.estadisticas-card{
    max-width:1200px;
}

.grafico-barras{
    width:100%;
}

/* =========================
   ESCALA DEL GRÁFICO
========================= */

.estadistica-escala{
    display:flex;
    justify-content:space-between;

    height:30px;

    margin-left:100px;
    margin-right:80px;
    margin-bottom:16px;

    border-bottom:1px solid #d5d5d5;

    color:#555;
    font-size:13px;
    font-weight:600;
}

.estadistica-marca{
    position:relative;

    width:1px;
    height:30px;
}

.estadistica-marca span{
    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;
}

.estadistica-marca i{
    position:absolute;

    left:0;
    bottom:-5px;

    width:1px;
    height:6px;

    background:#bfbfbf;
}
/* =========================
   FILAS Y BARRAS
========================= */

.estadistica-fila{
    display:flex;
    align-items:center;

    width:100%;
    min-height:42px;
    margin-bottom:14px;
}

.estadistica-usuario{
    width:100px;
    flex:0 0 100px;

    padding-right:14px;

    color:#222;
    font-size:17px;
    font-weight:bold;
    text-decoration:none;
}

.estadistica-usuario:hover{
    color:#D6001C;
    text-decoration:none;
    cursor:pointer;
}

.estadistica-barra-zona{
    flex:1;
    min-width:0;

    padding-right:80px;
}

.estadistica-medida{
    position:relative;
    display:block;

    min-width:2%;
    height:34px;

    color:#222;
    text-decoration:none;
}

.estadistica-medida:hover{
    color:#222;
    text-decoration:none;
    cursor:pointer;
}

.estadistica-barra{
    width:100%;
    height:34px;

    background:#D6001C;
    border-radius:4px;

    transition:opacity .2s;
}

.estadistica-medida:hover .estadistica-barra{
    opacity:.82;
}

.estadistica-horas{
    position:absolute;

    left:100%;
    top:50%;

    transform:translateY(-50%);

    margin-left:8px;

    color:#222;
    font-size:16px;
    font-weight:bold;
    white-space:nowrap;
}

.sin-registros{
    padding:25px;

    color:#666;
    text-align:center;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:700px){

    .estadisticas-filtros{
        display:block;
        margin:0;
    }

    .estadisticas-filtros .form-group{
        width:100%;
        padding:0;
        margin-bottom:14px;
    }

   .estadistica-escala{
    margin-left:58px;
    margin-right:58px;

    font-size:11px;
}

    .estadistica-fila{
        margin-bottom:12px;
    }

    .estadistica-usuario{
        width:58px;
        flex:0 0 58px;

        padding-right:7px;

        font-size:13px;
    }

    .estadistica-barra-zona{
        padding-right:58px;
    }

    .estadistica-medida{
        min-width:3%;
        height:28px;
    }

    .estadistica-barra{
        height:28px;
    }

    .estadistica-horas{
        margin-left:5px;
        font-size:12px;
    }
}

.estadistica-medida-detalle{
    cursor:default;
}

.estadistica-medida-detalle:hover{
    cursor:default;
}

.estadistica-medida-detalle:hover .estadistica-barra{
    opacity:1;
}