* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
body {
    background: #eeeeee;
    font-family: Arial, Helvetica, sans-serif;
    color: #111;
}
.menu{
    height: 90px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000000;
    border-bottom: 1px solid #dfe3e8;
}
.logo-header,
.logo-header2 {
    max-width: 170px;
    max-height: 60px;
    object-fit: contain;
}
.titulo-header {
    text-align: center;
}
.titulo-header h1 {
                    font-family: "Michroma", sans-serif;

    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}
.titulo-header span {
    font-size: 14px;
    color: #c8c9ca;
}
.barra-herramientas {
    width: 1250px;
    margin: 20px auto 15px;
    padding: 12px;
    background: white;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ddd;
}
.barra-herramientas button {
    padding: 8px 12px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
}
.barra-herramientas button:hover {
    background: #e5e5e5;
}
.mensaje {
    margin-left: auto;
    font-size: 12px;
    color: #666;
}
.contenedor {
    width: 1250px;
    margin: 0 auto;
    padding: 15px 25px 25px;
    background: white;
}
/*encabezado*/
.encabezado {
    height: 105px;
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    align-items: center;
    border-bottom: 2px solid #6195a8;
}
.logo {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo img {
    width: 100px;
    max-height: 95px;
    object-fit: contain;
}
.logo-chirey img {
    width: 100px;
}
.titulo {
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.35;
}
.leyenda {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid #6195a8;
    border-right: 1px solid #6195a8;
}
.leyenda-item {
    height: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
    font-size: 13px;
}
.color {
    width: 38px;
    height: 18px;
    display: inline-block;
    border: 1px solid #555;
    flex-shrink: 0;
}
/* colores*/
.contabilidad {
    background: #5b9bd5;
}
.servicio {
    background: #ed7d31;
}
.site {
    background: #c00000;
}
.camaras {
    background: #000000;
}
.sistemas {
    background: #df3da1;
}
.ventas {
    background: #70ad47;
}
.marketing {
    background: #ffc000;
}
.ups {
    background: #ff0000;
}
/* periodos*/
.periodo {
    margin: 0;
}
.titulo-periodo {
    background: #173d76;
    color: white;
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    padding: 9px;
    min-height: 43px;
}
/* =ecabezados */
.encabezados {
    display: grid;
    grid-template-columns:
        280px
        280px
        1fr;
    background: #2f75b5;
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}
.encabezados div {
    padding: 7px;
}
/* filas */
.fila {
    position: relative;
    display: grid;
    grid-template-columns:
        280px
        280px
        1fr;
    min-height: 47px;
    align-items: center;
    font-size: 12px;
}
.area {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-left: 12px;
}
.fecha {
    text-align: center;
}
.descripcion {
    text-align: center;
    padding: 6px 15px;
}
/* boton eliminar fila */
.eliminar-fila {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    border: 1px solid #aaa;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    font-size: 11px;
}
.fila:hover .eliminar-fila {
    display: block;
}
.eliminar-fila:hover {
    background: #eeeeee;
}
/*periodo */
[contenteditable="true"] {
    cursor: text;
}
[contenteditable="true"]:focus {
    outline: 2px solid #2f75b5;
    background: #f4f9ff;
}
/* botones de periodo */
.acciones-periodo {
    display: none;
    justify-content: center;
    gap: 6px;
    padding: 5px;
}
.periodo:hover .acciones-periodo {
    display: flex;
}
.acciones-periodo button {
    padding: 5px 10px;
    border: 1px solid #aaa;
    background: white;
    border-radius: 4px;
    cursor: pointer;
}
.acciones-periodo button:hover {
    background: #eeeeee;
}

/*impresion*/
@media print {
    @page {
        size: Letter landscape;
        margin: 5mm;
    }
    html,
    body {
        zoom: 0.99;
        width: 100%;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        font-size: 10px;
    }
    /* Ocultar controles */
    .barra-herramientas,
    .acciones-periodo,
    .eliminar-fila,
    .menu {
        display: none !important;
    }
    /* Plantilla */
    .contenedor {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    /* Mantener colores */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-sizing: border-box;
    }
    /* Encabezado */
    .encabezado {
        height: 17mm;
    }
    .logo img {
        max-height: 15mm;
    }
    .logo-chirey img {
        width: 25mm;
    }
    .titulo {
        font-size: 15pt;
    }
    /* Leyenda */
    .leyenda-item {
        height: 6mm;
        font-size: 8pt;
    }
    .leyenda .color {
        width: 10mm;
        height: 5mm;
    }
    /* Títulos */
    .titulo-periodo {
        min-height: 9mm;
        padding: 2mm;
        font-size: 15pt;
    }
    /* Encabezados */
    .encabezados {
        grid-template-columns:
            58mm
            58mm
            1fr;
        font-size: 8pt;
    }
    .encabezados div {
        padding: 1.5mm;
    }
    /* Filas */
    .fila {
        grid-template-columns:
            58mm
            58mm
            1fr;
        min-height: 9mm;
        font-size: 7.5pt;
    }
    .area {
        gap: 7mm;
        padding-left: 3mm;
    }
    .fila .color {
        width: 10mm;
        height: 5mm;
    }
    .descripcion {
        padding: 1mm 3mm;
    }
    /* Quitar contorno al imprimir */
    [contenteditable="true"]:focus {
        outline: none;
        background: transparent;
    }
}