/* ============================================================================
   COSME Fiscaliza - backoffice moderno
   Mismos selectores que style_cercodata.css (no se toca el HTML generado por
   PHP), reglas nuevas. Paleta: azul COSME #13547e (el mismo de alerta_gestion.html).
   ========================================================================= */

/* BODY ***********************************************************************/
body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-align: left;
    background-color: #f4f6fa;
    color: #2c3542;
    margin: 0;
    padding: 0;
}
a { color: #13547e; }

/* CONTENEDOR******************************************************************/
#CONTENEDOR {
    width: 1180px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: left;
}

/* CONTENIDO SEGMENTOS IZQUIERDO DERECHO CENTRAL* FOOTER **********************/
#CENTRAL_ESPACIO_IZQ {
    background-image: none;
    float: left;
    height: auto;
    min-height: 500px;
    width: 220px;
}
#CENTRAL_ESPACIO_DER {
    background-image: none;
    float: left;
    height: auto;
    min-height: 500px;
    width: 220px;
}
#IZQUIERDO {
    background-color: #ffffff;
    float: left;
    min-height: 500px;
    height: auto;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(19,84,126,0.06);
    width: 208px;
    padding: 10px;
    box-sizing: border-box;
}
#DERECHO {
    background-color: #ffffff;
    float: right;
    min-height: 500px;
    height: auto;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(19,84,126,0.06);
    width: 208px;
    margin-left: 9px;
    padding: 10px;
    box-sizing: border-box;
}
#CENTRAL_1 {
    background-color: #ffffff;
    float: left;
    margin: 0 14px;
    width: 690px;
    height: auto;
    min-height: 500px;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(19,84,126,0.06);
    padding: 16px 20px;
    box-sizing: border-box;
}
#CENTRAL_2 {
    background-color: #ffffff;
    float: left;
    width: 930px;
    height: auto;
    min-height: 500px;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(19,84,126,0.06);
    padding: 16px 20px;
    margin-left: 14px;
    box-sizing: border-box;
}
#CENTRAL_3 {
    background-color: #ffffff;
    float: none;
    clear: both;
    overflow: hidden;
    margin: 40px auto;
    padding: 32px 40px;
    width: 380px;
    max-width: 90%;
    height: auto;
    min-height: 0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(19,84,126,0.15);
    box-sizing: border-box;
}

/* HEADER *********************************************************************/
#HEADER {
    float: left;
    clear: both;
    width: 100%;
    height: auto;
    background: transparent;
    margin: 0 0 18px 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* contiene los hijos flotantes (MENU_1, h1) para que el header tenga alto real */
}
#HEADER h1 {
    background-color: #13547e;
    background-image: url('../images/logocosme.png');
    background-repeat: no-repeat;
    background-position: 24px center;
    background-size: 195px auto;
    color: transparent;
    font-size: 0px;
    float: left;
    clear: both;
    width: 100%;
    height: 90px;
    margin: 14px 0 0 0;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(19,84,126,0.25);
    box-sizing: border-box;
}
#HEADER h2 {
    display: none;
}
#HEADER h3 {
    display: none;
}
#HEADER_FOTO_PERSONAL {
    display: none;
}

/* H3 *************************************************************************/
#CENTRAL_1 h3, #CENTRAL_2 h3, #CENTRAL_3 h3, .CUADRO_LATERAL_CHICO h3, .LINKS h3,.ARTICULO_1 h3,.ARTICULO_2 h3,.SERVICIOS_1 h3, .MENU_LATERAL h3  {
    background: none;
    color: #13547e;
    font-size: 15px;
    line-height: 24px;
    font-style: normal;
    font-weight: 700;
    text-align: left;
    text-indent: 0;
    margin: 0 0 12px 0;
    padding: 0 0 10px 0;
    border-top: none;
    border-bottom: 2px solid #eaf1f9;
    width: 100%;
    box-sizing: border-box;
}

/* MENU_1 (menu superior) ******************************************************/
#MENU_1 {
    display: block;
    position: static;
    background: #ffffff;
    clear: both;
    float: left;
    height: auto;
    width: 100%;
    font-size: 13px;
    margin: 0 0 18px 0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(19,84,126,0.06);
    box-sizing: border-box;
}
#MENU_1 ul {
    margin: 0;
    padding: 0 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#MENU_1 ul li {
    display: inline-block;
    margin: 0;
    color: #6b7684;
}
#MENU_1 ul li a {
    display: inline-block;
    text-decoration: none;
    border-right: none;
    padding: 14px 16px;
    margin: 0;
    color: #2c3542;
    font-weight: 500;
    border-bottom: 3px solid transparent;
}
#MENU_1 ul li a:hover {
    color: #13547e;
    background: #f4f6fa;
    border-bottom: 3px solid #13547e;
}
#MENU_1 ul li:last-child {
    margin-left: auto;
    padding: 14px 16px;
    color: #13547e;
    font-weight: 600;
}

/* FRM_LLENO FRM_MARGEN *******************************************************/
.FRM_LLENO, .FRM_MARGEN {
    font-family: inherit;
    color: white;
    float: left;
    margin: 0;
    background-color: #13547e;
    border-radius: 8px;
    width: 200px;
    border: 0;
    padding: 10px 0;
}
.FRM_LLENO h1, .FRM_MARGEN h1 {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
.FRM_LLENO_sup, .FRM_LLENO_inf, .FRM_MARGEN_sup, .FRM_MARGEN_inf {
    background-image: none;
    display: none;
}

/* ARTICULO_1 *********************************************************/
.ARTICULO_1 {
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    float: left;
    margin: 0 0 16px 0;
    border: none;
    width: 100%;
    box-sizing: border-box;
}
.ARTICULO_1 p {
    line-height: 20px;
    margin: 0 0 10px 0;
    text-indent: 0;
    color: #555c66;
}
.GALERIA_FOTOS {
    margin: 5px;
    float: left;
    width: 100px;
}

/* ARTICULO_2 *********************************************************/
.ARTICULO_2 {
    font-family: inherit;
    font-size: 12px;
    line-height: 17px;
    text-align: left;
    float: left;
    margin-bottom: 4px;
    margin-top: 0;
}
.ARTICULO_2 p {
    margin: 0 0 8px 0;
    text-indent: 0;
    color: #555c66;
}
.ARTICULO_2 h4 {
    text-align: left;
    text-indent: 0;
    background-color: #eaf1f9;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: #13547e;
    margin: 12px 0 8px 0;
    padding: 8px 10px;
}
.ARTICULO_2 img {
    margin-left: 5px;
    float: left;
    border-radius: 4px;
}

/* GALERIA_FOTOS *********************************************************/
.GALERIA_FOTOS ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: auto;
}
.GALERIA_FOTOS li {
    display: inline-block;
    margin: 2px;
    padding: 0;
    line-height: 14px;
    font-size: 9px;
    color: #2c3542;
    height: 70px;
    width: 100px;
}
.GALERIA_FOTOS {
    width: 100%;
    min-height: 95px;
    background-color: #f4f6fa;
    border-radius: 8px;
}
.GALERIA_FOTOS img {
    margin: 5px;
    height: 80px;
    border-radius: 4px;
}

/* SERVICIOS_1 *********************************************************/
.SERVICIOS_1 {
    float: left;
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;
    font-size: 12px;
    color: #2c3542;
    background-color: #eaf1f9;
    border-radius: 8px;
    box-sizing: border-box;
}
.SERVICIOS_1 p {
    font-size: 11px;
    color: #555c66;
    margin: 3px 10px 4px;
}
.SERVICIOS_1 h4 {
    background-color: transparent;
    color: #13547e;
    font-size: 12px;
    text-align: left;
    margin: 0;
    padding: 8px 10px 0;
    line-height: 20px;
}
.BOTON_VER_MAS {
    float: right;
    margin: 0;
    padding: 0;
    background-image: none;
    width: auto;
    height: auto;
}

/* FOOTER PIE DE PAGINA ***************************************/
#FOOTER {
    float: left;
    width: 100%;
    height: auto;
    background: transparent;
    color: #6b7684;
    font-size: 11px;
    margin: 20px 0 0 0;
    padding: 14px 0;
    border-top: 1px solid #e1e6ee;
    text-align: center;
    box-sizing: border-box;
}
#FOOTER p {
    float: none;
    margin: 0;
}
#FOOTER img {
    float: left;
    border: none;
    margin: 5px;
}
#FOOTER a {
    border: none;
    color: #6b7684;
}

/* CUADROS DE MIS MEDICOS CHICOS ********************************************/
.CUADRO_LATERAL_CHICO {
    padding: 0;
    margin: 0 0 10px 0;
    background-image: none;
    clear: both;
    height: auto;
    float: left;
    width: 100%;
}
.CUADRO_LATERAL_CHICO ul {
    padding: 0;
    margin: 0;
}
.CUADRO_LATERAL_CHICO li {
    float: left;
    height: auto;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
.CUADRO_LATERAL_CHICO a:hover {
    color: #13547e;
    text-decoration: underline;
}
.CUADRO_LATERAL_CHICO img {
    float: left;
    border: 2px solid #eaf1f9;
    border-radius: 6px;
    margin: 0;
    padding: 0;
    width: 50px;
}

/* TABLAS *******************************************************************/
.TABLA_CENTRAL_DERECHA, .TABLA_CENTRAL, .TABLA_HORAS, .CALENDARIO_TABLA {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 12px;
    color: #2c3542;
    padding: 4px;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background-color: #ffffff;
}
.TABLA_CENTRAL_DERECHA { width: 200px; }
.TABLA_CENTRAL { width: 100%; box-sizing: border-box; }
.TABLA_HORAS { width: 410px; }
.TABLA_HORAS td {
    margin: 0;
    height: 5px;
    font-size: 10px;
    color: #2c3542;
    padding: 0;
    width: 10px;
}
.TABLA_HORAS input {
    margin: 0;
    height: 5px;
    width: 10px;
}

/* LISTAS*************************************************************/
.LISTA_LINEA {
    float: left;
    padding: 0;
    margin: 0;
    height: 22px;
    margin-top: 1px;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}
.LISTA_CELDA {
    float: left;
    margin: 0;
    padding: 0;
    margin-top: 1px;
    height: 22px;
}
.LISTA_CELDA input {
    float: left;
    margin: 0;
    padding: 0;
    height: 18px;
}
.LISTA_TABLA {
    float: left;
    clear: both;
    width: 100%;
}
.CERCO_FOTO_LISTA { width: 300px; }
.CERCO_TITULO_INFORME { width: 100%; }
.CERCO_TITULO_INFORME th {
    color: white;
    font-weight: 600;
    background-color: #13547e;
    font-size: 11px;
    text-align: center;
}
.CERCO_FOTOREPORTE { width: 220px; }

.LISTA_TABLA table {
    background-color: #ffffff;
    width: 100%;
    border-width: 0;
    border-collapse: collapse;
    font-size: 12px;
}
.LISTA_TABLA th {
    padding: 10px 8px;
    background-color: #13547e;
    color: #ffffff;
    border: none;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-align: left;
}
.LISTA_TABLA tr {
    background-color: #ffffff;
}
.LISTA_TABLA tr:nth-child(even) td {
    background-color: #f4f6fa;
}
.LISTA_TABLA input {
    border: 0;
    margin: 0;
}
.LISTA_TABLA td {
    border: none;
    border-bottom: 1px solid #eaf1f9;
    background-color: #ffffff;
    height: auto;
    padding: 8px;
    margin: 0;
}
.BOTON_EDICION, .BOTON_VER_ARCHIVO {
    margin: 0 0 0 2px;
    background-image: none;
    width: auto;
    height: auto;
    float: left;
}
.BOTON_EDICION::before {
    content: "\270E";
    color: #13547e;
}
.BOTON_VER_ARCHIVO::before {
    content: "\1F441";
    color: #13547e;
}

.ETIQUETA_EDICION {
    float: left;
    height: auto;
    line-height: 30px;
    text-align: right;
    width: 140px;
    font-size: 12px;
    color: #555c66;
    padding-right: 8px;
    box-sizing: border-box;
}
.INPUT_EDICION {
    margin: 0 0 8px 0;
    float: left;
}
.GRUPO_EDICION {
    float: left;
    margin: 0;
    width: 100%;
}

/* CONTROL DE SCROLL *********************************************************/
.FORM_SCROLL {
    float: right;
    margin-right: 0;
    height: 90px;
    width: 100%;
    border: 1px solid #e1e6ee;
    border-radius: 6px;
    overflow: scroll;
    box-sizing: border-box;
}
.BOTON_SCROLL, .BOTON_SCROLL_ACTIVO {
    margin: 0 0 0 2px;
    padding: 0;
    background-image: none;
    background-color: #eaf1f9;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
}
.BOTON_SCROLL_ACTIVO {
    background-color: #13547e;
}

/* CONTENEDORES DE LISTA DE PERSONAS ******************************************/
.CONTENEDOR_PERSONAS_LISTA ul { list-style-type: none; padding: 0; }
.CONTENEDOR_PERSONAS_LISTA li {
    float: left;
    color: #13547e;
    background-color: #ffffff;
    width: 100%;
    line-height: 14px;
    font-size: 12px;
    padding: 4px 0;
}
.CONTENEDOR_PERSONAS_FOTO_GRANDE ul, .CONTENEDOR_PERSONAS_FOTO ul {
    float: left;
    background-color: transparent;
    width: 100%;
    height: auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.CONTENEDOR_PERSONAS_FOTO_GRANDE li, .CONTENEDOR_PERSONAS_FOTO li {
    display: inline-block;
    margin: 4px;
    padding: 8px;
    line-height: 16px;
    font-size: 11px;
    color: #2c3542;
    background-color: #f4f6fa;
    border-radius: 8px;
    height: auto;
    float: left;
    width: 300px;
    box-sizing: border-box;
}
.CONTENEDOR_PERSONAS_FOTO_GRANDE img, .CONTENEDOR_PERSONAS_FOTO img, .PERSONAS_FOTO {
    float: left;
    border: 2px solid #eaf1f9;
    border-radius: 6px;
    width: 50px;
    margin-right: 8px;
}

/* FORMULARIO *****************************************************************/
iframe {
    border: 1px solid #e1e6ee;
    border-radius: 8px;
}
form {
    float: left;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}
.CERCO_FOTO_EDITA { width: 300px; }
form * {
    margin: 4px;
    font-size: 13px;
}
form h4 {
    text-indent: 0;
    color: #13547e;
}
form [type='checkbox'] {
    margin: 4px;
    padding: 0;
    border: none;
}
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea {
    border: 1px solid #d7dee8;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    color: #2c3542;
    background-color: #ffffff;
    box-sizing: border-box;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=date]:focus, input[type=email]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #13547e;
    box-shadow: 0 0 0 3px rgba(19,84,126,0.12);
}
button, input[type=submit], input[type=button] {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background-color: #13547e;
    border: none;
    border-radius: 6px;
    padding: 9px 18px;
    cursor: pointer;
}
button:hover, input[type=submit]:hover, input[type=button]:hover {
    background-color: #0d3d5c;
}
textarea {
    width: 100%;
    max-width: 560px;
    margin: 10px 0;
}
legend {
    border: none;
    color: #13547e;
    font-weight: 600;
    padding: 0 6px;
}
fieldset {
    text-align: left;
    padding: 14px;
    margin: 0 0 14px 0;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    width: 90%;
    box-sizing: border-box;
}
.FIELDSET_CHICO { width: 300px; float: left; box-sizing: border-box; }
.FIELDSET_GRANDE { width: 100%; float: left; box-sizing: border-box; }
.FIELDSET_FULL { width: 100%; float: left; box-sizing: border-box; }
.CRM_COLUMNA1 { float: left; padding: 0; margin: 0; width: 68%; box-sizing: border-box; }
.CRM_COLUMNA2 { float: left; padding: 0; margin: 0; width: 30%; box-sizing: border-box; }
.CRM_TIPIFICACION { float: left; width: 200px; height: 16px; }

/* BOTONERA DE DIALOGOS ******************************************************/
.FORM_BOTONERA {
    margin: 14px 0;
    width: 100%;
    vertical-align: bottom;
    float: left;
    font-size: 13px;
    box-sizing: border-box;
}
.FORM_BOTONERA ul {
    float: left;
    padding: 2px;
    list-style: none;
    margin: 0;
}
.FORM_BOTONERA button {
    width: auto;
    min-width: 110px;
    margin: 0 8px 0 0;
}
.FORM_BOTONERA select {
    font-size: 13px;
    margin-top: 3px;
}
.FORM_BOTON_DERECHO { float: right; }
.FORM_BOTON_IZQUIERDO { float: left; }

/* LINKS **********************************************************************/
.LINKS {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 13px;
    color: #13547e;
    text-indent: 0;
    box-sizing: border-box;
}
.LINKS ul {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
}
.LINKS li {
    text-align: left;
    margin: 0 0 8px 0;
    padding: 0;
    text-decoration: none;
    text-indent: 0;
    font-size: 12px;
}
.LINKS h4 {
    text-decoration: none;
    text-align: left;
    font-size: 12px;
    color: #13547e;
}
.LINKS a {
    text-decoration: none;
    font-size: 12px;
    color: #2c3542;
}
.LINKS a:hover {
    text-decoration: none;
    color: #13547e;
}

/* MENU_LATERAL (estilo oscuro, igual al sidebar de V2) ************************/
.MENU_LATERAL {
    background-color: #13547e;
    color: #eaf1f9;
    font-size: 12px;
    line-height: 16px;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-indent: 0;
    margin: 0;
    border-top: none;
    border-radius: 8px;
    padding: 14px 10px;
    box-sizing: border-box;
}
.MENU_LATERAL h3 {
    color: #ffffff !important;
    background: none !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    padding: 0 4px 10px 4px !important;
    margin: 0 0 6px 0 !important;
}
.MENU_LATERAL ul {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
}
.MENU_LATERAL li {
    text-align: left;
    margin: 0 0 2px 0;
    padding: 0;
    text-decoration: none;
    text-indent: 0;
    font-size: 12px;
}
.MENU_LATERAL p {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
    margin: 14px 4px 6px 4px;
    cursor: pointer;
    position: relative;
    padding-right: 16px;
    user-select: none;
}
.MENU_LATERAL p::after {
    content: "\25BE";
    position: absolute;
    right: 2px;
    top: 0;
}
.MENU_LATERAL h4 {
    text-decoration: none;
    text-align: left;
    font-size: 12px;
    color: #ffffff;
}
.MENU_LATERAL a {
    display: block;
    width: auto;
    padding: 9px 10px;
    text-decoration: none;
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    color: #eaf1f9;
    background-color: transparent;
    border-radius: 6px;
    border-left: 3px solid transparent;
    box-sizing: border-box;
}
.MENU_LATERAL a:hover {
    text-decoration: none;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-left: 3px solid #f4b400;
}

/* PUBLICIDAD_BANNER************************************************************/
.PUBLICIDAD_BANNER img {
    margin: 10px 0;
    padding: 0;
    border: none;
    border-radius: 6px;
}

/* CUADRO DE CALENDARIO ******************************************************/
.CALENDARIO_DISPONIBLE { color: #1a8a4a; }
.CALENDARIO_NO_DISPONIBLE { color: #b3261e; }
.CALENDARIO_TABLA td, .CALENDARIO_TABLA td a {
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    padding: 4px;
    margin: 0;
    width: 24px;
}
.CALENDARIO_CONTENEDOR {
    float: left;
    text-decoration: none;
    padding: 0;
    margin: 0 5px;
}

/* DASH_GRAFICO01 / DASH_COMENTARIO_LARGO *********************************************************/
.DASH_GRAFICO01 {
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    float: left;
    margin: 0 0 16px 0;
    border: none;
    width: 50%;
    height: auto;
    min-height: 100px;
    box-sizing: border-box;
}
.DASH_COMENTARIO_LARGO {
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    float: left;
    margin: 0 0 16px 0;
    border: none;
    width: 100%;
    height: auto;
    min-height: 200px;
    box-sizing: border-box;
}

.MSG_ERROR {
    color: #b3261e;
    font-size: 12px;
    font-weight: 600;
    background: #fdecea;
    border-radius: 6px;
    padding: 8px 12px;
    display: inline-block;
}
.MSG_WARNING {
    color: #9a6700;
    font-size: 12px;
    font-weight: 600;
    background: #fff6e5;
    border-radius: 6px;
    padding: 8px 12px;
    display: inline-block;
}
.MSG_MESSAGE {
    color: #0d3d5c;
    font-size: 12px;
    font-weight: 600;
    background: #eaf1f9;
    border-radius: 6px;
    padding: 8px 12px;
    display: inline-block;
}

.table_cerco {
    vertical-align: top;
    height: auto;
    border-collapse: collapse;
    width: 100%;
}
.table_cerco td {
    border: 1px solid #e1e6ee;
    vertical-align: top;
    height: auto;
    padding: 8px;
    margin: 0;
    font-family: inherit;
    font-size: 12px;
}
table td { vertical-align: top; }