<style>
body {
height: 100vh;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 0;
line-height: 1.4;
color: #333;
transition: background-color .8s;
}
label {
-webkit-user-select: none;
user-select: none;
}
.btn-primario {
padding: 6px 12px;
font-size: 12px;
background-color: #337ab7;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
text-align: center;
}
.btn-primario:hover {
background-color: #2d6a9f;
}
.btn-primario:disabled {
opacity: .6;
pointer-events: none;
}
.btn-secundario {
padding: 5px 12px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
cursor: pointer;
text-align: center;
}
.btn-secundario:hover {
background-color: #e6e6e6;
border-color: #bdbdbd;
}
.arrow-close-modal {
margin: 0 10px;
padding: 5px 8px;
text-decoration: none;
color: #9e9e9e;
font-size: 30px;
cursor: pointer;
user-select: none;
}
.arrow-close-modal:hover {
color: #d32f2f;
text-decoration: none;
}
.hr1 {
border: none; border-bottom: 1px solid #eee; margin: 0 15px;
}
/* top nav */
.table_nav {
width: 100%;
height: 50px;
background-color: #fafafa;
box-sizing: border-box;
}
#menu_link {
margin-left: 15px;
}
#menu_link td {
font-family: 'Comic Sans MS';
font-size: 12px;
}
#menu_link a {
color: #337ab7;
text-decoration: none;
}
#menu_link a:visited {
color: #337ab7;
}
#menu_link a:not(.active):hover {
text-decoration: underline;
}
#menu_link a.active {
font-weight: bold;
text-decoration: none;
pointer-events: none;
}
/* INICIO */
#container_inicio {
display: flex;
align-items: center;
height: calc(100vh - 110px);
}
.table-inicio {
width: 100%;
margin: auto;
max-width: 768px;
color: #607d8b;
font-size: 38px;
}
.item-inicio-heading:hover {
color: #546e7a;
}
.item-inicio-heading {
padding: 10px 0;
font-size: 30px;
color: #607d8b;
background-color: #f5f5f5;
}
.item-inicio {
width: 50%;
vertical-align: top;
text-align: center;
cursor: pointer;
background-color: #fafafa;
box-shadow: 0 1px 2px #bdbdbd;
border-radius: 4px;
user-select: none;
-webkit-user-select: none;
visibility: hidden;
transition: box-shadow .5s;
}
.item-inicio:hover {
box-shadow: 1px 1px 10px #ccc;
color: #546e7a;
}
.item-inicio:hover img {
transition: 1s;
transform: scale(1.1);
}
.slide_der {
animation-name: slide_der;
-webkit-animation-name: slide_der;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
.slide_izq {
animation-name: slide_izq;
-webkit-animation-name: slide_izq;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
/* SECCIONES */
#section_grid, #section_online, #section_calendario, #section_notas {
display: table;
table-layout: fixed;
padding: 10px 0;
width: 100%;
max-width: 768px;
height: calc(100vh - 50px);
margin: auto;
clear: both;
box-sizing: border-box;
}
.container_section {
width: 100%;
min-height: 517px;
height: 517px;
box-shadow: 1px 1px 5px #999;
}
#display_grid, #display_share {
transition: background-color .15s;
}
.modulos-table {
width: 100%;
height: 100%;
border-collapse: collapse;
box-sizing: border-box;
transition: margin 1s;
table-layout: fixed;
}
.modulos-table td {
padding: 0;
box-sizing: border-box;
}
.modulos-title {
font-size: 10px;
font-weight: bold;
color: #464646;
margin-bottom: 10px;
padding: 5px 0;
text-align: center;
background-color: #f5f5f5;
}
.modulos-link {
display: block;
font-size: 12px;
color: #00f;
text-align: center;
text-decoration: none;
margin: 15px 0;
}
.modulos-link:hover {
color: #8080ff;
}
.modulos-link:active {
color: red;
}
.link1 {
color: #00f;
text-decoration: none;
}
.link1:hover {
color: #8080ff;
}
.link1:active {
color: red;
}
.modulos-budget {
position: absolute;
width: 17px;
top: 2px;
right: 6px;
border-radius: 50%;
font-size: 10px;
font-weight: bold;
color: #fff;
background-color: lightsalmon;
}
.table_list_stripped {
width: 100%;
max-width: 600px;
margin: 15px;
border-collapse: collapse;
}
.table_grid_borderBottom, .table_grid_borderLess, .table_grid_stripped, .table_grid_borderAll {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.table_grid_borderBottom td {
padding: 1px;
border-top: 1px solid transparent;
border-bottom: 1px solid #bdbdbd;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.table_grid_borderAll td {
padding: 1px;
border-top: 1px solid #bdbdbd;
border-bottom: 1px solid #bdbdbd;
border-left: 1px solid #bdbdbd;
border-right: 1px solid #bdbdbd;
}
.table_grid_borderLess td, .table_grid_stripped td {
padding: 1px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.table_list_stripped tr:nth-child(even), .table_grid_stripped tr:nth-child(even) {
background-color: #f5f5f5;
}
#li_estilos_grid, #div_agregar_secc {
background-color: #fff;
border: 1px solid #eee;
border-radius: 3px;
box-shadow: 1px 1px 2px #bdbdbd;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
}
.estilos-submenu-plantilla tr {
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.estilos-submenu-plantilla tr:hover {
background-color: #fafafa;
}
.estilos-submenu-plantilla td {
padding: 6px 10px;
cursor: pointer;
}
.estilos-grid {
border-collapse: collapse;
padding: 4px;
}
.estilos-grid-tr > td:nth-child(2) {
display: none;
position: absolute;
padding: 15px;
background-color: #fafafa;
box-shadow: 2px 2px 4px #999;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
}
.estilos-grid-tr:hover > td:nth-child(1) {
background-color: #fafafa;
}
.estilos-grid-tr:hover > td:nth-child(2) {
display: block;
}
.estilos-grid-td {
padding: 6px 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
color: #333;
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.estilos-grid-td span {
color: #757575;
font-size: 12px;
position: relative;
top: -1px;
text-shadow: none;
}
.td-grid-selected {
outline: 2px solid #000;
border-radius: 2px;
}
.td-doc-selected {
box-shadow: 0px 0px 3px darkblue inset;
border-radius: 2px;
}
.li_dropdown_estilos_grid:hover {
cursor: pointer;
opacity: .8;
}
.li_dropdown_estilos_grid img:nth-child(1) {
opacity: .5;
}
/* PLANTILLA */
.grid_title {
margin-top: 10px;
margin-left: 5px;
margin-bottom: 15px;
padding-left: 5px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #333;
font-size: 18px;
width: 93%;
border-bottom: 1px solid #bdbdbd;
}
#container_plantilla fieldset {
margin: 0;
padding: 2px;
border: 1px dashed #bdbdbd;
}
#container_plantilla .section_plantilla {
pointer-events: none;
}
#container_plantilla .section_plantilla.hidden {
display: none;
}
.grid_input_tit {
width: 450px;
padding: 3px 5px;
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #616161;
opacity: .8;
border: none;
position: relative;
bottom: -1px;
outline-color: lightsteelblue;
}
.page-break-chk {
padding-right: 4px;
font-family: Helvetica, Arial;
font-size: 12px;
color: #616161;
text-decoration: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.page-break-chk:hover {
color: #757575;
}
.page-break {
display: table;
page-break-inside: avoid;
}
.label-collapse-all {
color: #616161;
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.label-collapse-all:hover {
color: #757575;
}
.footer_main {
box-sizing: border-box;
width: 100%;
height: 60px;
background-color: #f5f5f5;
padding: 12px 0 10px 0;
}
.footer_main div {
text-align: center;
}
.div_del_cont {
padding: 5px 10px;
cursor: default;
-webkit-user-select: none;
user-select: none;
color: #616161;
}
.div_del_cont:hover {
color: #464646;
background-color: #eee;
}
/* *** editor *** */
.btn1 {
font-size: 12px;
padding: 5px 10px;
border-radius: 3px;
background-color: #337ab7;
border: none;
color: #fff;
cursor: pointer;
}
.btn1:hover {
background-color: #2d6a9f;
}
#div_btns {
position: relative;
width: 765px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, .5);
}
#div_btns hr {
border:0;
border-bottom: 1px solid #ddd;
}
#container_editBox {
position: relative;
box-sizing: border-box;
background-color:#eee;
overflow-y: hidden;
}
#editBox::-webkit-scrollbar {
width: 8px;
}
#editBox::-webkit-scrollbar-track {
background: #eceff1;
}
#editBox::-webkit-scrollbar-thumb {
background: #b0bec5;
border-radius: 5px;
}
#editBox::-webkit-scrollbar-thumb:hover {
background: #90a4ae;
}
#editBox img {
cursor: default;
}
#editBox:hover td {
border: 1px dotted #999;
}
.div_barra_botones {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
#tabla_crear_tabla {
border-collapse: collapse;
border: 1px solid #999;
}
#tabla_crear_tabla td {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
cursor: default;
border: 1px solid #999;
width: 20px;
height: 20px;
background-color: #FFFFFF;
font-size: 10px;
}
.btn_alt {
width:22px;
height:22px;
padding: 0 4px;
margin: 0 1px;
border:none;
outline:none;
cursor: pointer;
background-color: inherit;
}
.btn_alt:hover {
opacity: .8;
}
.btn_edit {
margin: 0;
padding: 0;
border: 1px solid transparent;
border-radius: 3px;
background-color: transparent;
outline: none;
user-select: none;
}
.btn_edit:hover {
box-shadow: 0px 0px 5px 5px #eceff1 inset;
border: 1px solid #cfd8dc;
}
.btn_edit:active {
box-shadow: 0 0 2px #546e7a inset;
background-color: #cfd8dc;
}
/* paleta */
.in_paleta {
width:18px;
height:18px;
border-radius:18px;
border: 1px solid #999;
margin:0;
padding:0;
cursor: pointer;
}
.in_paleta:hover {
border: 1px solid #bdbdbd;
}
.in_color_predet {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #464646;
background:#FFFFFF;
height: 18px;
border: 1px solid #ccc;
width: 100%;
border-radius: 3px;
cursor: pointer;
}
.in_color_predet:hover {
border: 1px solid #bdbdbd;
}
.input_show_estilos_predet_doc {
width:90px;
height:28px;
text-align:left;
background-color: #eee;
border: none;
border-bottom: 1px solid #e0e0e0;
border-radius:2px;
}
.input_show_estilos_predet_doc:disabled {
background-color: #fafafa;
}
.input_show_estilos_predet_doc:not(:disabled):hover {
color: blue;
}
.page_break {
border-bottom: 2px dashed #999;
}
.page_break::before {
content: "salto de página";
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
color: #464646;
}
/* context tabla = estilos rápidos */
.context-tabla-text {
box-sizing: border-box;
width: 90px;
text-align: center;
padding: 4px 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
cursor: default;
border-bottom: 1px solid #ddd;
-webkit-user-select: none;
user-select: none;
}
.context-tabla-text:hover {
background-color: #f5f5f5;
}
.context-tabla-row {
position: relative;
}
.context-tabla-row table {
border-collapse: collapse;
}
.context-tabla-row:hover .context-tabla-content {
display: block;
}
.context-tabla-row:hover .context-tabla-text {
background-color: #f5f5f5;
color: #333;
}
.context-tabla-content {
box-sizing: border-box;
display: none;
position: absolute;
right: 90px;
}
.context-tabla-content select {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
overflow: hidden;
outline: none;
border: 1px solid #e0e0e0;
}
.context-tabla-content select option {
width: 90px;
border-bottom: 1px solid #e0e0e0;
text-align: center;
padding: 4px 10px;
}
.context-tabla-content select option:hover {
background-color: #f5f5f5;
}
.context-tabla-delete {
box-sizing: border-box;
width: 90px;
text-align: center;
padding: 4px 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10px;
color: #d32f2f;
font-style: italic;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.context-tabla-delete:hover {
opacity: .6;
}
.estilos_rapidos_t {
padding-right: 5px;
font-style: italic;
-webkit-user-select: none;
user-select: none;
}
.estilos_rapidos_t img {
opacity: .8;
}
.estilos_rapidos_t:hover img {
opacity: .5;
}
#ul_estilos_t:hover > li:nth-child(1) {
color: #757575;
}
/* *** notas *** */
#td_notas_count {
text-align: left;
padding-left: 25px;
font-size: 12px;
color: #757575;
}
.nr-contenedor {
max-width: 768px;
height: 442px;
overflow: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 5px;
list-style-type: none;
margin: 0;
margin: auto;
}
.nr-contenedor li {
padding: 5px;
}
.img-add-note {
margin: 0;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: blue;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.img-add-note:hover {
opacity: .8;
}
.nr_btn_close {
color: #464646;
cursor: pointer;
font-size: 18px;
padding: 0 5px;
}
.nr_btn_close:hover {
color: #d32f2f;
text-shadow: 0px 0px 1px #eee;
}
.nr_yellow {
background-color: #FFFFCC;
}
.nr_yellow tr:first-child td {
background-color: #FFffbb;
}
.nr_yellow span {
color: #ffcc80;
}
.nr_lightred {
background-color: antiquewhite;
}
.nr_lightred tr:first-child td {
background-color: wheat;
}
.nr_lightred span {
color: tan;
}
.nr_greenyellow {
background-color: #f9fbe7;
}
.nr_greenyellow tr:first-child {
background-color: #f0f4c3;
}
.nr_greenyellow span {
color: darkkhaki;
}
.nr_textarea {
width: 150px;
min-width: 150px;
max-width: 380px;
height: 150px;
min-height: 150px;
max-height: 400px;
border: none;
padding: 3px 4px;
margin: 0px;
outline-color: khaki;
border-radius: 0 0 3px 3px;
font-size: 14px;
}
.nr_span_copy {
position: absolute; right: 7px; bottom: 7px; color: blue; font-family: Arial; font-size: 12px;
}
.nr_textarea[data-color=nr_yellow] ~ span {
background-color: #FFFFCC;
color: blue;
}
.nr_textarea[data-color=nr_lightred] ~ span {
background-color: antiquewhite;
color: blue;
}
.nr_textarea[data-color=nr_greenyellow] ~ span {
background-color: #f9fbe7;
color: blue;
}
.nr_textarea::-webkit-scrollbar {
width: 5px;
}
.nr_textarea[data-color=nr_yellow]::-webkit-scrollbar-track {
background: #FFffbb;
}
.nr_textarea[data-color=nr_yellow]::-webkit-scrollbar-thumb {
background: #ffcc80;
border-radius: 3px;
}
.nr_textarea[data-color=nr_lightred]::-webkit-scrollbar-track {
background: wheat;
}
.nr_textarea[data-color=nr_lightred]::-webkit-scrollbar-thumb {
background: tan;
border-radius: 3px;
}
.nr_textarea[data-color=nr_greenyellow]::-webkit-scrollbar-track {
background: #f0f4c3;
}
.nr_textarea[data-color=nr_greenyellow]::-webkit-scrollbar-thumb {
background: darkkhaki;
border-radius: 3px;
}
.nr_option_menu {
position: absolute;
border: 1px solid #ddd;
background-color: #fff;
box-shadow: 4px 4px 2px -2px #9e9e9e;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10px;
padding: 2px;
color: #333;
z-index: 10;
}
.nr_option_menu>div {
display: flex;
align-items: center;
}
.nr_option_menu hr {
border: none;
border-bottom: 1px solid #ddd;
margin: 4px;
}
.menu-notas-row:hover {
background-color: #eee;
}
.menu-notas-icon {
display: table-cell;
width: 30px;
text-align: center;
}
.menu-notas-text {
display: table-cell;
cursor: default;
user-select: none;
padding: 5px 25px 5px 0;
}
.img-menu-notas {
opacity: .5;
cursor: pointer;
}
.img-menu-notas:hover {
opacity: .7;
}
/* *** calendario *** */
.btn-blue-cal {
padding: 4px 12px;
line-height: 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #337ab7;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
cursor: pointer;
text-align: center;
}
.btn-blue-cal:hover {
background-color: #2d6a9f;
}
.btn-blue-cal:disabled {
opacity: .6;
pointer-events: none;
}
.btn-white-cal {
padding: 4px 12px;
line-height: 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
cursor: pointer;
text-align: center;
}
.btn-white-cal:hover {
background-color: #e6e6e6;
border-color: #bdbdbd;
}
.btn-white-cal:disabled {
opacity: .6;
pointer-events: none;
}
.btn-red-cal {
padding: 4px 12px;
line-height: 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #d9534f;
border: 1px solid #d43f3a;
border-radius: 4px;
color: #fff;
cursor: pointer;
text-align: center;
}
.btn-red-cal:hover {
background-color: #c9302c;
border: 1px solid #ac2925;
}
.btn-red-cal:disabled {
opacity: .6;
pointer-events: none;
}
.text-primary {
color: #337ab7;
}
.bg-primary {
background-color: #337ab7;
}
.text-success {
color: #3c763d;
}
.bg-success {
background-color: #dff0d8;
}
.text-info {
color: #31708f;
}
.bg-info {
background-color: #d9edf7;
}
.text-warning {
color: #8a6d3b;
}
.bg-warning {
background-color: #fcf8e3;
}
.text-danger {
color: #a94442;
}
.bg-danger {
background-color: #f2dede;
}
.text-muted {
color: #777;
}
.table-striped-sem {
width: 100%;
border-collapse: collapse;
}
.table-striped-sem tr {
border-top: 1px solid #ddd;
background-color: #f9f9eb;
}
.table-striped-sem tr:nth-child(even) {
background-color: #fff;
}
.table-striped-sem tr:hover {
background-color: #f4f4d7;
}
.table-striped-sem td {
line-height: 1.4;
}
.cf_header_cal {
border-radius: 4px 4px 0 0;
padding: 7px 0;
color: #FFF;
font: 20px Arial, Helvetica, sans-serif;
text-align: center;
background: #bf3030;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.cf_week_days {
background: #d57676;
color: #fff;
font: 14px Arial, Helvetica, sans-serif;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cf_change_month {
border-radius: 4px;
cursor: pointer;
width: 40px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
color: #f5f5f5;
text-decoration: none;
}
.cf_change_month:hover {
color: #fff;
text-decoration: none;
}
.cf_days_out_month {
text-align: center;
height: 49px;
border-radius: 4px;
box-shadow: 0px 0px 1px #999;
font: bold 14px Arial, Helvetica, sans-serif;
background-color: #fff;
color: #CCC;
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cf_days_relleno {
background-color: inherit;
height: 49px;
}
.cf_days_current_month {
box-sizing: border-box;
vertical-align: top;
text-align: right;
padding: 2px;
padding-top: 5px;
height: 49px;
border-radius: 4px;
box-shadow: 0px 0px 1px #999;
font: bold 14px Arial, Helvetica, sans-serif;
background-color: #f9f9eb;
color: #000;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cf_days_current_month:hover {
background-color: #fff;
color: #0000CC;
}
.cf_current_day {
box-sizing: border-box;
vertical-align: top;
text-align: right;
padding: 2px;
padding-top: 5px;
height: 49px;
border-radius: 4px;
background-color: #fff;
font: bold 14px Arial, Helvetica, sans-serif;
color: blue;
cursor: pointer;
box-shadow: 0px 0px 1px 1px #e0e0e0 inset;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ul_nav0 {
list-style-type: none;
margin: 0;
padding: 0;
}
.ul_nav0 li {
float: left;
}
.ul_nav0 li input {
margin: 0;
padding: 4px 10px;
background-color: #fff;
border: 1px solid #b3b3b3;
border-radius: 3px;
color: #757575;
font-size: 14px;
}
.ul_nav0 li input:hover {
background-color: #eee;
}
.ul_nav1 {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
}
.ul_nav1 li {
display: inline;
}
.ul_nav1 li a {
padding: 5px 10px;
color: #337ab7;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.ul_nav1 li a:not(.active):hover {
background-color: #f5f5f5;
color: darkblue;
}
.ul_nav1 li a.active {
color: #fff;
background-color: #d57676;
cursor: default;
}
.slide_down {
animation-name: slide_down;
-webkit-animation-name: slide_down;
animation-duration: .8s;
-webkit-animation-duration: .8s;
visibility: visible;
}
/* *** pages *** */
.easytransitions_transition div {
width: 200px;
height: 200px;
background: skyblue;
position: absolute;
-webkit-transform: scale(0);
transform: scale(0);
z-index: 1;
}
.easytransitions_transition .split_diagonal, .easytransitions_transition .split_diagonal_alt, .easytransitions_transition .split_diamond {
-webkit-animation: diamond 1.2s;
animation: diamond 1.2s;
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
}
.easytransitions_transition .split_horizontal, .easytransitions_transition .wipe_top, .easytransitions_transition .wipe_bottom {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.easytransitions_transition .split_vertical, .easytransitions_transition .wipe_left, .easytransitions_transition .wipe_right {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.easytransitions_transition__part-1 {
left: -100px;
top: -100px;
}
.easytransitions_transition__part-1.split_diagonal_alt, .easytransitions_transition__part-1.split_vertical, .easytransitions_transition__part-1.split_horizontal {
display: none;
}
.easytransitions_transition__part-2 {
bottom: -100px;
left: -100px;
}
.easytransitions_transition__part-2.split_diagonal, .easytransitions_transition__part-2.split_vertical, .easytransitions_transition__part-2.split_horizontal {
display: none;
}
.easytransitions_transition__part-3 {
top: -100px;
right: -100px;
}
.easytransitions_transition__part-3.split_diagonal, .easytransitions_transition__part-3.split_vertical, .easytransitions_transition__part-3.split_horizontal {
display: none;
}
.easytransitions_transition__part-4 {
bottom: -100px;
right: -100px;
}
.easytransitions_transition__part-4.split_diagonal_alt, .easytransitions_transition__part-4.split_vertical, .easytransitions_transition__part-4.split_horizontal {
display: none;
}
.easytransitions_transition__part-5 {
height: 100% !important;
display: none;
left: 0px;
-webkit-transform-origin: 0px 200px;
transform-origin: 0px 200px;
-webkit-animation: vertical 1.2s forwards;
animation: vertical 1.2s forwards;
}
.easytransitions_transition__part-5.split_vertical, .easytransitions_transition__part-5.wipe_left {
display: block;
}
.easytransitions_transition__part-6 {
height: 100% !important;
display: none;
right: -200px;
-webkit-transform-origin: 0px 200px;
transform-origin: 0px 200px;
-webkit-animation: vertical_r 1.2s forwards;
animation: vertical_r 1.2s forwards;
}
.easytransitions_transition__part-6.split_vertical, .easytransitions_transition__part-6.wipe_right {
display: block;
}
.easytransitions_transition__part-7 {
width: 100% !important;
display: none;
bottom: -100px;
-webkit-animation: horizontal 1s forwards;
animation: horizontal 1s forwards;
}
.easytransitions_transition__part-7.split_horizontal, .easytransitions_transition__part-7.wipe_bottom {
display: block;
}
.easytransitions_transition__part-8 {
width: 100% !important;
display: none;
top: -100px;
-webkit-animation: horizontal 1s forwards;
animation: horizontal 1s forwards;
}
.easytransitions_transition__part-8.split_horizontal, .easytransitions_transition__part-8.wipe_top {
display: block;
}
.easytransitions .active_slide {
display: block;
}
.easytransitions section {
height: 100vh;
display: none;
}
.easytransitions section .center {
position: absolute;
left: 0;
margin: auto;
width: 600px;
font-family: 'nunito';
right: 0;
text-align: center;
color: white;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@-webkit-keyframes diamond {
0% {
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
50% {
-webkit-transform: rotate(45deg) scale(10);
transform: rotate(45deg) scale(10);
}
100% {
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
}
@keyframes diamond {
0% {
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
50% {
-webkit-transform: rotate(45deg) scale(10);
transform: rotate(45deg) scale(10);
}
100% {
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
}
@-webkit-keyframes vertical {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
50% {
-webkit-transform: scaleX(10);
transform: scaleX(10);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@keyframes vertical {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
50% {
-webkit-transform: scaleX(10);
transform: scaleX(10);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@-webkit-keyframes vertical_r {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
50% {
-webkit-transform: scaleX(-10);
transform: scaleX(-10);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@keyframes vertical_r {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
50% {
-webkit-transform: scaleX(-10);
transform: scaleX(-10);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@-webkit-keyframes horizontal {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
50% {
-webkit-transform: scaleY(10);
transform: scaleY(10);
}
100% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@keyframes horizontal {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
50% {
-webkit-transform: scaleY(10);
transform: scaleY(10);
}
100% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@keyframes slide_down {
0% {
opacity: 0;
transform: translateY(-60%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide_down {
0% {
opacity: 0;
-webkit-transform: translateY(-60%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@keyframes slide_der {
0% {
opacity: 0;
transform: translateX(-70%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@-webkit-keyframes slide_der {
0% {
opacity: 0;
-webkit-transform: translateX(-70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@keyframes slide_izq {
0% {
opacity: 0;
transform: translateX(70%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@-webkit-keyframes slide_izq {
0% {
opacity: 0;
-webkit-transform: translateX(70%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@media screen and (max-width: 768px) {
.nr_textarea {
width: 125px;
min-width: 125px;
height: 125px;
min-height: 125px;
}
}
</style>
<noscript>
<div style="text-align: center; font-family: Arial, Helvetica, sans-serif; border: 2px solid red; padding: 10px; font-style: italic;">Javascript está deshabilitado: El sitio no se visualizará correctamente</div>
</noscript>
<!-- Editor -->
<!-- MODAL - html / iconos -->
<div id="modal1" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td id="titulo_modal" style="font-size: 18px; padding-left: 20px; color: #464646;">Titulo Modal</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" style="padding: 5px 8px; margin: 0 10px; color: #9e9e9e; font-size: 30px; cursor: pointer; user-select: none;" onmouseover="style.color='#d32f2f'" onmouseout="style.color='#9e9e9e'" onclick="switch_active_modal('modal1')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div id="modal_contenido" style="padding: 15px; max-height: 350px; overflow-y: auto;"></div>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- MODAL 2 - upload image -->
<div id="modal2" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td id="titulo_modal" style="font-size: 18px; padding-left: 20px; color: #464646;">Insertar Imagen</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" style="padding: 5px 8px; margin: 0 10px; color: #9e9e9e; font-size: 30px; cursor: pointer; user-select: none;" onmouseover="style.color='#d32f2f'" onmouseout="style.color='#9e9e9e'" onclick="switch_active_modal('modal2')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div style="padding: 15px 25px 25px 25px; max-height: 350px; overflow: auto;">
<table style="border-collapse: collapse; width: 99%;">
<tbody>
<tr>
<td>Pegar Ruta Imagen (web o local):</td>
<td style="width: 1%;">
<img title="Información Util" src="images/info.png" style="height: 14px; opacity: .8; position: relative; bottom: -1px; cursor: pointer" onclick="confirm('Puede suceder que algún navegador web como Firefox bloquee la visualización de la imagen local desde el protocolo File (Archivo), lo cuál no debería suceder.')">
</td>
</tr>
</tbody>
</table>
<div style="color: #616161; font-style: italic; margin-top: 5px;">(Ej.) C:\Users\Admin\Pictures\imagen.jpg</div>
<div style="margin-top: 10px; font-family: Arial, sans-serif; color: #616161; font-style: italic; color: #616161; font-size:12px;">Puedes obtener la ubicación de la imagen haciendo<br>click derecho sobre la misma:</div>
<div style="margin-top: 8px; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #464646; font-size:13px;">Propiedades > General > Ubicación</div>
<div style="margin-top: 15px;" >
<input type="text" placeholder="(Img src) Pegar aquí..." id="in_path_img" style="width: 300px; padding: 2px 5px;" >
</div>
</div>
<!-- footer -->
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<td id="eval_upload_img" style="text-align: right; font-size: 14px; color: green;"></td>
<td style="width: 1%; padding: 10px 25px 10px 15px;">
<input type="button" class="btn1" value="Agregar" onclick="upload_img()">
</td>
</tr>
</tbody>
</table>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Main -->
<table id="notif_pagina" style="position: fixed; display: none; margin: auto; left: 50%; transform: translate(-50%); margin-top: 10px; "><tbody><tr><td style="padding: 5px 10px; font-family: 'Times New Roman', Times, serif; font-size: 16px; color: green; background-color: rgba(255, 255, 255, .6);"></td></tr></tbody></table>
<div id="modal_alerta_chat" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999999; background-color: rgba(255, 255, 255, .5);">
<div style="width: 350px; background-color: #fff; border-radius: 10px; padding: 20px 20px 15px 20px; font-family: Arial, Helvetica, sans-serif; color: #464646; box-shadow: 0px 0px 4px #999; margin: auto; clear: both; margin-top: 5px;">
<div style="font-weight: bold; font-size: 16px;">Esta página dice</div>
<div class="modal_alerta_text" style="margin-top: 15px; margin-bottom: 10px; font-size: 14px;"></div>
<div align="right">
<input type="button" value="Aceptar" style="padding: 0px 15px; border: 1px solid #9e9e9e; height: 36px; border-radius: 18px; background-color: #4169e1; color: #fff; font-size: 13px; font-weight: bold;" onmouseover="this.style.backgroundColor='#6585e7'" onmouseout="this.style.backgroundColor='#4169e1'" onclick="switch_alerta_chat()">
</div>
</div>
</div>
<div id="modal_alerta" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999999; background-color: rgba(255, 255, 255, .5);">
<div style="width: 350px; background-color: #fff; border-radius: 10px; padding: 20px 20px 15px 20px; font-family: Arial, Helvetica, sans-serif; color: #464646; box-shadow: 0px 0px 4px #999; margin: auto; clear: both; margin-top: 5px;">
<div style="font-weight: bold; font-size: 16px;">Esta página dice</div>
<div class="modal_alerta_text" style="margin-top: 15px; margin-bottom: 10px; font-size: 14px;"></div>
<div align="right">
<input type="button" value="Aceptar" style="padding: 0px 15px; border: 1px solid #9e9e9e; height: 36px; border-radius: 18px; background-color: #4169e1; color: #fff; font-size: 13px; font-weight: bold;" onmouseover="this.style.backgroundColor='#6585e7'" onmouseout="this.style.backgroundColor='#4169e1'" onclick="switch_alerta()">
</div>
</div>
</div>
<div id="modal_nombre_lista" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td style="font-size: 18px; padding-left: 20px; color: #464646;">Editar Nombre</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('modal_nombre_lista')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div style="padding: 20px 25px 25px 25px; overflow: auto;">
<div><span style="font-size: 12px; font-style: italic; color: #757575; margin-right: 10px;">NOMBRE</span> <span id="old_nombre_lista"></span></div>
<div style="margin-top: 20px;"><span style="color: #616161">Nuevo Nombre</span> <input type="text" id="new_nombre_lista" value="" size="30" maxlength="30" style="padding: 3px 5px; margin-left: 5px;"></div>
</div>
<!-- footer -->
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<td id="eval_editar_nombre_lista" style="text-align: right; font-size: 14px; color: green;"></td>
<td style="width: 1%; padding: 10px 25px 10px 15px;">
<input type="button" id="btn_actualizar_nombre_lista" data-type="doc" class="btn-primario" value="Actualizar" onclick="actualizar_nombre_lista(this.dataset.type)">
</td>
</tr>
</tbody>
</table>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="modal_info" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td style="font-size: 18px; padding-left: 20px; color: #464646;">Información Util</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('modal_info')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div style="padding: 20px 25px 25px 25px; max-width: 450px; overflow: auto;">
<div>
Copiar y pegar un rango de celdas para crear la grilla.
</div>
<div style="margin-top: 10px">
ESTILOS / EDITAR CONTENIDO - Los estilos y la edición de contenido estarán disponibles luego de Guardar.
</div>
<div style="margin-top: 10px">
COPIAR/PEGAR - Luego de crear la grilla, se puede copiar y pegar rangos de celdas sobre cualquier celda de la grilla para reemplazar contenido. Las celdas que excedan al rango original serán ignoradas.
</div>
<div style="margin-top: 10px">
DESPLAZAMIENTO - Mantener CTRL presionado y usar las flechas de dirección para desplazarse entre celdas.
</div>
<div style="margin-top: 10px">
CTRL + DEL : Eliminar el contenido de la fila / columna.
</div>
<div style="margin-top: 10px">
CTRL + <img src="images/arrows_move.png" style="position: relative; bottom: -2px; padding: 0 2px; opacity: .8" > : Desplazamiento.
</div>
</div>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="modal_nombre_plantilla" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td id="tit_modal_nombre_plantilla" style="font-size: 18px; padding-left: 20px; color: #464646;">Nombre Plantilla</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('modal_nombre_plantilla')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div style="padding: 20px 25px 25px 25px; overflow: auto;">
<div id="div_old_name_plantilla"><span style="font-size: 12px; font-style: italic; color: #757575; margin-right: 10px; margin-bottom: 10px;">NOMBRE</span> <span id="old_nombre_plantilla"></span></div>
<div style="margin-top: 10px; margin-bottom: 5px;"><span style="color: #616161">Nombre</span> <input type="text" id="new_nombre_plantilla" value="" size="30" maxlength="30" style="padding: 3px 5px; margin-left: 5px;"></div>
</div>
<!-- footer -->
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<td id="eval_editar_nombre_plantilla" style="text-align: right; font-size: 14px; color: green;"></td>
<td style="width: 1%; padding: 10px 25px 10px 15px;">
<input type="button" id="btn_actualizar_nombre_plantilla" data-type="new" class="btn-primario" value="Actualizar" onclick="actualizar_nombre_plantilla(this)">
</td>
</tr>
</tbody>
</table>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="modal_agregar_secc" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td id="tit_modal_add_secc" style="font-size: 18px; padding-left: 20px; color: #464646;"></td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('modal_agregar_secc')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div style="padding: 15px 25px 25px 25px; overflow: auto;">
<table>
<tbody>
<tr>
<td style="color: #757575; font-style: italic; padding-right: 10px;">Plantilla</td><td id="td_nombre_plantilla"></td>
</tr>
</tbody>
</table>
<div id="contenido_modal_agregar_secc" style="margin-top: 15px;"></div>
</div>
<!-- footer -->
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<td id="eval_agregar_secc_plantilla" style="text-align: right; font-size: 14px; color: green;"></td>
<td style="width: 1%; padding: 10px 25px 10px 15px;">
<input type="button" id="btn_add_secc" class="btn-primario" value="Agregar" onclick="agregar_secc_plantilla(this)">
</td>
</tr>
</tbody>
</table>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="modal_crear_nick" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td style="font-size: 18px; padding-left: 20px; color: #464646;">Crear Nick</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('modal_crear_nick')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div style="padding: 15px 25px 25px 25px; overflow: auto;">
<div>• Mínimo 3 caracteres</div>
<div>• Sólo letras</div>
<div><input id="input_crear_nick" type="text" size="25" maxlength="25" style="margin: 10px; padding: 4px 6px; font-size: 14px;" ></div>
</div>
<!-- footer -->
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<td id="eval_crear_nick" style="text-align: right; font-size: 14px; color: green;"></td>
<td style="width: 1%; padding: 10px 25px 10px 15px;">
<input type="button" class="btn-primario" value="Crear" onclick="crear_nick_sesion()">
</td>
</tr>
</tbody>
</table>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="modal_grid_eliminar_cont" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td style="font-size: 18px; padding-left: 20px; color: #464646;">Eliminar Contenido</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('modal_grid_eliminar_cont')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div style="padding: 15px 20px 20px 20px; max-width: 450px; overflow: auto;">
<div class="div_del_cont" onmousedown="eliminar_cont_grid('1'); switch_active_modal('modal_grid_eliminar_cont');">
» Eliminar el contenido de la Fila.
</div>
<div class="div_del_cont" style="margin-top: 4px;" onmousedown="eliminar_cont_grid('2'); switch_active_modal('modal_grid_eliminar_cont');">
» Eliminar el contenido de la Columna.
</div>
</div>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- MODAL LOCAL STORAGE -->
<div id="modal_local_storage" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td style="font-size: 18px; padding-left: 20px; color: #464646;">Local Storage</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('modal_local_storage')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div id="contenido_modal_storage" style="padding: 20px 25px 25px 25px; max-width: 450px; overflow: auto;">
</div>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<table class="table_nav">
<tbody>
<tr>
<td>
<table id="menu_link">
<tbody>
<tr>
<td style="padding-right: 15px;">
<img title="Información Util" src="images/info.png" style="height: 14px; opacity: .8; position: relative; bottom: -1px; cursor: pointer" onclick="modal_info_app()">
</td>
<td style="padding-right: 15px;">
<img title="Almacenamiento local" src="images/download2.png" style="height: 18px; opacity: .8; position: relative; bottom: -1px; cursor: pointer" onclick="modal_info_storage()">
</td>
<td style="border-left: 1px solid #999; padding: 0px 10px;">
<a href="data_grid/" onclick="switch_app(event, 0, '#section_grid')">Data Grid</a>
</td>
<td style="border-left: 1px solid #999; padding: 0px 10px;">
<a href="online_apps/" onclick="switch_app(event, 1, '#section_online')">Data Share</a>
</td>
<td style="border-left: 1px solid #999; padding: 0px 10px;">
<a href="calendario/" onclick="switch_app(event, 2, '#section_calendario')">Calendario</a>
</td>
<td style="border-left: 1px solid #999; padding: 0px 10px;">
<a href="notas/" onclick="switch_app(event, 3, '#section_notas')">Notas</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align: right;">
<table style="float: right; margin-right: 20px; user-select: none; -webkit-user-select: none;">
<tbody>
<tr>
<td style="width: 50px; display: none;">
<div style="text-align: center; position: relative; padding-top: 5px; cursor: pointer;" onclick="switch_app(event, 1, '#section_online')">
<img src="images/chat.png" style="width: 25px;">
<div id="main_budget_chat" class="modulos-budget">0</div>
</div>
</td>
<td style="width: 50px; display: none;">
<div title="Hay entradas de Calendario para hoy" style="text-align: center; position: relative; padding-top: 5px; cursor: pointer;" onclick="switch_app(event, 2, '#section_calendario')">
<img src="images/calendario2.png" style="width: 25px;">
<div id="main_budget_cal" class="modulos-budget">0</div>
</div>
</td>
<td title="Ir a Inicio" style="font-family: 'Brush Script MT', cursive; font-size: 22px; padding-left: 20px; padding-right: 20px; color: #546e7a; text-shadow: 0 1px 1px #fafafa; cursor: pointer;" onclick="switch_app(event, -1, '#section_inicio')">
4data - appsRegnare
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class='easytransitions'>
<div class='easytransitions_transition'>
<div class='div easytransitions_transition__part-1 none'></div>
<div class='div easytransitions_transition__part-2 none'></div>
<div class='div easytransitions_transition__part-3 none'></div>
<div class='div easytransitions_transition__part-4 none'></div>
<div class='div easytransitions_transition__part-5 none'></div>
<div class='div easytransitions_transition__part-6 none'></div>
<div class='div easytransitions_transition__part-7 none'></div>
<div class='div easytransitions_transition__part-8 none'></div>
</div>
</div>
<!-- inicio -->
<section id="section_inicio" class='active_slide'>
<div id="container_inicio">
<table class="table-inicio" style="border-collapse: initial; border-spacing: 25px;">
<tbody>
<tr>
<td class="panel panel-default item-inicio slide0">
<a href="data_grid/" target="main" style="background-color: inherit; text-decoration: none;" onclick="switch_app(event, 0, '#section_grid');">
<div class="item-inicio-heading">
Data Grid
</div>
<div style="padding: 15px;">
<img src="images/grid.png" style="width: 40px;">
</div>
</a>
</td>
<td class="panel panel-default item-inicio slide1">
<a href="online_apps/" target="main" style="background-color: inherit; text-decoration: none;" onclick="switch_app(event, 1, '#section_online');">
<div class="item-inicio-heading">
Data Share
</div>
<div style="padding: 15px;">
<img src="images/send.png" style="width: 40px; opacity: .6;">
</div>
</a>
</td>
</tr>
<tr>
<td class="panel panel-default item-inicio slide0">
<a href="calendario/" target="main" style="background-color: inherit; text-decoration: none;" onclick="switch_app(event, 2, '#section_calendario');">
<div class="item-inicio-heading">
Calendario
</div>
<div style="padding: 15px;">
<img src="images/calendario.png" style="width: 40px;">
</div>
</a>
</td>
<td class="panel panel-default item-inicio slide1">
<a href="notas/" target="main" style="background-color: inherit; text-decoration: none;" onclick="switch_app(event, 3, '#section_notas');">
<div class="item-inicio-heading">
Notas
</div>
<div style="padding: 15px;">
<img src="images/notes.png" style="width: 40px;">
</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer_main">
<div><b>4data</b> - <b><i>appsRegnare.com</i></b></div>
<div><i>Todos los derechos reservados</i></div>
</div>
</section>
<!-- section grid -->
<section id="section_grid" style="display: none;">
<div style="width: 100%; height: 100%; display: table-cell; vertical-align: middle;">
<div class="container_section" style="overflow: hidden;">
<table id="grid_table" class="modulos-table">
<tbody>
<tr>
<td id="td_modulos_grid" style="position: relative; width: 70px; vertical-align: top;">
<div class="modulos-title">MODULOS</div>
<a href="#" class="modulos-link" onclick="listar_docs(0)">
<div style="text-align: center; position: relative; padding-top: 5px;">
<img src="images/doc.png" style="width: 30px;">
<div id="grid_budget_docs" class="modulos-budget">0</div>
</div>
<div>Docs</div>
</a>
<a href="#" class="modulos-link" onclick="listar_grids(1)">
<div style="text-align: center; position: relative; padding-top: 5px;">
<img src="images/grid.jpg" style="width: 30px;">
<div id="grid_budget_grids" class="modulos-budget">20</div>
</div>
<div style="text-align: center;">Grillas</div>
</a>
<div>
<hr class="hr1">
</div>
<a href="#" class="modulos-link" onclick="listar_plantillas(2)">
<div style="text-align: center; position: relative; padding-top: 5px;">
<img src="images/plantilla.png" style="width: 30px;">
<div id="grid_budget_plantillas" class="modulos-budget">99</div>
</div>
<div style="text-align: center;">Plantillas</div>
</a>
<div style="position: absolute; bottom: 5px; left: 0;">
<div style="width: 70px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; color: #464646;">Usado:</div>
<div id="div_size_grid" style="width: 70px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; color: #464646;">0.1 Mb</div>
</div>
</td>
<td id="display_grid" style="padding: 15px; border-left: 1px solid #e0e0e0; overflow-y: auto;">
<div style="text-align: center;">Plantillas Imprimibles</div>
<div style="text-align: center; font-style: italic; color: #757575;">Crea secciones usando Docs o Grillas, luego agrégalas a las plantillas..</div>
</td>
</tr>
</tbody>
</table>
<!-- editor -->
<div id="container_editor" style="display: none; min-height: 517px; height: 517px;">
<div style="padding-left: 30px; padding-right: 30px">
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;"><input id="in_tit_doc" type="text" placeholder="Agregar título (opcional)" maxlength="1000" value="" class="grid_input_tit" onkeydown="if (event.keyCode == 27 || event.keyCode == 13) document.activeElement.blur();" oninput="if (this.value.trim() == '') this.style.border='1px dashed #bdbdbd'; else this.style.border='none'; mostrar_bullet_cambios('doc');"></td>
<td style="width: 1%;">
<img src="images/print.png" title="Imprimir documento" style="height: 18px; margin-right: 30px; cursor: pointer; position: relative; bottom: -2px; opacity: .6;" onmouseover="this.style.opacity='.8'" onmouseout="this.style.opacity='.6'" onclick="imprimir_doc()" >
</td>
<td style="width: 1%;">
<img src="images/arrow_back1.png" title="Volver" style="cursor: pointer; position: relative; bottom: -2px;" alt="" onclick="switch_to_editor()">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<!-------- btns editor -------->
<div id="div_btns">
<div class="div_barra_botones" style="background-color: #F7F7F7; border-radius: 4px 4px 2px 2px; border-bottom: 1px solid #eee; padding: 3px 5px 2px 10px;">
<!-- Configurar Página -->
<ul style='list-style-type:none;margin:0;padding:0;'>
<li>
<button type="button" title="Configurar Página" class="btn_alt" onClick="menu_emerg_doc('te_submenu_page');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M19.1,12.9a2.8,2.8 0,0 0,0.1 -0.9,2.8 2.8,0 0,0 -0.1,-0.9l2.1,-1.6a0.7,0.7 0,0 0,0.1 -0.6L19.4,5.5a0.7,0.7 0,0 0,-0.6 -0.2l-2.4,1a6.5,6.5 0,0 0,-1.6 -0.9l-0.4,-2.6a0.5,0.5 0,0 0,-0.5 -0.4H10.1a0.5,0.5 0,0 0,-0.5 0.4L9.3,5.4a5.6,5.6 0,0 0,-1.7 0.9l-2.4,-1a0.4,0.4 0,0 0,-0.5 0.2l-2,3.4c-0.1,0.2 0,0.4 0.2,0.6l2,1.6a2.8,2.8 0,0 0,-0.1 0.9,2.8 2.8,0 0,0 0.1,0.9L2.8,14.5a0.7,0.7 0,0 0,-0.1 0.6l1.9,3.4a0.7,0.7 0,0 0,0.6 0.2l2.4,-1a6.5,6.5 0,0 0,1.6 0.9l0.4,2.6a0.5,0.5 0,0 0,0.5 0.4h3.8a0.5,0.5 0,0 0,0.5 -0.4l0.3,-2.6a5.6,5.6 0,0 0,1.7 -0.9l2.4,1a0.4,0.4 0,0 0,0.5 -0.2l2,-3.4c0.1,-0.2 0,-0.4 -0.2,-0.6ZM12,15.6A3.6,3.6 0,1 1,15.6 12,3.6 3.6,0 0,1 12,15.6Z" />
</g>
</svg>
</button>
</li>
<li id='te_submenu_page' style='position:absolute; z-index: 10; display:none;'>
<form name="form_estilos_predet_doc">
<table style="border-spacing:0px; border-collapse:collapse; background-color:#fff;">
<tbody>
<!-- page size -->
<tr>
<td style="padding:0; margin:0;" onmouseenter="if (!firstElementChild.disabled) nextElementSibling.style.visibility = 'visible';" onmouseout="nextElementSibling.style.visibility = 'hidden';">
<input type="button" value="Tamaño »" title="No disponible" class="input_show_estilos_predet_doc" disabled />
</td>
<td id="submenu_page_size" style="visibility:hidden; position:absolute; width:160px; text-align:center; background-color:#FBFCFC; border: 1px solid #cccccc; border-radius: 4px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:12px; padding: 6px 4px 8px 4px;" onmouseover="style.visibility = 'visible'" onmouseout="style.visibility = 'hidden'">
<div>
<table style="cursor:pointer;" onmouseover="this.style.color = 'blue'; this.style.backgroundColor = '#eee';" onmouseout="this.style.color = 'inherit'; this.style.backgroundColor = 'inherit';" onclick="estilos_predet_doc(1,'web',this)">
<tbody>
<tr>
<td class="check_page_size" style="width:20px; color:#000;">✓</td>
<td style="width:120px; text-align: center; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:12px;"><span style="font-weight:bold;">Web</span></br><span style="color:#333; font-size: 10px;">(730 x 450) px</span></td>
<td style="width:5px;"></td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="cursor:pointer;" onmouseover="this.style.color = 'blue'; this.style.backgroundColor = '#eee';" onmouseout="this.style.color = 'inherit'; this.style.backgroundColor = 'inherit';" onclick="estilos_predet_doc(1,'a4',this);">
<tbody>
<tr>
<td class="check_page_size" style="width:20px; color:#000;"></td>
<td style="text-align: center; width:120px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:12px;"><span style="font-weight:bold;">A4</span></br><span style="color:#333; font-size: 13px; font-size: 10px;">(210 x 297) mm</span></td>
<td style="width:5px;"></td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="cursor:pointer;" onmouseover="this.style.color = 'blue'; this.style.backgroundColor = '#eee';" onmouseout="this.style.color = 'inherit'; this.style.backgroundColor = 'inherit';" onclick="estilos_predet_doc(1,'carta',this)">
<tbody>
<tr>
<td class="check_page_size" style="width:20px; color:#000;"></td>
<td style="width:120px; text-align: center; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:12px;"><span style="font-weight:bold;">Carta</span></br><span style="color:#333; font-size: 10px;">(215.9 x 279.4) mm</span></td>
<td style="width:5px;"></td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="cursor:pointer;" onmouseover="this.style.color = 'blue'; this.style.backgroundColor = '#eee';" onmouseout="this.style.color = 'inherit'; this.style.backgroundColor = 'inherit';" onclick="estilos_predet_doc(1,'legal',this)">
<tbody>
<tr>
<td class="check_page_size" style="width:20px; color:#000;"></td>
<td style="width:120px; text-align: center; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:12px;"><span style="font-weight:bold;">Legal</span></br><span style="color:#333; font-size: 10px;">(215.9 x 355.6) mm</span></td>
<td style="width:5px;"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<!-- page orientation -->
<tr style="background-color: rgba(255, 255, 255, .4);">
<td style="padding:0; margin:0;" onmouseenter="if (!firstElementChild.disabled) nextElementSibling.style.visibility = 'visible';" onmouseout="nextElementSibling.style.visibility = 'hidden';">
<input id="input_sel_page_orientation" type="button" title="No disponible" value="Orientación »" class="input_show_estilos_predet_doc" disabled />
</td>
<td id="submenu_page_orientation" style="visibility:hidden; position:absolute; width:160px; text-align:center; background-color:#FBFCFC; border: 1px solid #cccccc; border-radius: 4px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:12px; cursor:pointer; padding: 4px;" onmouseover="style.visibility = 'visible'" onmouseout="style.visibility = 'hidden'">
<div>
<table style="width: 100%; cursor:pointer;" onmouseover="this.style.color = 'blue'; this.style.backgroundColor = '#eee';" onmouseout="this.style.color = 'inherit'; this.style.backgroundColor = 'inherit';" onclick="estilos_predet_doc(2, 'vertical', this)">
<tbody>
<tr>
<td class="check_page_orientation" style="width:20px; height: 20px; color:#000;">✓</td>
<td><img src="images/page_vertical.png" alt=""></td>
<td style="text-align: left; padding-left: 5px;">Vertical</td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="width: 100%; cursor:pointer;" onmouseover="this.style.color = 'blue'; this.style.backgroundColor = '#eee';" onmouseout="this.style.color = 'inherit'; this.style.backgroundColor = 'inherit';" onclick="estilos_predet_doc(2, 'horizontal', this)">
<tbody>
<tr>
<td class="check_page_orientation" style="width:20px; height: 20px; color:#000;"></td>
<td><img src="images/page_horizontal.png" style="position: relative; bottom: -2px;" alt=""></td>
<td style="text-align: left; padding-left: 5px;">Horizontal</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<!-- márgenes -->
<tr style="background-color: rgba(255, 255, 255, .4);">
<td style="padding:0; margin:0;" onmouseenter="if (!firstElementChild.disabled) nextElementSibling.style.visibility = 'visible';" onmouseout="nextElementSibling.style.visibility = 'hidden';">
<input id="input_sel_margenes" type="button" title="No disponible" value="Márgenes »" class="input_show_estilos_predet_doc" disabled />
</td>
<td id="submenu_page_margenes" style="visibility:hidden; position:absolute; width:160px; text-align:center; background-color:#FBFCFC; border: 1px solid #cccccc; border-radius: 4px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:12px; cursor:pointer; padding: 4px; padding-bottom: 10px;" onmouseover="style.visibility = 'visible'" onmouseout="style.visibility = 'hidden'">
<div>
<table style="width: 100%; cursor:pointer;" onmouseover="this.style.color = 'blue'; this.style.backgroundColor = '#eee';" onmouseout="this.style.color = 'inherit'; this.style.backgroundColor = 'inherit';" onclick="estilos_predet_doc(3, 'predet', this)">
<tbody>
<tr>
<td class="check_page_margenes" style="width:20px; height: 20px; color:#000;">✓</td>
<td style="text-align: left; padding-left: 5px;">Predeterminado</td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="width: 100%; cursor:pointer;" onmouseover="this.style.color = 'blue'; this.style.backgroundColor = '#eee';" onmouseout="this.style.color = 'inherit'; this.style.backgroundColor = 'inherit';" onclick="estilos_predet_doc(3, 'none', this)">
<tbody>
<tr>
<td class="check_page_margenes" style="width:20px; height: 20px; color:#000;"></td>
<td style="text-align: left; padding-left: 5px;">Sin márgenes</td>
</tr>
</tbody>
</table>
</div>
<div style="border-top: 1px solid #eee; margin-top: 5px; margin-bottom: 10px;"></div>
<table style="margin: auto; clear: both;">
<tbody>
<tr>
<td style="font-size: 11px;">Sup.</td>
<td>
<input type="number" name='mtop' value="12" size="2" min="0" max="25" step="1" style="width: 35px; font-size: 12px; padding:0; padding-left: 1px; margin:0; vertical-align: middle;" onchange="estilos_predet_doc(4)" />
</td>
<td style="font-size: 11px; padding-left: 5px;">Izq.</td>
<td>
<input type="number" name='mleft' value="12" size="2" min="0" max="25" step="1" style="width: 35px; font-size: 12px; padding:0; padding-left: 1px; margin:0; vertical-align: middle;" onchange="estilos_predet_doc(4)" />
</td>
</tr>
<tr>
<td style="font-size: 11px;">Inf.</td>
<td>
<input type="number" name='mbottom' value="12" size="2" min="0" max="25" step="1" style="width: 35px; font-size: 12px; padding:0; padding-left: 1px; margin:0; vertical-align: middle;" onchange="estilos_predet_doc(4)" />
</td>
<td style="font-size: 11px; padding-left: 5px;">Der.</td>
<td>
<input type="number" name='mright' value="12" size="2" min="0" max="25" step="1" style="width: 35px; font-size: 12px; padding:0; padding-left: 1px; margin:0; vertical-align: middle;" onchange="estilos_predet_doc(4)" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- op. predet. -->
<tr>
<td style="padding:0px; margin:0px;" onmouseenter="nextElementSibling.style.visibility = 'visible'" onmouseout="nextElementSibling.style.visibility = 'hidden'">
<input type="button" value="Op. Predet. »" class="input_show_estilos_predet_doc" />
</td>
<td id="submenu_op_predet" style="visibility:hidden; position:absolute; width:160px; background-color:#FBFCFC; border: 1px solid #cccccc; border-radius: 4px; font-size:12px; padding:10px 5px 13px 15px;" onmouseover="style.visibility = 'visible';" onmouseout="style.visibility = 'hidden'">
<div style="padding-left: 1px;">Fuente:</div>
<div style="margin-top: 2px;">
<select style="font-family:Arial, Helvetica, sans-serif; font-size:12px;" onchange="estilos_predet_doc(6, this.value)" >
<option value="'Times New Roman', Times, serif">Times New Roman</option>
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="'Comic Sans MS', cursive, sans-serif">Comic Sans MS</option>
<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">Lucida Sans Unicode</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
</select>
</div>
<div style="margin-top:8px; margin-bottom: 2px; padding-left: 1px;">Color / Tamaño de fuente:</div>
<div style="display: table-row;">
<div style="display: table-cell; vertical-align: middle; padding-right: 5px;">
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td style="padding: 0;">
<input type='button' title='#333' id="in_colores_predet_text" value=' ' style='margin:0; padding:0; width:19px; height:19px; border: 1px solid; border-color: #9e9e9e; border-radius: 3px; background-color: inherit;' onmouseover="this.style.borderColor='#757575'" onmouseout="this.style.borderColor='#9e9e9e'" onClick="el_aplicar_color='colores_doc_text'; te_click_ocultar_paleta('colores_predet_text');">
</td>
</tr>
<tr>
<td id='colores_predet_text' style='position:absolute; z-index: 100; display:none; padding: 0;'></td>
</tr>
</tbody>
</table>
</div>
<div style="display: table-cell; vertical-align: middle;">
<select name="font_size" title="Tamaño de fuente" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;" onchange="estilos_predet_doc(7, this.value)">
<option value="14px">14px</option>
<option value="16px" selected="selected">16px</option>
<option value="18px">18px</option>
<option value="24px">24px</option>
</select>
</div>
</div>
<div style="margin-top:8px; padding-left: 1px;">Espaciado de línea:</div>
<div style="margin-top: 2px;">
<select name="line_height" title="Espaciado de línea" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;" onchange="estilos_predet_doc(8, this.value)">
<option value="normal">normal</option>
<option value="1.4">1.4</option>
<option value="1.6">1.6</option>
<option value="2.0">2.0</option>
<option value="2.4">2.4</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</li>
</ul>
<!-- Deshacer -->
<button type="button" title="Deshacer" class="btn_alt" onClick="te_format_doc('undo');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M12.5,8c-2.65,0 -5.05,0.99 -6.9,2.6L2,7v9h9l-3.62,-3.62c1.39,-1.16 3.16,-1.88 5.12,-1.88 3.54,0 6.55,2.31 7.6,5.5l2.37,-0.78C21.08,11.03 17.15,8 12.5,8z" />
</g>
</svg>
</button>
<!-- Rehacer -->
<button type="button" title="Rehacer" class="btn_alt" onClick="te_format_doc('redo');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M18.4,10.6C16.55,8.99 14.15,8 11.5,8c-4.65,0 -8.58,3.03 -9.96,7.22L3.9,16c1.05,-3.19 4.05,-5.5 7.6,-5.5 1.95,0 3.73,0.72 5.12,1.88L13,16h9V7l-3.6,3.6z" />
</g>
</svg>
</button>
<!-- Seleccionar todo -->
<button type="button" title="Seleccionar todo" class="btn_alt" onClick="te_format_doc('selectAll');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M3,5h2L5,3c-1.1,0 -2,0.9 -2,2zM3,13h2v-2L3,11v2zM7,21h2v-2L7,19v2zM3,9h2L5,7L3,7v2zM13,3h-2v2h2L13,3zM19,3v2h2c0,-1.1 -0.9,-2 -2,-2zM5,21v-2L3,19c0,1.1 0.9,2 2,2zM3,17h2v-2L3,15v2zM9,3L7,3v2h2L9,3zM11,21h2v-2h-2v2zM19,13h2v-2h-2v2zM19,21c1.1,0 2,-0.9 2,-2h-2v2zM19,9h2L21,7h-2v2zM19,17h2v-2h-2v2zM15,21h2v-2h-2v2zM15,5h2L17,3h-2v2zM7,17h10L17,7L7,7v10zM9,9h6v6L9,15L9,9z"/>
</g>
</svg>
</button>
<!-- Mostrar HTML -->
<button type="button" title="Mostrar HTML generado" class="btn_alt" style="height: 22px; width: 28px; overflow: hidden;" onClick="fill_modal('mostrar_html_doc');">
<svg viewBox="0 0 24 24" style="width:22px; height: 22px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M3.5,9H5v6H3.5v-2.5h-2V15H0V9h1.5v2h2V9z M17.5,9H13c-0.55,0-1,0.45-1,1v5h1.5v-4.5h1V14H16v-3.51h1V15h1.5v-5 C18.5,9.45,18.05,9,17.5,9z M11,9H6v1.5h1.75V15h1.5v-4.5H11V9z M24,15v-1.5h-2.5V9H20v6H24z" />
</g>
</svg>
</button>
<table id="table_op_tabla" style="display: none; position: relative; bottom: -1px; margin-left: 30px; border-collapse: collapse; box-sizing: border-box;"> <!-- *** OP. TABLA *** -->
<tbody>
<tr>
<td style="background: linear-gradient(0deg, rgba(176,171,64,.5) 0%, rgba(173,180,102,.5) 35%, rgba(245,255,205,.5) 100%);">
<ul style='list-style-type:none;margin:0;padding:0;'>
<li>
<input type="button" value="Op. Tabla" title="Opciones de Tabla" style="outline: none; font-size: 12px; border: none; background-color: inherit; padding-bottom: 2px; padding-top: 2px; cursor: pointer; font-family: Arial, Helvetica, sans-serif; color: #333;" onClick="menu_emerg_doc('submenu_table_table');" />
</li>
<li id='submenu_table_table' style='position:absolute; z-index: 10; display:none;' draggable="true" ondragstart="submenu_doc_drag(this)" ondrop="return false;">
<div style='background-color:#F8F9F9; border: 1px solid #bdbdbd; border-radius: 3px; width:260px; box-shadow: 1px 2px 3px #e0e0e0;'>
<table style="width: 100%; background-color: #fff">
<tbody>
<tr>
<td style="width: 96%; font-size: 16px; color: #464646; font-family: Arial, Helvetica, sans-serif; text-align: center; user-select: none; padding: 3px 0 2px 0; cursor: move;">
Opciones de Tabla
</td>
<td>
<a onClick="document.getElementById('submenu_table_table').style.display='none';" title="Cerrar" style="color: #9e9e9e; font-size: 16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; padding: 1px 8px; position: relative; bottom: -1px; left: -2px; cursor: pointer;" onmouseover="style.color='#757575'" onmouseout="style.color='#9e9e9e'">×</a>
</td>
</tr>
</tbody>
</table>
<div style="padding: 10px;">
<table style="width: 100%; border-collapse: collapse; border-bottom: 1px solid #ddd;">
<tbody>
<tr>
<td id="view_formato" style="padding: 0; text-align: center; user-select: none; font-size: 10px; font-weight: bold; color: #616161; font-family: Arial, Helvetica, sans-serif; text-decoration: none; background-color: #F8F9F9; border: 1px solid #ddd; padding: 4px 10px 2px 10px; cursor: pointer; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #F8F9F9;" onclick="switch_views1(1, this)">
FORMATO
</td>
<td id="view_edicion" style="padding: 0; text-align: center; user-select: none; font-size: 10px; color: #616161; font-family: Arial, Helvetica, sans-serif; text-decoration: none; padding: 4px 10px 2px 10px; cursor: pointer;" onclick="switch_views1(2, this)">
EDITAR
</td>
</tr>
</tbody>
</table>
<div id="tabla_formato" style="padding: 10px; border: 1px solid #ddd; border-top: none;">
<table style="width: 100%; margin-bottom: 5px;">
<tbody>
<tr>
<td id="view1" style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; cursor: pointer; border-bottom: 2px solid blue; font-weight: bold; color: #333; padding-bottom: 5px; user-select: none;" onclick="switch_views2(1)">TABLA</td>
<td id="view2" style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; cursor: pointer; color: #616161; padding-bottom: 5px; user-select: none;" onclick="switch_views2(2)">CELDA</td>
<td id="view3" style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; cursor: pointer; color: #616161; padding-bottom: 5px; user-select: none;" onclick="switch_views2(3)">FILA</td>
</tr>
</tbody>
</table>
<form name='opc_tabla'>
<table style="margin-left: 10px;">
<tbody>
<tr>
<td>
<input type='button' name='t_t_color_tabla' value=' ' style='margin:0; padding:0; width:20px; height:20px;' onClick="el_aplicar_color='te_color_table_table'; te_click_ocultar_paleta('colores_table_table');">
<svg viewBox="0 0 20 20" style="width:14px; height: 14px; margin-bottom: -2px; margin-left: -2px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M18,4V3c0,-0.55 -0.45,-1 -1,-1H5c-0.55,0 -1,0.45 -1,1v4c0,0.55 0.45,1 1,1h12c0.55,0 1,-0.45 1,-1V6h1v4H9v11c0,0.55 0.45,1 1,1h2c0.55,0 1,-0.45 1,-1v-9h8V4h-3z" />
</g>
</svg>
</td>
<td style="font-size:12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-left: 4px;"> Color de fondo</td>
</tr>
<tr>
<td id='colores_table_table' style='position:absolute; z-index: 100; display:none;'></td>
</tr>
</tbody>
</table>
<hr>
<div style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 4px; font-weight: bold;">Borde</div>
<table style="margin-top: 2px; margin-left: 10px;">
<tbody>
<tr>
<td>
<input type='button' name='t_t_color_borde' title='Color de borde' value=' ' style='margin:0; padding:0; width:20px; height:20px;' onClick="el_aplicar_color='te_color_table_border'; te_click_ocultar_paleta('colores_table_border');">
</td>
<td>
<select name='t_t_borde_estilo' style="font-size: 12px;" onchange="aplicar_estilo_tabla(2, 'redraw')">
<option value='solid'>Sólido</option>
<option value='dotted'>Punteado</option>
<option value='double'>Doble</option>
<option value='ridge'>Biselado</option>
</select>
</td>
<td>
<select name='t_t_borde_ancho' size='1' style="font-size: 12px;" onchange="aplicar_estilo_tabla(2, 'redraw')">
<option value='1px'>1px</option>
<option value='2px'>2px</option>
<option value='3px'>3px</option>
<option value='4px'>4px</option>
<option value='5px'>5px</option>
<option value='6px'>6px</option>
<option value='7px'>7px</option>
<option value='8px'>8px</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" id='colores_table_border' style='position:absolute; z-index: 100; display:none;'></td>
</tr>
</tbody>
</table>
<table style="width: 100%; margin-top: 4px;">
<tbody>
<tr>
<td><img src="images/border-all.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_all')"></td>
<td><img src="images/border_outside.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_outside')"></td>
<td><img src="images/border_inside.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_inside')"></td>
<td><img src="images/border_horizontal.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_horizontal')"></td>
<td><img src="images/border_vertical.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_vertical')"></td>
<td><img src="images/border_top.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_top')"></td>
<td><img src="images/border_bottom.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_bottom')"></td>
<td><img src="images/border_left.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_left')"></td>
<td><img src="images/border_right.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_right')"></td>
<td><img src="images/border_none.png" style="cursor: pointer;" onclick="aplicar_estilo_tabla(2, 'img_none')"></td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr>
<td
style="font-size: 11px; font-family:Arial, Helvetica, sans-serif; text-align: right; width:25px; padding: 0;"><label for="borde_t_top" style="padding-right: 6px;">top</label>
</td>
<td style="padding: 0;">
<input type="checkbox" name="borde_top" id="borde_t_top" value="1" style="margin-left: 0" onclick="aplicar_estilo_tabla(2, 'check_top')" checked>
</td>
<td
style="font-size: 11px; font-family:Arial, Helvetica, sans-serif; text-align: right; width:25px; padding: 0;"><label for="borde_t_bottom" style="padding-right: 6px;">bottom</label>
</td>
<td style="padding: 0">
<input type="checkbox" value="2" name="borde_bottom" id="borde_t_bottom" style="margin-left: 0;" onclick="aplicar_estilo_tabla(2, 'check_bottom')" checked>
</td>
<td
style="font-size: 11px; font-family:Arial, Helvetica, sans-serif; text-align: right; width:25px; padding: 0;"><label for="borde_t_left" style="padding-right: 6px;">left</label>
</td>
<td style="padding: 0">
<input type="checkbox" value="4" name="borde_left" id="borde_t_left" style="margin-left: 0;" onclick="aplicar_estilo_tabla(2, 'check_left')" checked>
</td>
<td
style="font-size: 11px; font-family:Arial, Helvetica, sans-serif; text-align: right; width:25px; padding: 0;"><label for="borde_t_right" style="padding-right: 6px;">right</label>
</td>
<td style="padding: 0">
<input type="checkbox" name="borde_right" id="borde_t_right" value="3" style="margin-left: 0;" onclick="aplicar_estilo_tabla(2, 'check_right')" checked>
</td>
</tr>
</tbody>
</table>
<hr>
<div style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 4px; font-weight: bold;">Ajustes</div>
<table style="margin-top: 2px;">
<tbody>
<tr>
<td style="font-size: 12px; padding-left: 8px; font-family: Arial, Helvetica, sans-serif;">
Tamaño
</td>
<td style="padding-left: 4px;">
<select name='t_t_width' size='1' style='font-size: 12px;' onchange="aplicar_estilo_tabla(3, this.value)">
<option value='x'>Seleccionar</option>
<option value='100%'>100%</option>
<option value='75%'>75%</option>
<option value='50%'>50%</option>
<option value='25%'>25%</option>
<option value='0'>Autoajustar</option>
</select>
</td>
</tr>
<tr>
<td style="font-size: 12px; padding-left: 8px; font-family: Arial, Helvetica, sans-serif;">
Posición
</td>
<td style="padding-left: 4px;">
<select name='t_t_float' size='1' style='font-size: 12px;' onchange="aplicar_estilo_tabla(4, this.value)">
<option value='x'>Seleccionar</option>
<option value=''>Estático</option>
<option value='centrar'>Centrar</option>
<option value='left'>Flotar Izq.</option>
<option value='right'>Flotar Der.</option>
</select>
</td>
</tr>
<tr>
<td title="Espaciado entre texto y borde" style="padding-left: 8px; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
Padding
</td>
<td style="padding-left: 4px;">
<select name='t_t_margen' size='1' style='font-size: 12px;' onchange="aplicar_estilo_tabla(5, this.value)">
<option value='x'>Seleccionar</option>
<option value='0px'>0px</option>
<option value='2px'>2px</option>
<option value='4px'>4px</option>
<option value='6px'>6px</option>
<option value='8px'>8px</option>
<option value='12px'>12px</option>
<option value='16px'>16px</option>
<option value='24px'>24px</option>
</select>
</td>
</tr>
<tr>
<td title="Ancho de columna seleccionada" style="padding-left: 8px; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
Ancho col.
</td>
<td style="padding-left: 4px;">
<select name='t_t_col_width' size='1' style='font-size: 12px;' onchange="aplicar_estilo_tabla(6, this.value)">
<option value='x'>Seleccionar</option>
<option value='0'>Prop.</option>
<option value='10'>10%</option>
<option value='20'>20%</option>
<option value='30'>30%</option>
<option value='40'>40%</option>
<option value='50'>50%</option>
<option value='60'>60%</option>
<option value='70'>70%</option>
<option value='80'>80%</option>
<option value='90'>90%</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
<form name='opc_celda' style="display: none;">
<table style="margin-left: 10px;">
<tbody>
<tr>
<td>
<input type='button' name='t_c_color' value=' ' style='margin:0; padding:0; width:20px; height:20px;' onClick="el_aplicar_color='te_color_table_celda'; te_click_ocultar_paleta('colores_table_celda');">
<svg viewBox="0 0 20 20" style="width:14px; height: 14px; margin-bottom: -2px; margin-left: -2px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M18,4V3c0,-0.55 -0.45,-1 -1,-1H5c-0.55,0 -1,0.45 -1,1v4c0,0.55 0.45,1 1,1h12c0.55,0 1,-0.45 1,-1V6h1v4H9v11c0,0.55 0.45,1 1,1h2c0.55,0 1,-0.45 1,-1v-9h8V4h-3z" />
</g>
</svg>
</td>
<td style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-left: 4px;"> Color de fondo</td>
</tr>
<tr>
<td id='colores_table_celda' style='position:absolute; z-index: 100; display:none;'></td>
</tr>
</tbody>
</table>
<table style="margin-top: 8px;">
<tbody>
<tr>
<td style="padding-left: 8px; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
Redondear bordes
</td>
<td style="padding-left: 4px;">
<select name="t_c_b_radius" style='font-size: 12px;' onchange="aplicar_estilo_tabla(7, this.value)">
<option value='0px'>0px</option>
<option value='5px'>5px</option>
<option value='10px'>10px</option>
<option value='15px'>15px</option>
<option value='20px'>20px</option>
</select>
</td>
</tr>
</tbody>
</table>
<hr>
<div style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 4px; font-weight: bold;">Borde</div>
<table style="margin-top: 2px; margin-left: 10px;">
<tbody>
<tr>
<td>
<input type='button' name='t_c_color_borde' title='Color de borde' value=' ' style='margin:0; padding:0; width:20px; height:20px;' onClick="el_aplicar_color='te_color_cell_border'; te_click_ocultar_paleta('colores_cell_border');" />
</td>
<td>
<select name="t_c_borde_estilo" style="font-size: 12px;" onchange="aplicar_estilo_tabla(8, 'redraw')">
<option value='solid'>Sólido</option>
<option value='dotted'>Punteado</option>
<option value='double'>Doble</option>
</select>
</td>
<td>
<select name='t_c_borde_ancho' size='1' style='font-size: 12px;' onchange="aplicar_estilo_tabla(8, 'redraw')">
<option value='1px'>1px</option>
<option value='2px'>2px</option>
<option value='3px'>3px</option>
<option value='4px'>4px</option>
<option value='5px'>5px</option>
<option value='6px'>6px</option>
<option value='7px'>7px</option>
<option value='8px'>8px</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" id='colores_cell_border' style='position:absolute; z-index: 100; display:none;'></td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse; margin-top: 4px;">
<tbody>
<tr>
<td
style="font-size: 11px; font-family:Arial, Helvetica, sans-serif; text-align: right; width:25px; padding: 0"><label for="borde_c_top" style="padding-right: 6px;">top</label></td>
<td style="padding: 0"><input type="checkbox" name="borde_top" id="borde_c_top" value="1" style="margin-left: 0;" onclick="aplicar_estilo_tabla(8)" checked ></td>
<td
style="font-size: 11px; font-family:Arial, Helvetica, sans-serif; text-align: right; width:25px; padding: 0"><label for="borde_c_bottom" style="padding-right: 6px;">bottom</label></td>
<td style="padding: 0"><input type="checkbox" value="2" name="borde_bottom" id="borde_c_bottom" style="margin-left: 0;" onclick="aplicar_estilo_tabla(8)" checked></td>
<td
style="font-size: 11px; font-family:Arial, Helvetica, sans-serif; text-align: right; width:25px; padding: 0"><label for="borde_c_left" style="padding-right: 6px;">left</label></td>
<td style="padding: 0"><input type="checkbox" value="4" name="borde_left" id="borde_c_left" style="margin-left: 0;" onclick="aplicar_estilo_tabla(8)" checked>
</td>
<td
style="font-size: 11px; font-family:Arial, Helvetica, sans-serif; text-align: right; width:25px; padding: 0"><label for="borde_c_right" style="padding-right: 6px;">right</label></td>
<td style="padding: 0"><input type="checkbox" name="borde_right" id="borde_c_right" value="3" style="margin-left: 0;" onclick="aplicar_estilo_tabla(8)" checked></td>
</tr>
</tbody>
</table>
<hr>
<div style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 4px; font-weight: bold;">Ajustes</div>
<table style="margin-top: 2px;">
<tbody>
<tr>
<td style="padding-left: 8px; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
Alinear Vertical
</td>
<td style="padding-left: 4px;">
<select name="t_c_v_align" style='font-size: 12px;' onchange="aplicar_estilo_tabla(9, this.value)">
<option value='x'>Seleccionar</option>
<option value='top'>↕ Arriba</option>
<option value='middle'>↕ Centrar</option>
<option value='bottom'>↕ Abajo</option>
</select>
</td>
</tr>
<tr>
<td style="font-size: 12px; padding-left: 8px; font-family: Arial, Helvetica, sans-serif;">
Alto de fila
</td>
<td style="padding-left: 4px;">
<select name='t_c_l_height' size='1' style='font-size: 12px;' onchange="aplicar_estilo_tabla(10, this.value)">
<option value="x">Seleccionar</option>
<option value='initial'>normal</option>
<option value='1.2'>1.2</option>
<option value='1.4'>1.4</option>
<option value='1.6'>1.6</option>
<option value='2.0'>2.0</option>
<option value='2.4'>2.4</option>
</select>
</td>
</tr>
</tbody>
</table>
<hr>
<div style="padding-left: 4px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">Vincular Celdas</div>
<table style="margin-left: 10px;">
<tbody>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
n° cols
</td>
<td style="padding-left: 4px;">
<input type="number" name='colspan1' value="0" size="2" min="0" max="20" step="1" oninput="if(!(this.value) || isNaN(this.value)) this.value = ''; else if (this.value.length > 2) this.value = this.value.slice(0, 2)" style="width: 35px; font-size: 12px; padding:0; margin:0; box-sizing: border-box; vertical-align: middle;" />
</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding-left: 20px;">
n° filas
</td>
<td style="padding-left: 4px;">
<input type="number" name='rowspan1' value="0" size="2" min="0" max="20" step="1" oninput="if(!(this.value) || isNaN(this.value)) this.value = ''; else if (this.value.length > 2) this.value = this.value.slice(0, 2)" style="width: 35px; font-size: 12px; padding:0; padding-left: 1px; margin:0; box-sizing: border-box; vertical-align: middle;" />
</td>
</tr>
</tbody>
</table>
<table style="margin:0; padding: 0; margin-top: 4px; border-collapse: collapse;">
<tbody>
<tr>
<td>
<input type="button" name="t_c_vincular" value="Vincular" style="font-size: 12px; color: #263238;" onclick="
var c=document.forms['opc_celda'].colspan1.value, r=document.forms['opc_celda'].rowspan1.value;
if (c == 0 && r == 0)
return false;
if (isNaN(c) || isNaN(r))
{
switch_alerta('Ingresar sólo valores numéricos.');
return false;
}
if ((c < 0) || (r < 0) )
{
switch_alerta('Ingresar sólo valores positivos.');
return false;
}
c = parseInt(c) + 1;
r = parseInt(r) + 1;
var n=nsel, a=n.cellIndex, b=n.parentNode.rowIndex, t=n.parentNode.parentNode.parentNode, d=r-1+b, e=c-1+a, i=0;
for (i=e; i>a; i--)
{
if (t.rows[b].cells[i])
t.rows[b].cells[i].style.display = 'none';
else
c--;
}
for (i=d; i>b; i--)
if (!t.rows[i])
r--;
for (i=d; i>b; i--)
for (j=e; j>=a; j--)
if (t.rows[i])
if (t.rows[i].cells[j])
t.rows[i].cells[j].style.display = 'none';
if (c > 1)
n.setAttribute('colspan',c);
if (r > 1)
n.setAttribute('rowspan',r);
this.setAttribute('disabled','true');
document.forms['opc_celda'].t_c_desvincular.removeAttribute('disabled');"/>
</td>
<td>
<input type="button" name='t_c_desvincular' value="Desvincular celdas" style="font-size: 12px;" onclick="
var n=nsel, c, r;
if (n==null || n=='')
{
switch_alerta('Seleccionar una celda');
return false;
}
if(n.getAttribute('colspan'))
c = n.getAttribute('colspan');
else
c = 1;
if(n.getAttribute('rowspan'))
r = n.getAttribute('rowspan');
else
r = 1;
if(c==1 && r==1)
return false;
var a=n.cellIndex, b=n.parentNode.rowIndex, t=n.parentNode.parentNode.parentNode, d=parseInt(r)-1+b, e=parseInt(c)-1+a, i=0, j=0;
for (i=e; i>a; i--)
if (t.rows[b].cells[i])
t.rows[b].cells[i].style.display = '';
for (i=d; i>b; i--)
for (j=e; j>=a; j--)
if (t.rows[i])
if (t.rows[i].cells[j])
t.rows[i].cells[j].style.display = '';
if (c > 1)
n.removeAttribute('colspan');
if (r > 1)
n.removeAttribute('rowspan');
this.form.colspan1.value = 0;
this.form.rowspan1.value = 0;
this.setAttribute('disabled', 'true');
document.forms['opc_celda'].t_c_vincular.removeAttribute('disabled');
return false;"/>
</td>
</tr>
</tbody>
</table>
</form>
<form name='opc_fila' style="display: none;">
<table style="font:12px #000; margin-left: 10px;">
<tbody>
<tr>
<td>
<input type='button' name='t_f_color' value=' ' style='margin:0; padding:0; width:20px; height:20px;' onClick="el_aplicar_color='te_color_table_fila'; te_click_ocultar_paleta('colores_table_fila');">
<svg viewBox="0 0 20 20" style="width:14px; height: 14px; margin-bottom: -2px; margin-left: -2px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M18,4V3c0,-0.55 -0.45,-1 -1,-1H5c-0.55,0 -1,0.45 -1,1v4c0,0.55 0.45,1 1,1h12c0.55,0 1,-0.45 1,-1V6h1v4H9v11c0,0.55 0.45,1 1,1h2c0.55,0 1,-0.45 1,-1v-9h8V4h-3z" />
</g>
</svg>
</td>
<td style="font-size:12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-left: 4px;"> Color de fondo</td>
</tr>
<tr>
<td id='colores_table_fila' style='position:absolute; z-index: 100; display:none;'></td>
</tr>
</tbody>
</table>
<table style="margin-left: 4px; margin-top: 4px;">
<tbody>
<tr>
<td rowspan='3' style="padding-right: 10px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">Estilo de texto
</td>
<td><input type='checkbox' id="t_f_negrita" name='t_f_negrita' onchange="aplicar_estilo_tabla(12, this.checked)"></td>
<td style="font-size: 12px; font-style: italic; font-family: Arial, Helvetica, sans-serif;"><label for="t_f_negrita">Negrita</label></td>
</tr>
<tr>
<td><input type='checkbox' id="t_f_italica" name='t_f_italica' onchange="aplicar_estilo_tabla(13, this.checked)"></td>
<td style="font-size: 12px; font-style: italic; font-family: Arial, Helvetica, sans-serif;"><label for="t_f_italica">Italica</label></td>
</tr>
<tr>
<td><input type='checkbox' id="t_f_subrayado" name='t_f_subrayado' onchange="aplicar_estilo_tabla(14, this.checked)"></td>
<td style="font-size: 12px; font-style: italic; font-family: Arial, Helvetica, sans-serif;"><label for="t_f_subrayado">Subrayado</label></td>
</tr>
<tr>
<td style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-top: 10px; font-weight: bold;">
Alinear texto</td>
<td colspan='2' style="padding-top: 10px;">
<select name='t_f_align' style="font-size: 12px;" onchange="aplicar_estilo_tabla(15, this.value)">
<option value='x'>Seleccionar</option>
<option value='left'>Izquierda</option>
<option value='center'>Centrar</option>
<option value='right'>Derecha</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="tabla_editar" style="display: none; padding: 15px 10px; border: 1px solid #ddd; border-top: none;">
<table style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
<tbody>
<tr>
<td>
<input type="button" value="› Insertar Fila Anterior" style="font-size: 12px; border: none; cursor: pointer;" onClick='aplicar_formato_tabla(1);' onmouseover="this.style.color = 'blue'" onmouseout="this.style.color = 'inherit'" />
</td>
</tr>
<tr>
<td>
<input type="button" value="› Insertar Fila Posterior" style="font-size: 12px; border: none; cursor: pointer;" onClick='aplicar_formato_tabla(2);' onmouseover="this.style.color = 'blue'" onmouseout="this.style.color = 'inherit'" />
</td>
</tr>
<tr>
<td>
<input type="button" value="› Insertar Columna Posterior" style="font-size: 12px; border: none; cursor: pointer;" onClick='aplicar_formato_tabla(3)' onmouseover="this.style.color = 'blue'" onmouseout="this.style.color = 'inherit'" />
</td>
</tr>
<tr>
<td>
<input type="button" value="› Eliminar Fila" style="font-size: 12px; border: none; cursor: pointer; color: green;" onClick='aplicar_formato_tabla(4);' onmouseover="this.style.color = 'blue'" onmouseout="this.style.color = 'green'" />
</td>
</tr>
<tr>
<td>
<input type="button" value="› Eliminar Columna" style="font-size: 12px; border: none; cursor: pointer; color: green;" onClick='aplicar_formato_tabla(5);' onmouseover="this.style.color = 'blue'" onmouseout="this.style.color = 'green'" />
</td>
</tr>
<tr>
<td>
<input type="button" value="› Eliminar Tabla" style="font-size: 12px; border: none; cursor: pointer; color: red;" onClick="aplicar_formato_tabla(6)" onmouseover="this.style.color = 'blue'" onmouseout="this.style.color = 'red'" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="table_op_imagen" style="display: none; position: relative; bottom: -1px; margin-left: 30px; border-collapse: collapse; box-sizing: border-box;"> <!-- *** OP. IMAGEN *** -->
<tbody>
<tr>
<td style="background: linear-gradient(0deg, rgba(176,171,64,.5) 0%, rgba(173,180,102,.5) 35%, rgba(245,255,205,.5) 100%);">
<ul style='list-style-type:none;margin:0;padding:0; position:relative; top: -1px;'>
<li>
<input type="button" value="Op. Imagen" title="Opciones de Imagen"
style="outline: none; font-size: 12px; border: none; background-color: inherit; padding-bottom: 2px; padding-top: 2px; cursor: pointer; font-family: Arial, Helvetica, sans-serif; color: #333;"
onClick="menu_emerg_doc('submenu_imagen');" />
</li>
<li id='submenu_imagen' style='position:absolute; z-index: 10; display:none;' draggable="true" ondragstart="submenu_doc_drag(this)" ondrop="return false;">
<div style='background-color:#F8F9F9; border:1px solid #bdbdbd; border-radius: 3px; width:220px; box-shadow: 1px 2px 3px #e0e0e0;'>
<table style="width: 100%; margin-bottom: 8px; background-color: #fff">
<tbody>
<tr>
<td style="width: 96%; font-size: 16px; color: #464646; font-family: Arial, Helvetica, sans-serif; text-align: center; user-select: none; padding: 3px 0 2px 0; cursor: move;">
Opciones de Imagen
</td>
<td>
<a onClick="document.getElementById('submenu_imagen').style.display='none';" title="Cerrar" style="color: #9e9e9e; font-size: 16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; padding: 1px 8px; position: relative; bottom: -1px; left: -2px; cursor: pointer;" onmouseover="style.color='#757575'" onmouseout="style.color='#9e9e9e'">×</a>
</td>
</tr>
</tbody>
</table>
<form name='opc_img' style=" padding:10px">
<div style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 10px; font-weight: bold;">Borde</div>
<table style="margin-left: 10px;">
<tbody>
<tr>
<td>
<input type='button' name='img_color_borde' title='Color de borde' value=' ' style='margin:0; padding:0; width:20px; height:20px;' onClick="el_aplicar_color='te_color_img_border'; te_click_ocultar_paleta('colores_img_border');">
</td>
<td>
<select name='img_borde_estilo' onChange="aplicar_estilo_img(1)" style="font-size: 12px;">
<option value='solid'>Solido</option>
<option value='dotted'>Punteado</option>
<option value='double'>Doble</option>
<option value='ridge'>Biselado</option>
</select>
</td>
<td>
<select name='img_borde_ancho' size='1' onChange="aplicar_estilo_img(1)" style="font-size: 12px;">
<option value='0px'>0px</option>
<option value='1px'>1px</option>
<option value='2px'>2px</option>
<option value='3px'>3px</option>
<option value='4px'>4px</option>
<option value='5px'>5px</option>
<option value='6px'>6px</option>
<option value='7px'>7px</option>
<option value='8px'>8px</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" id='colores_img_border' style='position:absolute; display:none;'></td>
</tr>
</tbody>
</table>
<table style="margin-top: 6px; margin-left: 5px;">
<tbody>
<tr>
<td title="Espaciado entre imagen y borde" style="padding-left: 8px; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
Padding
</td>
<td style="padding-left: 4px;">
<select name='i_padding' size='1' style='font-size: 12px;' onchange="aplicar_estilo_img(1)">
<option value='0px'>0px</option>
<option value='2px'>4px</option>
<option value='4px'>8px</option>
<option value='6px'>12px</option>
<option value='8px'>16px</option>
<option value='12px'>24px</option>
</select>
</td>
</tr>
</tbody>
</table>
<hr>
<div style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 10px; font-weight: bold;">Ajustes</div>
<table style="margin-top: 10px; margin-left: 6px;">
<tbody>
<tr>
<td style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-right: 5px;">
Posición
</td>
<td>
<select name='i_float' size='1' onChange="aplicar_estilo_img(2, this.value)" style='font-size: 12px;'>
<option value='initial'>En linea con texto</option>
<option value='left'>Flotar izquierda</option>
<option value='right'>Flotar derecha</option>
</select>
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-right: 5px;">
Alinear
</td>
<td>
<select name='i_align' size='1' onChange="aplicar_estilo_img(3, this.value)" style='font-size: 12px;'>
<option value='x'>Seleccionar</option>
<option value='justifyLeft'>Izquierda</option>
<option value='justifyCenter'>Centrar</option>
<option value='justifyRight'>Derecha</option>
</select>
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-right: 5px;">
Márgenes
</td>
<td>
<select name='i_margin' size='1' onChange="aplicar_estilo_img(4, this.value)" style='font-size: 12px;'>
<option value='x'>Seleccionar</option>
<option value='0px'>0px</option>
<option value='4px'>4px</option>
<option value='8px'>8px</option>
<option value='12px'>12px</option>
<option value='16px'>16px</option>
<option value='24px'>24px</option>
</select>
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-right: 5px;">
Redondear
</td>
<td>
<select name='i_border_radius' size='1' onChange="aplicar_estilo_img(5, this.value)" style='font-size: 12px;'>
<option value='0px'>0px</option>
<option value='5px'>5px</option>
<option value='10px'>10px</option>
<option value='15px'>15px</option>
<option value='20px'>20px</option>
<option value='25px'>25px</option>
<option value='50%'>50%</option>
</select>
</td>
</tr>
</tbody>
</table>
<hr>
<div style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 10px; font-weight: bold;">Tamaño</div>
<table style="width: 100%; text-align: center;">
<tbody>
<tr>
<td style="text-align: center;">
<input type="button" title="Reducir tamaño" value="◀" style="padding: 4px 6px; border: 1px solid #757575; border-radius: 5px 0 0 5px; margin: 0; cursor: pointer;" onclick="aplicar_estilo_img(6)">
<input type="button" title="Aumentar tamaño"value="▶" style="padding: 4px 6px; border: 1px solid #757575; border-radius: 0 5px 5px 0; margin: 0; cursor: pointer;" onclick="aplicar_estilo_img(7);">
</td>
</tr>
<tr>
<td style="text-align: center; padding-top: 4px;">
<input type="button" name="img_original_size" title="Tamaño Original" value="Original" style="font-size:12px; padding: 1px 4px" onclick="aplicar_estilo_img(8)">
</td>
</tr>
<tr>
<td style="text-align: left;">
<input type="text" name="img_curr_size" value="Tamaño actual" style="font-size:12px; padding: 1px 4px; border: none; width: 100%;" disabled>
</td>
</tr>
</tbody>
</table>
<hr>
<div style="padding-left: 10px;">
<a style="text-decoration: none; color: #9e9e9e; cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" onmouseover="this.style.color='#db5757'" onmouseout="this.style.color='#9e9e9e'" onclick="aplicar_estilo_img(9)">Eliminar imagen</a>
</div>
</form>
</div>
</li>
</ul>
</td>
</tr>
<tbody>
</table>
<div style="display: flex; flex: 1;"></div>
<!-- *** LOGO APP *** -->
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; vertical-align: middle; color: #fff; text-shadow: 1px 1px #999; -webkit-user-select: none; user-select: none; margin-right: 15px;">apps Regnare</div>
</div>
<div class="div_barra_botones"
style="background:linear-gradient(#F7F7F7, #CCCCCC); border-radius: 4px 4px 2px 2px; padding: 2px 10px 1px 10px; position: relative;">
<!-- Negrita -->
<button type="button" class="btn_edit" title="Negrita" style="width:24px; height:24px;" onClick="te_format_doc('bold');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g stroke="#464646">
<path stroke-width="2" d="M15.6,10.79c0.97,-0.67 1.65,-1.77 1.65,-2.79 0,-2.26 -1.75,-4 -4,-4L7,4v14h7.04c2.09,0 3.71,-1.7 3.71,-3.79 0,-1.52 -0.86,-2.82 -2.15,-3.42zM10,6.5h3c0.83,0 1.5,0.67 1.5,1.5s-0.67,1.5 -1.5,1.5h-3v-3zM13.5,15.5L10,15.5v-3h3.5c0.83,0 1.5,0.67 1.5,1.5s-0.67,1.5 -1.5,1.5z" />
</g>
</svg>
</button>
<!-- Itálica -->
<button type="button" class="btn_edit" title="Itálica" style="width:24px; height:24px;" onClick="te_format_doc('italic');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M10,4v3h2.21l-3.42,8H6v3h8v-3h-2.21l3.42,-8H18V4z" />
</g>
</svg>
</button>
<!-- Subrayado -->
<button type="button" class="btn_edit" title="Subrayado" style="width:24px; height:24px;" onClick="te_format_doc('underline');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M12,17c3.31,0 6,-2.69 6,-6L18,3h-2.5v8c0,1.93 -1.57,3.5 -3.5,3.5S8.5,12.93 8.5,11L8.5,3L6,3v8c0,3.31 2.69,6 6,6zM5,19v2h14v-2L5,19z" />
</g>
</svg>
</button>
<!-- Quitar formato -->
<button type="button" class="btn_edit" title="Quitar formato al texto (deja formato predeterminado)" style="width:24px; height:24px;" onClick="te_format_doc('removeformat');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M3.27,5L2,6.27l6.97,6.97L6.5,19h3l1.57,-3.66L16.73,21 18,19.73 3.55,5.27 3.27,5zM6,5v0.18L8.82,8h2.4l-0.72,1.68 2.1,2.1L14.21,8H20V5H6z" />
</g>
</svg>
</button>
<!-- Alinear izquierda -->
<button type="button" class="btn_edit" title="Alinear izquierda" style="width:24px; height:24px;" onClick="te_format_doc('justifyLeft');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M15,15L3,15v2h12v-2zM15,7L3,7v2h12L15,7zM3,13h18v-2L3,11v2zM3,21h18v-2L3,19v2zM3,3v2h18L21,3L3,3z" />
</g>
</svg>
</button>
<!-- Centrar -->
<button type="button" class="btn_edit" title="Centrar" style="width:24px; height:24px;" onClick="te_format_doc('justifyCenter');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M7,15v2h10v-2L7,15zM3,21h18v-2L3,19v2zM3,13h18v-2L3,11v2zM7,7v2h10L17,7L7,7zM3,3v2h18L21,3L3,3z" />
</g>
</svg>
</button>
<!-- Alinear derecha -->
<button type="button" class="btn_edit" title="Alinear derecha" style="width:24px; height:24px;" onClick="te_format_doc('justifyRight');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M3,21h18v-2L3,19v2zM9,17h12v-2L9,15v2zM3,13h18v-2L3,11v2zM9,9h12L21,7L9,7v2zM3,3v2h18L21,3L3,3z" />
</g>
</svg>
</button>
<!-- Justificado -->
<button type="button" class="btn_edit" title="Justificado" style="width:24px; height:24px;" onClick="te_format_doc('justifyFull');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M3,21h18v-2L3,19v2zM3,17h18v-2L3,15v2zM3,13h18v-2L3,11v2zM3,9h18L21,7L3,7v2zM3,3v2h18L21,3L3,3z" />
</g>
</svg>
</button>
<!-- Color de Fuente -->
<table style="border-spacing:0px; border-collapse:collapse;">
<tr>
<td style="margin:0px; padding:0px;">
<button type="button" id="te_color_button" data-color="#000080" class="btn_edit" title="Color de Fuente" style="width:26px; height:26px; padding-bottom: 1px; box-sizing: border-box;" onClick="el_aplicar_color = 'te_color_fuente'; click_color_paleta(this.dataset.color)">
<div align="center">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px; position: relative; right: -3px; bottom: -2px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="1" d="M0.99,19h2.42l1.27-3.58h5.65L11.59,19h2.42L8.75,5h-2.5L0.99,19z M5.41,13.39L7.44,7.6h0.12l2.03,5.79H5.41z" />
</g>
</svg>
</div>
<div id="div_color_fuente" style="margin: auto; width: 16px; height: 4px; background-color: #000080;"></div>
</button>
</td>
<td style="margin:0px; padding:0px;">
<ul
style="list-style-type:none;margin:0px; margin-left:-2px; padding:0px;">
<li>
<button type="button" class="btn_edit" style="width:14px; height:26px; cursor: pointer;" onClick="el_aplicar_color = 'te_color_fuente'; menu_emerg_doc('te_colores_de_fuente');">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="#000" style="position: relative; left: -1px;"><path d="M7 10l5 5 5-5z"/></svg>
</button>
</li>
<li id="te_colores_de_fuente"
style="position:absolute; display:none; z-index: 100;"></li>
</ul>
</td>
</tr>
</table>
<!-- Color de Resaltado -->
<table style="border-spacing:0px; border-collapse:collapse;">
<tbody>
<tr>
<td style="margin:0px; padding:0px; vertical-align: bottom;">
<button type="button" id="te_resaltar_button" data-color="rgb(255,255,0)" class="btn_edit" title="Color de Resaltado" style="width:26px; height:26px; padding-bottom: 1px; box-sizing: border-box;" onClick="el_aplicar_color='te_color_resaltado'; click_color_paleta(this.dataset.color);">
<div>
<svg viewBox="0 0 24 24" style="width:16px; height: 16px; position: relative; bottom: -1px; ">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z" />
</g>
</svg>
</div>
<div id="div_color_resaltar" style="margin: auto; width: 16px; height: 4px; background-color: rgb(255,255,0);"></div>
</button>
</td>
<td style="margin:0px; padding:0px;">
<ul
style="list-style-type:none;margin:0px; margin-left:-2px;padding:0px;">
<li>
<button type="button" class="btn_edit" style="width:14px; height:26px; cursor: pointer;" onClick="el_aplicar_color='te_color_resaltado'; menu_emerg_doc('te_colores_resaltar');">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="#000" style="position: relative; left: -1px;"><path d="M7 10l5 5 5-5z"/></svg>
</button>
</li>
<li id="te_colores_resaltar"
style="position:absolute; display:none; z-index:100;"></li>
</ul>
</td>
</tr>
</tbody>
</table>
<!-- Color de Relleno -->
<table style="border-spacing:0px; border-collapse:collapse;">
<tbody>
<tr>
<td style="margin:0px; padding:0px;">
<button type="button" id="te_rellenar_button" data-color="#f00" class="btn_edit" title="Color de Relleno" style="width:26px; height:26px; position: relative; padding-bottom: 1px; box-sizing: border-box;" onClick="el_aplicar_color='te_color_relleno'; click_color_paleta(this.dataset.color);">
<div>
<svg viewBox="0 0 24 24" style="width:16px; height: 14px; padding-top: 2px; position: relative; bottom: -1px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M18,4V3c0,-0.55 -0.45,-1 -1,-1H5c-0.55,0 -1,0.45 -1,1v4c0,0.55 0.45,1 1,1h12c0.55,0 1,-0.45 1,-1V6h1v4H9v11c0,0.55 0.45,1 1,1h2c0.55,0 1,-0.45 1,-1v-9h8V4h-3z" />
</g>
</svg>
</div>
<div id="div_color_rellenar" style="margin: auto; width: 16px; height: 4px; background-color: #f00;"></div>
</button>
</td>
<td style="margin:0px; padding:0px;">
<ul
style="list-style-type:none;margin:0px; margin-left:-2px;padding:0px;">
<li>
<button type="button" class="btn_edit" style="width:14px; height:26px; cursor: pointer;" onClick="el_aplicar_color='te_color_relleno'; menu_emerg_doc('te_colores_rellenar');">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="#000" style="position: relative; left: -1px;"><path d="M7 10l5 5 5-5z"/></svg>
</button>
</li>
<li id="te_colores_rellenar" style="position:absolute; display:none; z-index:100;"></li>
</ul>
</td>
</tr>
</tbody>
</table>
<!-- font_family -->
<select id="te_select_font_family" style="width:145px; height: 20px; font-size: 12px; outline: none; padding-left: 4px;" onChange="document.getElementById('editBox').focus(); document.execCommand('fontname',false,this[selectedIndex].value);">
<option value="'Times New Roman', Times, serif">Times New Roman</option>
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="'Comic Sans MS', cursive, sans-serif">Comic Sans MS</option>
<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">Lucida Sans Unicode</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
</select>
<!-- Tamaño de Fuente -->
<select id="te_select_font_size" title="Tamaño de Fuente" onChange="te_format_doc('fontSize',this.value);" style="width:50px; height: 20px; font-size: 12px; outline: none;">
<option value="1">10</option>
<option value="2">14</option>
<option value="3" selected="selected">16</option>
<option value="4">18</option>
<option value="5">24</option>
<option value="6">32</option>
<option value="7">48</option>
</select>
<!-- Reducir tamaño de fuente -->
<button type="button" class="btn_edit" title="Reducir tamaño de fuente" style="width:24px; height:24px;" onClick="setFontSize(-1);">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M0.99,19h2.42l1.27-3.58h5.65L11.59,19h2.42L8.75,5h-2.5L0.99,19z M5.41,13.39L7.44,7.6h0.12l2.03,5.79H5.41z M23,11v2h-8 v-2H23z" />
</g>
</svg>
</button>
<!-- Aumentar tamaño de fuente -->
<button type="button" class="btn_edit" title="Aumentar tamaño de fuente"
style="width:24px; height:24px;" onmousedown="this.classList.add('active');" onmouseup="this.classList.remove('active')" onmouseout="this.classList.remove('active')"
onClick="setFontSize(1);">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M0.99,19h2.42l1.27-3.58h5.65L11.59,19h2.42L8.75,5h-2.5L0.99,19z M5.41,13.39L7.44,7.6h0.12l2.03,5.79H5.41z M20,11h3v2h-3 v3h-2v-3h-3v-2h3V8h2V11z" />
</g>
</svg>
</button>
<!-- Tachado -->
<button type="button" class="btn_edit" title="Tachado" style="width:24px; height:24px;" onClick="te_format_doc('strikethrough');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M7.24,8.75c-0.26,-0.48 -0.39,-1.03 -0.39,-1.67 0,-0.61 0.13,-1.16 0.4,-1.67 0.26,-0.5 0.63,-0.93 1.11,-1.29 0.48,-0.35 1.05,-0.63 1.7,-0.83 0.66,-0.19 1.39,-0.29 2.18,-0.29 0.81,0 1.54,0.11 2.21,0.34 0.66,0.22 1.23,0.54 1.69,0.94 0.47,0.4 0.83,0.88 1.08,1.43 0.25,0.55 0.38,1.15 0.38,1.81h-3.01c0,-0.31 -0.05,-0.59 -0.15,-0.85 -0.09,-0.27 -0.24,-0.49 -0.44,-0.68 -0.2,-0.19 -0.45,-0.33 -0.75,-0.44 -0.3,-0.1 -0.66,-0.16 -1.06,-0.16 -0.39,0 -0.74,0.04 -1.03,0.13 -0.29,0.09 -0.53,0.21 -0.72,0.36 -0.19,0.16 -0.34,0.34 -0.44,0.55 -0.1,0.21 -0.15,0.43 -0.15,0.66 0,0.48 0.25,0.88 0.74,1.21 0.38,0.25 0.77,0.48 1.41,0.7H7.39c-0.05,-0.08 -0.11,-0.17 -0.15,-0.25zM21,12v-2H3v2h9.62c0.18,0.07 0.4,0.14 0.55,0.2 0.37,0.17 0.66,0.34 0.87,0.51 0.21,0.17 0.35,0.36 0.43,0.57 0.07,0.2 0.11,0.43 0.11,0.69 0,0.23 -0.05,0.45 -0.14,0.66 -0.09,0.2 -0.23,0.38 -0.42,0.53 -0.19,0.15 -0.42,0.26 -0.71,0.35 -0.29,0.08 -0.63,0.13 -1.01,0.13 -0.43,0 -0.83,-0.04 -1.18,-0.13s-0.66,-0.23 -0.91,-0.42c-0.25,-0.19 -0.45,-0.44 -0.59,-0.75 -0.14,-0.31 -0.25,-0.76 -0.25,-1.21H6.4c0,0.55 0.08,1.13 0.24,1.58 0.16,0.45 0.37,0.85 0.65,1.21 0.28,0.35 0.6,0.66 0.98,0.92 0.37,0.26 0.78,0.48 1.22,0.65 0.44,0.17 0.9,0.3 1.38,0.39 0.48,0.08 0.96,0.13 1.44,0.13 0.8,0 1.53,-0.09 2.18,-0.28s1.21,-0.45 1.67,-0.79c0.46,-0.34 0.82,-0.77 1.07,-1.27s0.38,-1.07 0.38,-1.71c0,-0.6 -0.1,-1.14 -0.31,-1.61 -0.05,-0.11 -0.11,-0.23 -0.17,-0.33H21z" />
</g>
</svg>
</button>
<!-- Subíndice -->
<button type="button" class="btn_edit" title="Subíndice" style="width:24px; height:24px;" onClick="te_format_doc('subscript');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z" />
</g>
</svg>
</button>
<!-- Superíndice -->
<button type="button" class="btn_edit" title="Superíndice" style="width:24px; height:24px;" onClick="te_format_doc('superscript');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z" />
</g>
</svg>
</button>
<!-- Aumentar sangría -->
<button type="button" class="btn_edit" title="Aumentar sangría" style="width:24px; height:24px;" onClick="te_format_doc('indent');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M3,21h18v-2L3,19v2zM3,8v8l4,-4 -4,-4zM11,17h10v-2L11,15v2zM3,3v2h18L21,3L3,3zM11,9h10L21,7L11,7v2zM11,13h10v-2L11,11v2z" />
</g>
</svg>
</button>
<!-- Disminuir sangria -->
<button type="button" class="btn_edit" title="Disminuir sangria" style="width:24px; height:24px;" onClick="te_format_doc('outdent');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M11,17h10v-2L11,15v2zM3,12l4,4L7,8l-4,4zM3,21h18v-2L3,19v2zM3,3v2h18L21,3L3,3zM11,9h10L21,7L11,7v2zM11,13h10v-2L11,11v2z" />
</g>
</svg>
</button>
<!-- Insertar Lista no Numerada -->
<button type="button" class="btn_edit" title="Insertar Lista no Numerada" style="width:24px; height:24px;" onClick="if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {switch_alerta('Este navegador no soporta este comando'); return false}; te_format_doc('insertunorderedlist'); ">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M4,10.5c-0.83,0 -1.5,0.67 -1.5,1.5s0.67,1.5 1.5,1.5 1.5,-0.67 1.5,-1.5 -0.67,-1.5 -1.5,-1.5zM4,4.5c-0.83,0 -1.5,0.67 -1.5,1.5S3.17,7.5 4,7.5 5.5,6.83 5.5,6 4.83,4.5 4,4.5zM4,16.5c-0.83,0 -1.5,0.68 -1.5,1.5s0.68,1.5 1.5,1.5 1.5,-0.68 1.5,-1.5 -0.67,-1.5 -1.5,-1.5zM7,19h14v-2L7,17v2zM7,13h14v-2L7,11v2zM7,5v2h14L21,5L7,5z"/>
</g>
</svg>
</button>
<!-- Insertar Lista Numerada -->
<button type="button" class="btn_edit" title="Insertar Lista Numerada" style="width:24px; height:24px;" onClick="if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {switch_alerta('Este navegador no soporta este comando'); return false}; te_format_doc('insertorderedlist');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M2,17h2v0.5L3,17.5v1h1v0.5L2,19v1h3v-4L2,16v1zM3,8h1L4,4L2,4v1h1v3zM2,11h1.8L2,13.1v0.9h3v-1L3.2,13L5,10.9L5,10L2,10v1zM7,5v2h14L21,5L7,5zM7,19h14v-2L7,17v2zM7,13h14v-2L7,11v2z"/>
</g>
</svg>
</button>
<!-- Insertar Salto de Página -->
<button type="button" class="btn_edit" title="Insertar Salto de Página" style="width:24px; height:24px;" onClick="insertar_salto_pagina();"><img src="images/pilcrow.png" alt=""></button>
<button type="button" class="btn_edit" title="Insertar Línea Horizontal" style="width:24px; height:24px;" onClick="te_format_doc('inserthorizontalrule');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<rect fill-rule="evenodd" height="2" width="16" x="4" y="11"/>
</g>
</svg>
</button>
<span style="color: #bdbdbd; margin-left: 1px;">|</span>
<!-- Crear Hipervínculo -->
<ul style='list-style-type:none;margin:0;padding:0;'>
<li>
<button type="button" class="btn_edit" title="Crear Hipervínculo en texto seleccionado" style="width:24px; height:24px;" onClick="if (!window.getSelection().rangeCount || window.getSelection().isCollapsed) {switch_alerta('Seleccionar texto'); return false;}; menu_emerg_doc('te_submenu_link');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M3.9,12c0,-1.71 1.39,-3.1 3.1,-3.1h4L11,7L7,7c-2.76,0 -5,2.24 -5,5s2.24,5 5,5h4v-1.9L7,15.1c-1.71,0 -3.1,-1.39 -3.1,-3.1zM8,13h8v-2L8,11v2zM17,7h-4v1.9h4c1.71,0 3.1,1.39 3.1,3.1s-1.39,3.1 -3.1,3.1h-4L13,17h4c2.76,0 5,-2.24 5,-5s-2.24,-5 -5,-5z"/>
</g>
</svg>
</button>
</li>
<li id="te_submenu_link" style="position:absolute; display:none; z-index:100;">
<iframe id="i_link" frameborder="0" scrolling="no" style="border:none; width:350px; height:150px;"></iframe>
</li>
</ul>
<!-- Deshacer Hipervínculo -->
<button type="button" class="btn_edit" title="Deshacer Hipervínculo" style="width:24px; height:24px;" onClick="te_format_doc('unlink');">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M17 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.43-.98 2.63-2.31 2.98l1.46 1.46C20.88 15.61 22 13.95 22 12c0-2.76-2.24-5-5-5zm-1 4h-2.19l2 2H16zM2 4.27l3.11 3.11C3.29 8.12 2 9.91 2 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07L8.73 11H8v2h2.73L13 15.27V17h1.73l4.01 4L20 19.74 3.27 3 2 4.27z"/>
</g>
</svg>
</button>
<!-- Insertar Tabla -->
<ul style='list-style-type:none;margin:0;padding:0;'>
<li>
<button type="button" title="Insertar Tabla" class="btn_edit" style="width: 24px; height: 24px;" onmousedown="if (!window.getSelection().rangeCount || !doc_clicked) { switch_alerta('Seleccionar lugar de inserción') } else { show_selected_range(); menu_emerg_doc('te_submenu_tabla') }">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M19,7H9C7.9,7,7,7.9,7,9v10c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2V9C21,7.9,20.1,7,19,7z M19,9v2H9V9H19z M13,15v-2h2v2H13z M15,17v2h-2v-2H15z M11,15H9v-2h2V15z M17,13h2v2h-2V13z M9,17h2v2H9V17z M17,19v-2h2v2H17z M6,17H5c-1.1,0-2-0.9-2-2V5 c0-1.1,0.9-2,2-2h10c1.1,0,2,0.9,2,2v1h-2V5H5v10h1V17z"/>
</g>
</svg>
</button>
</li>
<li id="te_submenu_tabla" style="position:absolute; display:none; z-index:100; padding-top: 4px;">
<img src="images/pointer.png" style="position:absolute; left:5px; top:0px;" />
<table id="tabla_crear_tabla">
<tbody>
<tr>
<td onmouseover="color_cell(0, 0)" onmouseout="uncolor_cell(0, 0)" onmouseup="createTable(0, 0)"><div style='visibility:hidden'>1.1</div></td><td onmouseover="color_cell(0, 1)" onmouseout="uncolor_cell(0, 1)" onmouseup="createTable(0, 1)"><div style='visibility:hidden'>1.2</div></td><td onmouseover="color_cell(0, 2)" onmouseout="uncolor_cell(0, 2)" onmouseup="createTable(0, 2)"><div style='visibility:hidden'>1.3</div></td><td onmouseover="color_cell(0, 3)" onmouseout="uncolor_cell(0, 3)" onmouseup="createTable(0, 3)"><div style='visibility:hidden'>1.4</div></td><td onmouseover="color_cell(0, 4)" onmouseout="uncolor_cell(0, 4)" onmouseup="createTable(0, 4)"><div style='visibility:hidden'>1.5</div></td><td onmouseover="color_cell(0, 5)" onmouseout="uncolor_cell(0, 5)" onmouseup="createTable(0, 5)"><div style='visibility:hidden'>1.6</div></td><td onmouseover="color_cell(0, 6)" onmouseout="uncolor_cell(0, 6)" onmouseup="createTable(0, 6)"><div style='visibility:hidden'>1.7</div></td><td onmouseover="color_cell(0, 7)" onmouseout="uncolor_cell(0, 7)" onmouseup="createTable(0, 7)"><div style='visibility:hidden'>1.8</div></td><td onmouseover="color_cell(0, 8)" onmouseout="uncolor_cell(0, 8)" onmouseup="createTable(0, 8)"><div style='visibility:hidden'>1.9</div></td><td onmouseover="color_cell(0, 9)" onmouseout="uncolor_cell(0, 9)" onmouseup="createTable(0, 9)"><div style='visibility:hidden'>1.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(1, 0)" onmouseout="uncolor_cell(1, 0)" onmouseup="createTable(1, 0)"><div style='visibility:hidden'>2.1</div></td><td onmouseover="color_cell(1, 1)" onmouseout="uncolor_cell(1, 1)" onmouseup="createTable(1, 1)"><div style='visibility:hidden'>2.2</div></td><td onmouseover="color_cell(1, 2)" onmouseout="uncolor_cell(1, 2)" onmouseup="createTable(1, 2)"><div style='visibility:hidden'>2.3</div></td><td onmouseover="color_cell(1, 3)" onmouseout="uncolor_cell(1, 3)" onmouseup="createTable(1, 3)"><div style='visibility:hidden'>2.4</div></td><td onmouseover="color_cell(1, 4)" onmouseout="uncolor_cell(1, 4)" onmouseup="createTable(1, 4)"><div style='visibility:hidden'>2.5</div></td><td onmouseover="color_cell(1, 5)" onmouseout="uncolor_cell(1, 5)" onmouseup="createTable(1, 5)"><div style='visibility:hidden'>2.6</div></td><td onmouseover="color_cell(1, 6)" onmouseout="uncolor_cell(1, 6)" onmouseup="createTable(1, 6)"><div style='visibility:hidden'>2.7</div></td><td onmouseover="color_cell(1, 7)" onmouseout="uncolor_cell(1, 7)" onmouseup="createTable(1, 7)"><div style='visibility:hidden'>2.8</div></td><td onmouseover="color_cell(1, 8)" onmouseout="uncolor_cell(1, 8)" onmouseup="createTable(1, 8)"><div style='visibility:hidden'>2.9</div></td><td onmouseover="color_cell(1, 9)" onmouseout="uncolor_cell(1, 9)" onmouseup="createTable(1, 9)"><div style='visibility:hidden'>2.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(2, 0)" onmouseout="uncolor_cell(2, 0)" onmouseup="createTable(2, 0)"><div style='visibility:hidden'>3.1</div></td><td onmouseover="color_cell(2, 1)" onmouseout="uncolor_cell(2, 1)" onmouseup="createTable(2, 1)"><div style='visibility:hidden'>3.2</div></td><td onmouseover="color_cell(2, 2)" onmouseout="uncolor_cell(2, 2)" onmouseup="createTable(2, 2)"><div style='visibility:hidden'>3.3</div></td><td onmouseover="color_cell(2, 3)" onmouseout="uncolor_cell(2, 3)" onmouseup="createTable(2, 3)"><div style='visibility:hidden'>3.4</div></td><td onmouseover="color_cell(2, 4)" onmouseout="uncolor_cell(2, 4)" onmouseup="createTable(2, 4)"><div style='visibility:hidden'>3.5</div></td><td onmouseover="color_cell(2, 5)" onmouseout="uncolor_cell(2, 5)" onmouseup="createTable(2, 5)"><div style='visibility:hidden'>3.6</div></td><td onmouseover="color_cell(2, 6)" onmouseout="uncolor_cell(2, 6)" onmouseup="createTable(2, 6)"><div style='visibility:hidden'>3.7</div></td><td onmouseover="color_cell(2, 7)" onmouseout="uncolor_cell(2, 7)" onmouseup="createTable(2, 7)"><div style='visibility:hidden'>3.8</div></td><td onmouseover="color_cell(2, 8)" onmouseout="uncolor_cell(2, 8)" onmouseup="createTable(2, 8)"><div style='visibility:hidden'>3.9</div></td><td onmouseover="color_cell(2, 9)" onmouseout="uncolor_cell(2, 9)" onmouseup="createTable(2, 9)"><div style='visibility:hidden'>3.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(3, 0)" onmouseout="uncolor_cell(3, 0)" onmouseup="createTable(3, 0)"><div style='visibility:hidden'>4.1</div></td><td onmouseover="color_cell(3, 1)" onmouseout="uncolor_cell(3, 1)" onmouseup="createTable(3, 1)"><div style='visibility:hidden'>4.2</div></td><td onmouseover="color_cell(3, 2)" onmouseout="uncolor_cell(3, 2)" onmouseup="createTable(3, 2)"><div style='visibility:hidden'>4.3</div></td><td onmouseover="color_cell(3, 3)" onmouseout="uncolor_cell(3, 3)" onmouseup="createTable(3, 3)"><div style='visibility:hidden'>4.4</div></td><td onmouseover="color_cell(3, 4)" onmouseout="uncolor_cell(3, 4)" onmouseup="createTable(3, 4)"><div style='visibility:hidden'>4.5</div></td><td onmouseover="color_cell(3, 5)" onmouseout="uncolor_cell(3, 5)" onmouseup="createTable(3, 5)"><div style='visibility:hidden'>4.6</div></td><td onmouseover="color_cell(3, 6)" onmouseout="uncolor_cell(3, 6)" onmouseup="createTable(3, 6)"><div style='visibility:hidden'>4.7</div></td><td onmouseover="color_cell(3, 7)" onmouseout="uncolor_cell(3, 7)" onmouseup="createTable(3, 7)"><div style='visibility:hidden'>4.8</div></td><td onmouseover="color_cell(3, 8)" onmouseout="uncolor_cell(3, 8)" onmouseup="createTable(3, 8)"><div style='visibility:hidden'>4.9</div></td><td onmouseover="color_cell(3, 9)" onmouseout="uncolor_cell(3, 9)" onmouseup="createTable(3, 9)"><div style='visibility:hidden'>4.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(4, 0)" onmouseout="uncolor_cell(4, 0)" onmouseup="createTable(4, 0)"><div style='visibility:hidden'>5.1</div></td><td onmouseover="color_cell(4, 1)" onmouseout="uncolor_cell(4, 1)" onmouseup="createTable(4, 1)"><div style='visibility:hidden'>5.2</div></td><td onmouseover="color_cell(4, 2)" onmouseout="uncolor_cell(4, 2)" onmouseup="createTable(4, 2)"><div style='visibility:hidden'>5.3</div></td><td onmouseover="color_cell(4, 3)" onmouseout="uncolor_cell(4, 3)" onmouseup="createTable(4, 3)"><div style='visibility:hidden'>5.4</div></td><td onmouseover="color_cell(4, 4)" onmouseout="uncolor_cell(4, 4)" onmouseup="createTable(4, 4)"><div style='visibility:hidden'>5.5</div></td><td onmouseover="color_cell(4, 5)" onmouseout="uncolor_cell(4, 5)" onmouseup="createTable(4, 5)"><div style='visibility:hidden'>5.6</div></td><td onmouseover="color_cell(4, 6)" onmouseout="uncolor_cell(4, 6)" onmouseup="createTable(4, 6)"><div style='visibility:hidden'>5.7</div></td><td onmouseover="color_cell(4, 7)" onmouseout="uncolor_cell(4, 7)" onmouseup="createTable(4, 7)"><div style='visibility:hidden'>5.8</div></td><td onmouseover="color_cell(4, 8)" onmouseout="uncolor_cell(4, 8)" onmouseup="createTable(4, 8)"><div style='visibility:hidden'>5.9</div></td><td onmouseover="color_cell(4, 9)" onmouseout="uncolor_cell(4, 9)" onmouseup="createTable(4, 9)"><div style='visibility:hidden'>5.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(5, 0)" onmouseout="uncolor_cell(5, 0)" onmouseup="createTable(5, 0)"><div style='visibility:hidden'>6.1</div></td><td onmouseover="color_cell(5, 1)" onmouseout="uncolor_cell(5, 1)" onmouseup="createTable(5, 1)"><div style='visibility:hidden'>6.2</div></td><td onmouseover="color_cell(5, 2)" onmouseout="uncolor_cell(5, 2)" onmouseup="createTable(5, 2)"><div style='visibility:hidden'>6.3</div></td><td onmouseover="color_cell(5, 3)" onmouseout="uncolor_cell(5, 3)" onmouseup="createTable(5, 3)"><div style='visibility:hidden'>6.4</div></td><td onmouseover="color_cell(5, 4)" onmouseout="uncolor_cell(5, 4)" onmouseup="createTable(5, 4)"><div style='visibility:hidden'>6.5</div></td><td onmouseover="color_cell(5, 5)" onmouseout="uncolor_cell(5, 5)" onmouseup="createTable(5, 5)"><div style='visibility:hidden'>6.6</div></td><td onmouseover="color_cell(5, 6)" onmouseout="uncolor_cell(5, 6)" onmouseup="createTable(5, 6)"><div style='visibility:hidden'>6.7</div></td><td onmouseover="color_cell(5, 7)" onmouseout="uncolor_cell(5, 7)" onmouseup="createTable(5, 7)"><div style='visibility:hidden'>6.8</div></td><td onmouseover="color_cell(5, 8)" onmouseout="uncolor_cell(5, 8)" onmouseup="createTable(5, 8)"><div style='visibility:hidden'>6.9</div></td><td onmouseover="color_cell(5, 9)" onmouseout="uncolor_cell(5, 9)" onmouseup="createTable(5, 9)"><div style='visibility:hidden'>6.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(6, 0)" onmouseout="uncolor_cell(6, 0)" onmouseup="createTable(6, 0)"><div style='visibility:hidden'>7.1</div></td><td onmouseover="color_cell(6, 1)" onmouseout="uncolor_cell(6, 1)" onmouseup="createTable(6, 1)"><div style='visibility:hidden'>7.2</div></td><td onmouseover="color_cell(6, 2)" onmouseout="uncolor_cell(6, 2)" onmouseup="createTable(6, 2)"><div style='visibility:hidden'>7.3</div></td><td onmouseover="color_cell(6, 3)" onmouseout="uncolor_cell(6, 3)" onmouseup="createTable(6, 3)"><div style='visibility:hidden'>7.4</div></td><td onmouseover="color_cell(6, 4)" onmouseout="uncolor_cell(6, 4)" onmouseup="createTable(6, 4)"><div style='visibility:hidden'>7.5</div></td><td onmouseover="color_cell(6, 5)" onmouseout="uncolor_cell(6, 5)" onmouseup="createTable(6, 5)"><div style='visibility:hidden'>7.6</div></td><td onmouseover="color_cell(6, 6)" onmouseout="uncolor_cell(6, 6)" onmouseup="createTable(6, 6)"><div style='visibility:hidden'>7.7</div></td><td onmouseover="color_cell(6, 7)" onmouseout="uncolor_cell(6, 7)" onmouseup="createTable(6, 7)"><div style='visibility:hidden'>7.8</div></td><td onmouseover="color_cell(6, 8)" onmouseout="uncolor_cell(6, 8)" onmouseup="createTable(6, 8)"><div style='visibility:hidden'>7.9</div></td><td onmouseover="color_cell(6, 9)" onmouseout="uncolor_cell(6, 9)" onmouseup="createTable(6, 9)"><div style='visibility:hidden'>7.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(7, 0)" onmouseout="uncolor_cell(7, 0)" onmouseup="createTable(7, 0)"><div style='visibility:hidden'>8.1</div></td><td onmouseover="color_cell(7, 1)" onmouseout="uncolor_cell(7, 1)" onmouseup="createTable(7, 1)"><div style='visibility:hidden'>8.2</div></td><td onmouseover="color_cell(7, 2)" onmouseout="uncolor_cell(7, 2)" onmouseup="createTable(7, 2)"><div style='visibility:hidden'>8.3</div></td><td onmouseover="color_cell(7, 3)" onmouseout="uncolor_cell(7, 3)" onmouseup="createTable(7, 3)"><div style='visibility:hidden'>8.4</div></td><td onmouseover="color_cell(7, 4)" onmouseout="uncolor_cell(7, 4)" onmouseup="createTable(7, 4)"><div style='visibility:hidden'>8.5</div></td><td onmouseover="color_cell(7, 5)" onmouseout="uncolor_cell(7, 5)" onmouseup="createTable(7, 5)"><div style='visibility:hidden'>8.6</div></td><td onmouseover="color_cell(7, 6)" onmouseout="uncolor_cell(7, 6)" onmouseup="createTable(7, 6)"><div style='visibility:hidden'>8.7</div></td><td onmouseover="color_cell(7, 7)" onmouseout="uncolor_cell(7, 7)" onmouseup="createTable(7, 7)"><div style='visibility:hidden'>8.8</div></td><td onmouseover="color_cell(7, 8)" onmouseout="uncolor_cell(7, 8)" onmouseup="createTable(7, 8)"><div style='visibility:hidden'>8.9</div></td><td onmouseover="color_cell(7, 9)" onmouseout="uncolor_cell(7, 9)" onmouseup="createTable(7, 9)"><div style='visibility:hidden'>8.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(8, 0)" onmouseout="uncolor_cell(8, 0)" onmouseup="createTable(8, 0)"><div style='visibility:hidden'>9.1</div></td><td onmouseover="color_cell(8, 1)" onmouseout="uncolor_cell(8, 1)" onmouseup="createTable(8, 1)"><div style='visibility:hidden'>9.2</div></td><td onmouseover="color_cell(8, 2)" onmouseout="uncolor_cell(8, 2)" onmouseup="createTable(8, 2)"><div style='visibility:hidden'>9.3</div></td><td onmouseover="color_cell(8, 3)" onmouseout="uncolor_cell(8, 3)" onmouseup="createTable(8, 3)"><div style='visibility:hidden'>9.4</div></td><td onmouseover="color_cell(8, 4)" onmouseout="uncolor_cell(8, 4)" onmouseup="createTable(8, 4)"><div style='visibility:hidden'>9.5</div></td><td onmouseover="color_cell(8, 5)" onmouseout="uncolor_cell(8, 5)" onmouseup="createTable(8, 5)"><div style='visibility:hidden'>9.6</div></td><td onmouseover="color_cell(8, 6)" onmouseout="uncolor_cell(8, 6)" onmouseup="createTable(8, 6)"><div style='visibility:hidden'>9.7</div></td><td onmouseover="color_cell(8, 7)" onmouseout="uncolor_cell(8, 7)" onmouseup="createTable(8, 7)"><div style='visibility:hidden'>9.8</div></td><td onmouseover="color_cell(8, 8)" onmouseout="uncolor_cell(8, 8)" onmouseup="createTable(8, 8)"><div style='visibility:hidden'>9.9</div></td><td onmouseover="color_cell(8, 9)" onmouseout="uncolor_cell(8, 9)" onmouseup="createTable(8, 9)"><div style='visibility:hidden'>9.10</div></td>
</tr>
<tr>
<td onmouseover="color_cell(9, 0)" onmouseout="uncolor_cell(9, 0)" onmouseup="createTable(9, 0)"><div style='visibility:hidden'>10.1</div></td><td onmouseover="color_cell(9, 1)" onmouseout="uncolor_cell(9, 1)" onmouseup="createTable(9, 1)"><div style='visibility:hidden'>10.2</div></td><td onmouseover="color_cell(9, 2)" onmouseout="uncolor_cell(9, 2)" onmouseup="createTable(9, 2)"><div style='visibility:hidden'>10.3</div></td><td onmouseover="color_cell(9, 3)" onmouseout="uncolor_cell(9, 3)" onmouseup="createTable(9, 3)"><div style='visibility:hidden'>10.4</div></td><td onmouseover="color_cell(9, 4)" onmouseout="uncolor_cell(9, 4)" onmouseup="createTable(9, 4)"><div style='visibility:hidden'>10.5</div></td><td onmouseover="color_cell(9, 5)" onmouseout="uncolor_cell(9, 5)" onmouseup="createTable(9, 5)"><div style='visibility:hidden'>10.6</div></td><td onmouseover="color_cell(9, 6)" onmouseout="uncolor_cell(9, 6)" onmouseup="createTable(9, 6)"><div style='visibility:hidden'>10.7</div></td><td onmouseover="color_cell(9, 7)" onmouseout="uncolor_cell(9, 7)" onmouseup="createTable(9, 7)"><div style='visibility:hidden'>10.8</div></td><td onmouseover="color_cell(9, 8)" onmouseout="uncolor_cell(9, 8)" onmouseup="createTable(9, 8)"><div style='visibility:hidden'>10.9</div></td><td onmouseover="color_cell(9, 9)" onmouseout="uncolor_cell(9, 9)" onmouseup="createTable(9, 9)"><div style='visibility:hidden'>10.10</div></td>
</tr>
</tbody>
</table>
</li>
</ul>
<!-- Insertar Símbolo -->
<button type="button" class="btn_edit" title="Insertar Símbolo" style="width: 24px; height: 24px;" onClick="if (!window.getSelection().rangeCount || !doc_clicked) { switch_alerta('Seleccionar lugar de inserción') } else { show_selected_range(); fill_modal('insertar_simbolos') } ">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="#464646" style="width:16px; height: 16px; position: relative; bottom: -1px;">
<path stroke-width="0" d="M16,9V4l1,0c0.55,0 1,-0.45 1,-1v0c0,-0.55 -0.45,-1 -1,-1H7C6.45,2 6,2.45 6,3v0c0,0.55 0.45,1 1,1l1,0v5c0,1.66 -1.34,3 -3,3h0v2h5.97v7l1,1l1,-1v-7H19v-2h0C17.34,12 16,10.66 16,9z"/>
</svg>
</button>
<span style="color: #bdbdbd; margin-left: 1px;">|</span>
<!-- Insertar Imagen -->
<button type="button" class="btn_edit" title="Insertar Imagen" style="background-color: inherit; border: none; width: 24px; height: 24px; cursor:pointer; outline: none;" onclick="if (!window.getSelection().rangeCount || !doc_clicked) { switch_alerta('Seleccionar lugar de inserción') } else { show_selected_range(); switch_active_modal('modal2'); }">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px; position: relative; bottom: -1px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M19,3L5,3c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2L21,5c0,-1.1 -0.9,-2 -2,-2zM19,19L5,19L5,5h14v14zM13.96,12.29l-2.75,3.54 -1.96,-2.36L6.5,17h11l-3.54,-4.71z"/>
</g>
</svg>
</button>
<!-- Insertar Audio -->
<ul style='list-style-type:none;margin:0;padding:0;'>
<li>
<button type="button" class="btn_edit" title="Insertar Audio" style="background-color: inherit; border: none; width: 24px; height: 24px; cursor:pointer; outline: none;" onClick="if (!window.getSelection().rangeCount || !doc_clicked) { switch_alerta('Seleccionar lugar de inserción') } else { show_selected_range(); menu_emerg_doc('te_submenu_audio') }">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px;">
<g fill="#464646" stroke="#464646">
<path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>
</g>
</svg>
</button>
</li>
<li id="te_submenu_audio" style="position:absolute; display:none; z-index:100;">
<iframe id="i_audio" frameborder="0" scrolling="no" style="border:none; width:350px; height:170px;"></iframe>
</li>
</ul>
<!-- Insertar Video YouTube -->
<ul style='list-style-type:none;margin:0;padding:0;'>
<li>
<button type="button" class="btn_edit" title="Insertar Video YouTube" style="background-color: inherit; border: none; width: 24px; height: 24px; cursor:pointer; outline: none;" onClick="if (!window.getSelection().rangeCount || !doc_clicked) { switch_alerta('Seleccionar lugar de inserción') } else { show_selected_range(); menu_emerg_doc('te_submenu_video') }">
<svg viewBox="0 0 24 24" style="width:16px; height: 16px; position: relative; bottom: -1px;">
<g fill="#464646" stroke="#464646">
<path stroke-width="0" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
</g>
</svg>
</button>
</li>
<li id="te_submenu_video" style="position:absolute; display:none; z-index:100;">
<iframe id="i_video" frameborder="0" scrolling="no" style="border:none; width:350px; height:202px;"></iframe>
</li>
</ul>
<ul id="ul_estilos_t" style='display: none; list-style-type:none; margin:0; padding:0; position: absolute; bottom: 5px; right: 5px; font-size: 12px; color: #464646; cursor: pointer;'>
<li class="estilos_rapidos_t" onClick="menu_emerg_doc('te_submenu_estilos_t')">
Estilos rápidos <img src="images/drop_down2.png" style="height: 14px; position: relative; bottom: -2px;">
</li>
<li id="te_submenu_estilos_t" style="position:absolute; display:none; z-index:100; right: 0; margin-top: 6px; background-color: #fff;">
<form name="form_context" style="border: 1px solid #ddd;">
<div class="context-tabla-row">
<table>
<tbody>
<tr>
<td class="context-tabla-content">
<select size='5' onchange="aplicar_estilo_tabla(3, this.value)">
<option value='100%'>100%</option>
<option value='75%'>75%</option>
<option value='50%'>50%</option>
<option value='25%'>25%</option>
<option value='0'>Autoajustar</option>
</select>
</td>
<td class="context-tabla-text">Tamaño</td>
</tr>
</tbody>
</table>
</div>
<div class="context-tabla-row">
<table>
<tbody>
<tr>
<td class="context-tabla-content">
<select size='4' onchange="aplicar_estilo_tabla(4, this.value)">
<option value=''>Estático</option>
<option value='centrar'>Centrar</option>
<option value='left'>Flotar Izq.</option>
<option value='right'>Flotar Der.</option>
</select>
</td>
<td class="context-tabla-text">Posición</td>
</tr>
</tbody>
</table>
</div>
<div class="context-tabla-row">
<table>
<tbody>
<tr>
<td class="context-tabla-content">
<select size='10' onchange="aplicar_estilo_tabla(2, this.value)">
<option value='img_none'>Ninguno</option>
<option value='img_all'>Todos</option>
<option value='img_outside'>Exterior</option>
<option value='img_inside'>Interior</option>
<option value='img_horizontal'>Horizontal</option>
<option value='img_vertical'>Vertical</option>
<option value='img_top'>Superior</option>
<option value='img_bottom'>Inferior</option>
<option value='img_left'>Izquierdo</option>
<option value='img_right'>Derecho</option>
</select>
</td>
<td class="context-tabla-text">Bordes</td>
</tr>
</tbody>
</table>
</div>
<div class="context-tabla-row">
<table>
<tbody>
<tr>
<td class="context-tabla-content">
<select size='8' onchange="aplicar_estilo_tabla(5, this.value)">
<option value='0px'>0px</option>
<option value='2px'>2px</option>
<option value='4px'>4px</option>
<option value='6px'>6px</option>
<option value='8px'>8px</option>
<option value='12px'>12px</option>
<option value='16px'>16px</option>
<option value='24px'>24px</option>
</select>
</td>
<td class="context-tabla-text">Padding</td>
</tr>
</tbody>
</table>
</div>
<div class="context-tabla-row">
<table>
<tbody>
<tr>
<td class="context-tabla-content">
<select size='9' onchange="aplicar_estilo_tabla(16, this.value)">
<option value='0'>Quitar estilos</option>
<option value='1'>Lineal borde</option>
<option value='2'>Lineal relleno</option>
<option value='3'>Encabezado 1</option>
<option value='4'>Encabezado 2</option>
<option value='5'>Encabezado 3</option>
<option value='6'>Navegación 1</option>
<option value='7'>Navegación 2</option>
<option value='8'>Navegación 3</option>
</select>
</td>
<td class="context-tabla-text">Estilos</td>
</tr>
</tbody>
</table>
</div>
<div class="context-tabla-row">
<div class="context-tabla-delete" onClick="aplicar_formato_tabla(6); document.getElementById('context_tabla').style.display='none';">Eliminar Tabla</div>
</div>
</form>
</li>
</ul>
</div>
</div>
<table style="margin:auto; clear: both; border-collapse: collapse;">
<tbody>
<tr>
<td>
<section id="container_editBox">
<section id="editBox" style="width: 765px; height: 325px; overflow-y: auto; box-sizing: border-box; word-wrap:break-word; overflow-wrap:break-word; white-space:normal; outline: none; background-color:#fff; font-family:'Times New Roman', Times, serif; font-size:16px; color: inherit; line-height: normal; padding-top: 2mm; padding-bottom: 2mm; padding-left: 2mm; padding-right: 2mm;" contenteditable="true" onmousedown="editBox_mDown(event)" onmouseup="editBox_mUp()" ondblclick="editBox_dbclick(event)" onkeydown="editBox_keydown(event)" onkeyup="editBox_keyup()" oninput="mostrar_bullet_cambios('doc')"></section>
</section>
</td>
</tr>
</tbody>
</table>
</div>
<table style="width: 100%; border-top: 1px solid #eee; background-color: #fafafa; -webkit-user-select: none; user-select: none;">
<tbody>
<tr>
<td style="text-align: left; padding-left: 25px;">
<span style="font-size: 12px; font-style: italic;">NOMBRE</span>
<input id="input_nombre_doc" type="text" value="doc_section_1" maxlength="30" style="padding: 5px 7px; margin-left: 4px;">
<a id="bullet_cambios_doc" title="Hay cambios sin guardar" style="visibility: hidden; text-decoration: none; cursor: default; color: #9e9e9e; font-weight: bold; font-size: 18px; padding: 0 5px; position: relative; bottom: -1px;">•</a>
</td>
<td id="eval_doc" style="width: 150px; color: green; text-align: right;padding-right: 20px;"></td>
<td id="td_cancelar_new_doc" style="width: 1%; height: 50px; text-align: right; padding-right: 10px;">
<input type="button" value="Cancelar" class="btn-secundario" onclick="switch_to_editor()" />
</td>
<td style="width: 1%; height: 50px; text-align: right; padding-right: 25px;">
<input id="input_guardar_doc" type="button" class="btn-primario" data-index="-1" value="Guardar" onclick="guardar_doc()">
</td>
</tr>
</tbody>
</table>
</div>
<!-- grilla -->
<div id="container_grilla" style="display: none; min-height: 517px; height: 517px;">
<div style="padding-left: 25px; padding-right: 30px; border-bottom: 1px solid #eee;">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 1%;">
<div id="div_info_grid">
<img src="images/info.png" title="Información útil" style="opacity: .6; position: relative; bottom: -3px; margin-right: 20px; cursor: pointer; height: 14px;" onmousedown="switch_active_modal('modal_info')">
</div>
<ul id="ul_dropdown_estilos_grid" style="list-style-type: none; padding: 0; margin: 0;">
<li title="Estilos de Grilla" class="li_dropdown_estilos_grid" onmousedown="menu_emerg_grid('li_estilos_grid')">
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td><img src="images/colorpicker.png" style="height: 14px; position: relative; bottom: -2px;"></td>
<td><img src="images/drop_down2.png" style="position: relative; bottom: -2px;"></td>
</tr>
</tbody>
</table>
</li>
<li id="li_estilos_grid" style="position: absolute; z-index: 10; display: none;">
<div style="border-bottom: 1px solid #eee; text-align: center; padding: 4px; color: #337ab7; font-size: 12px; font-weight: bold; padding: 4px; background-color: #fafafa; -webkit-user-select: none; user-select: none;">Estilos de Grilla</div>
<table class="estilos-grid">
<tbody>
<tr class="estilos-grid-tr" style="border-bottom: 1px solid #ddd;">
<td class="estilos-grid-td"><span>▶</span> Estilos de Grilla »</td>
<td style="width: 230px;">
<form name="form_grid_tabla">
<div>
<table>
<tbody>
<tr>
<td style="padding-right: 5px;">Color de texto</td>
<td>
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td>
<input type='button' title='#333' name='text_color' value=' ' style='margin:0; padding:0; width:20px; height:20px; border: 1px solid; border-color: #9e9e9e; border-radius: 3px; background-color: #333;' onmouseover="this.style.borderColor='#757575'" onmouseout="this.style.borderColor='#9e9e9e'" onClick="click_paleta_grid('colores_grid_text');">
</td>
</tr>
<tr>
<td id='colores_grid_text' style='position:absolute; z-index: 100; display:none;'>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 5px; padding-right: 5px;">Tamaño</td>
<td style="padding-top: 5px;">
<select name="text_size" onchange="grid_table_style(this.form, 'text_size', this.value)">
<option value="12px">12px</option>
<option value="14px" selected>14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="24px">24px</option>
</select>
</td>
</tr>
<tr>
<td style="padding-top: 5px; padding-right: 5px;">Fuente</td>
<td style="padding-top: 5px;">
<select name="text_family" onchange="grid_table_style(this.form, 'text_family', this.value)" >
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="'Times New Roman', Times, serif">Times New Roman</option>
<option value="'Comic Sans MS', cursive, sans-serif">Comic Sans MS</option>
<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">Lucida Sans Unicode</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<hr style="border: none; border-bottom: 1px solid #ddd; margin: 10px 0;">
</div>
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td style="padding-right: 5px;">Alto de línea</td>
<td>
<select name="line_height" onchange="grid_table_style(this.form, 'line_height', this.value)">
<option value="normal">normal</option>
<option value="1.2">1.2</option>
<option value="1.4">1.4</option>
<option value="1.6">1.6</option>
<option value="1.8">1.8</option>
<option value="2.0">2.0</option>
</select>
</td>
</tr>
<tr>
<td style="padding-right: 5px; padding-top: 5px;">Sangría</td>
<td style="padding-top: 5px;">
<select name="indentation" onchange="grid_table_style(this.form, 'indentation', this.value)">
<option value="0px">0px</option>
<option value="2px">2px</option>
<option value="4px">4px</option>
<option value="6px">6px</option>
<option value="8px">8px</option>
<option value="10px">10px</option>
<option value="12px">12px</option>
</select>
</td>
</tr>
<tr>
<td style="padding-right: 5px; padding-top: 5px;">Alinear texto</td>
<td style="padding-top: 5px;">
<select name='align' onchange="grid_table_style(this.form, 'align', this.value)">
<option value='left'>Izquierda</option>
<option value='center'>Centrar</option>
<option value='right'>Derecha</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<hr style="border: none; border-bottom: 1px solid #ddd; margin: 10px 0;">
</div>
<div title="Para visualizar este estilo: habilitar Graficos de Fondo en Propiedades de Impresión del navegador">
<input type="radio" name="r_estilo_grid" id="r_e_g_0" onchange="grid_table_style(this.form, 'border', 'table_grid_stripped')"> <label for="r_e_g_0">Fondo</label>
</div>
<div>
<input type="radio" name="r_estilo_grid" id="r_e_g_1" onchange="grid_table_style(this.form, 'border', 'table_grid_borderBottom')" checked> <label for="r_e_g_1">Borde inferior</label>
</div>
<div>
<input type="radio" name="r_estilo_grid" id="r_e_g_2" onchange="grid_table_style(this.form, 'border', 'table_grid_borderAll')"> <label for="r_e_g_2">Bordes</label>
</div>
<div>
<input type="radio" name="r_estilo_grid" id="r_e_g_3" onchange="grid_table_style(this.form, 'border', 'table_grid_borderLess')"> <label for="r_e_g_3">Quitar bordes</label>
</div>
</form>
</td>
</tr>
<tr class="estilos-grid-tr" style="border-bottom: 1px solid #ddd;">
<td class="estilos-grid-td"><span>▶</span> Aplicar a Fila »</td>
<td style="width: 170px;">
<form name="form_grid_fila">
<table style="margin-left: 4px;">
<tbody>
<tr>
<td rowspan='3' style="padding-right: 15px; font-weight: bold;">Texto
</td>
<td><input type='checkbox' id="grid_f_negrita" onchange="grid_row_style(this.form, 'negrita', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_f_negrita">Negrita</label></td>
</tr>
<tr>
<td><input type='checkbox' id="grid_f_italica" onchange="grid_row_style(this.form, 'italica', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_f_italica">Italica</label></td>
</tr>
<tr>
<td><input type='checkbox' id="grid_f_subrayado" onchange="grid_row_style(this.form, 'subrayado', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_f_subrayado">Subrayado</label></td>
</tr>
<tr>
<td style="padding-top: 8px; padding-right: 10px; font-weight: bold;">
Sangría</td>
<td colspan='2' style="padding-top: 8px;">
<select name="indentation" onchange="grid_row_style(this.form, 'indentation', this.value)">
<option value='x'>Seleccionar</option>
<option value="0px">0px</option>
<option value="2px">2px</option>
<option value="4px">4px</option>
<option value="6px">6px</option>
<option value="8px">8px</option>
<option value="10px">10px</option>
<option value="12px">12px</option>
</select>
</td>
</tr>
<tr>
<td style="padding-top: 10px; padding-right: 10px; font-weight: bold;">
Alinear<br>texto</td>
<td colspan='2' style="padding-top: 10px;">
<select onchange="if (this.value!='x') grid_row_style(this.form, 'align', this.value)">
<option value='x'>Seleccionar</option>
<option value='left'>Izquierda</option>
<option value='center'>Centrar</option>
<option value='right'>Derecha</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
<tr class="estilos-grid-tr" style="border-bottom: 1px solid #ddd;">
<td class="estilos-grid-td"><span>▶</span> Aplicar a Columna »</td>
<td style="width: 170px;">
<form name="form_grid_columna">
<table style="margin-left: 4px;">
<tbody>
<tr>
<td rowspan='3' style="padding-right: 15px; font-weight: bold;">Texto
</td>
<td><input type='checkbox' id="grid_col_negrita" onchange="grid_col_style(this.form, 'negrita', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_col_negrita">Negrita</label></td>
</tr>
<tr>
<td><input type='checkbox' id="grid_col_italica" onchange="grid_col_style(this.form, 'italica', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_col_italica">Italica</label></td>
</tr>
<tr>
<td><input type='checkbox' id="grid_col_subrayado" onchange="grid_col_style(this.form, 'subrayado', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_col_subrayado">Subrayado</label></td>
</tr>
<tr>
<td style="padding-top: 8px; padding-right: 10px; font-weight: bold;">
Sangría</td>
<td colspan='2' style="padding-top: 8px;">
<select name="indentation" onchange="grid_col_style(this.form, 'indentation', this.value)">
<option value='x'>Seleccionar</option>
<option value="0px">0px</option>
<option value="2px">2px</option>
<option value="4px">4px</option>
<option value="6px">6px</option>
<option value="8px">8px</option>
<option value="10px">10px</option>
<option value="12px">12px</option>
</select>
</td>
</tr>
<tr>
<td style="padding-top: 10px; padding-right: 10px; font-weight: bold;">
Alinear<br>texto</td>
<td colspan='2' style="padding-top: 10px;">
<select onchange="if (this.value!='x') grid_col_style(this.form, 'align', this.value)">
<option value='x'>Seleccionar</option>
<option value='left'>Izquierda</option>
<option value='center'>Centrar</option>
<option value='right'>Derecha</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
<tr class="estilos-grid-tr" style="border-bottom: 1px solid #ddd;">
<td class="estilos-grid-td"><span>▶</span> Aplicar a Celda »</td>
<td style="width: 170px;">
<form name="form_grid_celda">
<table style="margin-left: 4px;">
<tbody>
<tr>
<td rowspan='3' style="padding-right: 15px; font-weight: bold;">Texto
</td>
<td><input type='checkbox' id="grid_cell_negrita" onchange="grid_cell_style(this.form, 'negrita', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_cell_negrita">Negrita</label></td>
</tr>
<tr>
<td><input type='checkbox' id="grid_cell_italica" onchange="grid_cell_style(this.form, 'italica', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_cell_italica">Italica</label></td>
</tr>
<tr>
<td><input type='checkbox' id="grid_cell_subrayado" onchange="grid_cell_style(this.form, 'subrayado', this.checked)"></td>
<td style="font-style: italic;"><label for="grid_cell_subrayado">Subrayado</label></td>
</tr>
<tr>
<td style="padding-top: 8px; padding-right: 10px; font-weight: bold;">
Sangría</td>
<td colspan='2' style="padding-top: 8px;">
<select name="indentation" onchange="grid_cell_style(this.form, 'indentation', this.value)">
<option value='x'>Seleccionar</option>
<option value="0px">0px</option>
<option value="2px">2px</option>
<option value="4px">4px</option>
<option value="6px">6px</option>
<option value="8px">8px</option>
<option value="10px">10px</option>
<option value="12px">12px</option>
</select>
</td>
</tr>
<tr>
<td style="padding-top: 10px; padding-right: 10px; font-weight: bold;">
Alinear<br>texto</td>
<td colspan='2' style="padding-top: 10px;">
<select onchange="if (this.value!='x') grid_cell_style(this.form, 'align', this.value)">
<option value='x'>Seleccionar</option>
<option value='left'>Izquierda</option>
<option value='center'>Centrar</option>
<option value='right'>Derecha</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
<tr class="estilos-grid-tr">
<td class="estilos-grid-td"><span>▶</span> Vincular Celdas »</td>
<td style="width: 170px;">
<form name="form_grid_vincular">
<table>
<tbody>
<tr>
<td>Col. adyacentes</td>
<td style="padding-left: 8px;">
<input type="number" name='colspan1' value="0" size="2" min="0" maxlength="2" max="14" step="1" oninput="if(!(this.value) || isNaN(this.value)) this.value = ''; else if (this.value.length > 2) this.value = this.value.slice(0, 2)" style="width: 35px; font-size: 12px; padding:0; margin:0; box-sizing: border-box; vertical-align: middle;" />
</td>
</tr>
<tr>
<td>Filas adyacentes</td>
<td style="padding-left: 8px;">
<input type="number" name='rowspan1' value="0" size="2" min="0" max="14" step="1" oninput="if(!(this.value) || isNaN(this.value)) this.value = ''; else if (this.value.length > 2) this.value = this.value.slice(0, 2)" style="width: 35px; font-size: 12px; padding:0; padding-left: 1px; margin:0; box-sizing: border-box; vertical-align: middle;" />
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; margin-top: 8px; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td>
<input type="button" name="t_g_vincular" value="Vincular" style="font-size: 12px; color: #263238;" onclick="
var c=document.forms['form_grid_vincular'].colspan1.value, r=document.forms['form_grid_vincular'].rowspan1.value;
if (c == 0 && r == 0)
return false;
if (isNaN(c) || isNaN(r))
{
switch_alerta('Ingresar sólo valores numéricos.');
return false;
}
if ((c < 0) || (r < 0) )
{
switch_alerta('Ingresar sólo valores positivos.');
return false;
}
c = parseInt(c) + 1;
r = parseInt(r) + 1;
var n=nsel, a=n.cellIndex, b=n.parentNode.rowIndex, t=n.parentNode.parentNode.parentNode, d=r-1+b, e=c-1+a, i=0;
for (i=e; i>a; i--)
{
if (t.rows[b].cells[i])
t.rows[b].cells[i].style.display = 'none';
else
c--;
}
for (i=d; i>b; i--)
if (!t.rows[i])
r--;
for (i=d; i>b; i--)
for (j=e; j>=a; j--)
if (t.rows[i])
if (t.rows[i].cells[j])
t.rows[i].cells[j].style.display = 'none';
if (c > 1)
n.setAttribute('colspan',c);
if (r > 1)
n.setAttribute('rowspan',r);
this.setAttribute('disabled','true');
document.forms['form_grid_vincular'].t_g_desvincular.removeAttribute('disabled');
mostrar_bullet_cambios('grid');"/>
</td>
<td style="padding-left: 5px;">
<input type="button" name='t_g_desvincular' value="Desvincular" style="font-size: 12px;" onclick="
var n=nsel, c, r;
if (n==null || n=='')
{
switch_alerta('Seleccionar una celda');
return false;
}
if(n.getAttribute('colspan'))
c = n.getAttribute('colspan');
else
c = 1;
if(n.getAttribute('rowspan'))
r = n.getAttribute('rowspan');
else
r = 1;
if(c==1 && r==1)
return false;
var a=n.cellIndex, b=n.parentNode.rowIndex, t=n.parentNode.parentNode.parentNode, d=parseInt(r)-1+b, e=parseInt(c)-1+a, i=0, j=0;
for (i=e; i>a; i--)
if (t.rows[b].cells[i])
t.rows[b].cells[i].style.display = '';
for (i=d; i>b; i--)
for (j=e; j>=a; j--)
if (t.rows[i])
if (t.rows[i].cells[j])
t.rows[i].cells[j].style.display = '';
if (c > 1)
n.removeAttribute('colspan');
if (r > 1)
n.removeAttribute('rowspan');
this.form.colspan1.value = 0;
this.form.rowspan1.value = 0;
this.setAttribute('disabled', 'true');
document.forms['form_grid_vincular'].t_g_vincular.removeAttribute('disabled');
mostrar_bullet_cambios('grid');"/>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
</td>
<td style="height: 40px;"><input id="in_tit_grid" type="text" placeholder="Agregar título (opcional)" maxlength="1000" value="" class="grid_input_tit" onkeydown="if (event.keyCode == 27 || event.keyCode == 13) document.activeElement.blur();" oninput="if (this.value.trim() == '') this.style.border='1px dashed #bdbdbd'; else this.style.border='none'; mostrar_bullet_cambios('grid');" onfocus="document.getElementById('li_estilos_grid').style.display='none'"></td>
<td style="width: 1%;">
<img src="images/print.png" title="Imprimir grilla" style="height: 18px; margin-right: 30px; cursor: pointer; position: relative; bottom: -2px; opacity: .6;" onmouseover="this.style.opacity='.8'" onmouseout="this.style.opacity='.6'" onclick="imprimir_grid()" >
</td>
<td style="width: 1%;">
<img src="images/arrow_back1.png" title="Volver" style="cursor: pointer; position: relative; bottom: -2px;" alt="" onclick="switch_to_grid()">
</td>
</tr>
</tbody>
</table>
</div>
<div id="div_paste_grid" style="height: 415px; overflow: auto; box-sizing: border-box; padding: 10px 10px 0 10px;">
</div>
<table style="width: 100%; border-top: 1px solid #eee; background-color: #fafafa; -webkit-user-select: none; user-select: none;">
<tbody>
<tr>
<td style="text-align: left; padding-left: 25px;">
<span style="font-size: 12px; font-style: italic;">NOMBRE</span>
<input id="input_nombre_grid" type="text" value="grid_section_1" maxlength="30" style="padding: 5px 7px; margin-left: 4px;">
<a id="bullet_cambios_grid" title="Hay cambios sin guardar" style="visibility: hidden; text-decoration: none; cursor: default; color: #9e9e9e; font-weight: bold; font-size: 18px; padding: 0 5px; position: relative; bottom: -1px;">•</a>
</td>
<td id="eval_grid" style="width: 150px; color: green; text-align: right;padding-right: 20px;"></td>
<td id="td_cancelar_paste_grid" style="width: 1%; height: 50px; text-align: right; padding-right: 10px;">
<input type="button" value="Cancelar" class="btn-secundario" onclick="switch_to_grid()" />
</td>
<td style="width: 1%; height: 50px; text-align: right; padding-right: 25px;">
<input id="btn_guardar_grid" type="button" class="btn-primario" data-index="-1" value="Agregar" onclick="guardar_grid()" disabled>
</td>
</tr>
</tbody>
</table>
</div>
<!-- plantilla -->
<div id="container_plantilla" style="display: none; min-height: 517px; height: 517px;">
<div style="padding-left: 30px; padding-right: 30px; border-bottom: 1px solid #eee;">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 1%;">
<div id="div_dropdown_agregar_secc" class="li_dropdown_estilos_grid" onmousedown="switch_menu_agregar_secc()">
<table title="Agregar sección" style="border-collapse: collapse;">
<tbody>
<tr>
<td><img src="images/add_circle.png" style="height: 14px; position: relative; bottom: -2px;"></td>
<td><img src="images/drop_down2.png" style="position: relative; bottom: -2px;"></td>
</tr>
</tbody>
</table>
</div>
<div id="div_agregar_secc" style="position: absolute; z-index: 10; display: none;">
<table class="estilos-submenu-plantilla">
<tbody>
<tr>
<td onclick="show_modal_add_secc('modal_agregar_secc', 'docs')"><span style='padding-right:7px;'>▶</span>Agregar Doc</td>
</tr>
<tr>
<td onclick="show_modal_add_secc('modal_agregar_secc', 'grillas')"><span style='padding-right:7px;'>▶</span>Agregar Grilla</td>
</tr>
</tbody>
</table>
</div>
</td>
<td id="tit_nombre_plantilla" data-index="0" style="padding-left: 10px; font-family: 'Comic Sans MS'; font-size: 18px; color: #337ab7; opacity: .8; height: 40px;">Nueva Plantilla</td>
<td style="width: 1%;">
<img src="images/print.png" title="Imprimir plantilla" style="height: 18px; margin-right: 30px; cursor: pointer; position: relative; bottom: -2px; opacity: .6;" onmouseover="this.style.opacity='.8'" onmouseout="this.style.opacity='.6'" onclick="imprimir_plantilla()" >
</td>
<td style="width: 1%;">
<img src="images/arrow_back1.png" title="Volver" style="cursor: pointer; position: relative; bottom: -2px;" alt="" onclick="switch_to_plantilla()">
</td>
</tr>
</tbody>
</table>
</div>
<div id='div_opciones_plantilla' style='border-bottom:1px solid #e0e0e0; padding:5px; background-image: linear-gradient(#fff, #fafafa)'>
<form name="opc_plantilla">
<table style='width:99%; border-collapse:collapse'><tbody><tr>
<td><table style='border-collapse:collapse; margin-left:10px'><tbody><tr><td style='padding:0; padding-right:7px; font-style: italic; color: #616161;'>Espaciado entre secciones</td><td style='padding:0'><select id="select_margenes_plantilla" onchange='plantilla_sections_margin(this.value)'><option value='0px'>0px</option><option value='5px'>5px</option><option value='10px'>10px</option><option value='15px'>15px</option><option value='20px'>20px</option><option value='25px'>25px</option><option value='30px'>30px</option><option value='35px'>35px</option><option value='40px'>40px</option></select></td></tr></tbody></table></td>
<td style='text-align:right'><input type='checkbox' id='chk_collapse_all' style='margin-right:5px; position:relative; bottom:-1px;' onchange='plantilla_collapse_all()'><label for='chk_collapse_all' class='label-collapse-all' style='color: #616161;'>Colapsar todo</label></td>
</tr></tbody></table>
</form>
</div>
<div id="div_contenido_plantilla" style="margin: 0; height: 415px; overflow: auto; padding-top: 2mm; padding-bottom: 2mm; padding-left: 2mm; padding-right: 2mm;">
<!-- contenido -->
</div>
</div>
</div>
</div>
</section>
<!-- section online -->
<section id="section_online" style="display: none;">
<div style="width: 100%; height: 100%; display: table-cell; vertical-align: middle;">
<div class="container_section">
<table class="modulos-table">
<tbody>
<tr>
<td id="td_modulos_share" style="width: 70px; vertical-align: top;">
<div class="modulos-title">MODULOS</div>
<a href="#" class="modulos-link" onclick="sel_module_share(this, 0)">
<div style="text-align: center; position: relative; padding-top: 5px;">
<img src="images/chat.png" style="width: 30px;">
<div id="share_budget_chat" class="modulos-budget" style="visibility: hidden;">0</div>
</div>
<div>Chat</div>
</a>
<div>
<hr class="hr1">
</div>
<a href="#" class="modulos-link" onclick="sel_module_share(this, 1)">
<div style="text-align: center; position: relative; padding-top: 5px;">
<img src="images/send.png" style="width: 28px;">
</div>
<div style="text-align: center;">Enviar</div>
</a>
<a href="#" class="modulos-link" onclick="sel_module_share(this, 2)">
<div style="text-align: center; position: relative; padding-top: 5px;">
<img src="images/download.png" style="width: 28px;">
</div>
<div style="text-align: center;">Recibir</div>
</a>
</td>
<td id="display_share" style="padding: 15px; padding-bottom: 10px; border-left: 1px solid #e0e0e0; overflow-y: auto;">
<div>
<div style="text-align: center;">Comparte con tu equipo de trabajo</div>
<div style="text-align: center; font-style: italic; color: #757575;">Utiliza esta sección para enviar mensajes o archivos...</div>
<div id="div_crear_nick" style="text-align: center; margin-top: 15px;">
<input id="btn_div_crear_nick" type="button" value="Crear Nick de sesión" class="btn-primario" onclick="switch_crear_nick('modal_crear_nick')" disabled>
</div>
<div id="online_msg_connected" style="text-align: center; color: green; margin-top: 15px;">
Servidor inaccesible (verifica tu conexión a internet) <button onclick="reload_inicio_online(this)" title="reintentar" style="margin: 0; padding: 2px 4px; margin-left: 5px;"><img src="images/reload.png" style="height: 14px; cursor: pointer;"></button>
</div>
</div>
<iframe src="" frameborder="0" style="display: none; width: 100%; margin: 0; height: 480px; overflow: auto;"></iframe>
<iframe src="" frameborder="0" style="display: none; width: 100%; margin: 0; height: 480px; overflow: auto;"></iframe>
<iframe src="" frameborder="0" style="display: none; width: 100%; margin: 0; height: 480px; overflow: auto;"></iframe>
<iframe id="iframe_inicio_online" src="" frameborder="0" style="width: 0px; height: 0px; overflow: hidden; margin:0;"></iframe>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- section calendario -->
<section id="section_calendario" style="display: none;">
<div style="width: 100%; height: 100%; display: table-cell; vertical-align: middle;">
<div class="container_section">
<div id="agenda_regnare" style="max-width:750px; clear:both; margin-left:auto; margin-right:auto; padding-top: 25px;">
<div id="ar__alert1" style="display: none; color: #a94442; background-color: #f2dede; border: 1px solid #ebccd1; border-radius: 4px; padding: 15px; margin-bottom: 20px;">
</div>
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr>
<td>
<ul id="ar__nav_cal" class="ul_nav0">
<li><input type="button" value="«" title="Retroceder año" onclick="cal_switch_month(0, -1)"></li>
<li><input type="button" value="‹" title="Retroceder mes" onclick="cal_switch_month(-1, 0);"></li>
<li><input type="button" value="›" title="Avanzar mes" onclick="cal_switch_month(1, 0)"></li>
<li><input type="button" value="»" title="Avanzar año" onclick="cal_switch_month(0, 1)"></li>
</ul>
</td>
<td>
<div align="center">
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td>
<a style="cursor: pointer; position: relative; bottom: -2px;" onclick="mostrar_todas_entradas()">
<svg width="18px" height="16px" viewBox="0 0 24 24" fill="#3884c7">
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
</svg>
</a>
</td>
<td style="padding-left:5px; padding-right: 7px; color:#90a4ae;">~</td>
<td id="ar__fecha"
style="font-size: 12px; color: #337ab7; cursor: pointer;"
onclick="if (ar_var['vista_act'] == 0) {crear_calendario_mes(ar_var['year_curr'], ar_var['mes_curr']); ar_var['year_sel']=ar_var['year_curr']; ar_var['mes_sel']=ar_var['mes_curr'];} else {cargar_dia_sem(ar_var['dia_sem'])}"
style="font-family: Arial, Helvetica, sans-serif;"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<ul class="ul_nav1">
<li>
<a class="active" onclick="ar_var['vista_act'] = 0; crear_calendario_mes(ar_var['year_curr'], ar_var['mes_curr']); ar_var['year_sel']=ar_var['year_curr']; ar_var['mes_sel']=ar_var['mes_curr']; this.parentNode.nextElementSibling.firstElementChild.className = ''; this.className='active';document.getElementById('ar__sem_main').style.opacity = '0'; setTimeout(function(){document.getElementById('ar__sem_main').style.display = 'none'; document.getElementById('ar__mes_main').style.display = 'block'; document.getElementById('ar__mes_main').style.opacity = '1'; document.querySelector('#agenda_regnare #ar__nav_cal').style.visibility='visible';}, 250);">MES</a>
</li>
<li>
<a onclick="ar_var['vista_act'] = 1; document.querySelector('#agenda_regnare #ar__nav_cal').style.visibility='hidden'; ar_var['dia_sem_sel'] = ar_var['dia_sem']; ar_var['dia_mes_sel'] = ar_var['dia_mes']; ar_var['mes_sel'] = ar_var['mes_curr']; ar_var['year_sel'] = ar_var['year_curr']; cargar_semana(ar_var['dia_mes'], ar_var['dia_sem']); this.parentNode.previousElementSibling.firstElementChild.className = ''; this.className='active'; document.getElementById('ar__mes_main').style.opacity = '0'; setTimeout(function(){document.getElementById('ar__mes_main').style.display = 'none'; document.getElementById('ar__sem_main').style.display = 'block'; document.getElementById('ar__sem_main').style.opacity = '1';}, 250);">SEMANA</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse; padding: 0; margin: 0;">
<tbody>
<tr>
<td style="vertical-align: top; padding: 0;">
<div id='ar__mes_main' style="opacity: 1; transition: opacity .25s ease;"></div>
<div id='ar__sem_main'
style="display: none; height: 442px; overflow: auto; scroll-behavior: smooth; background-color: #fff; opacity: 0; transition: opacity .25s ease;">
<table class="table-striped-sem">
<tbody id="ar__tr_dia_sem">
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!-- MODAL CARGAR/EDITAR ENTRADA -->
<div id="ar__m1" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="max-width: 90%; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;" class="slide_down">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td id="ar__m1_header" style="font-size: 18px; padding-left: 20px; color: #464646;">Editar Nombre</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('ar__m1')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div id="ar__m1_html" style="width: 270px; padding: 15px 20px; overflow: auto;">
</div>
<!-- footer -->
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<td></td>
<td style="width: 1%; padding: 10px 0">
<input id="ar__m1_btn_del" type="button" value="Eliminar" class="btn-red-cal" />
</td>
<td style="width: 1%; padding: 10px">
<input id="ar__m1_btn_cancel" type="button" value="Cancelar" class="btn-white-cal" onclick="switch_active_modal('ar__m1')" />
</td>
<td style="width: 1%; padding: 10px 10px 10px 0">
<input type="button" id="ar__m1_btn_send" value="Aceptar" class="btn-blue-cal"
onclick="cal_validar1()" />
</td>
</tr>
</tbody>
</table>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- MODAL CARGAR/EDITAR ENTRADA MES -->
<div id="ar__m2" style="display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, .5); z-index: 99999;">
<table style="width: 100%; height: 100vh; border-collapse: collapse; transition: background-color 1s;">
<tbody>
<tr>
<td style="padding: 25px;">
<table style="min-width: 350px; width: 90%; max-width: 750px; margin: auto; clear: both; border-collapse: collapse; background-color: #fafafa; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 5px; transition: box-shadow 1s;" class="slide_down">
<tbody>
<tr>
<td>
<section data-visible="ok">
<table style="width: 100%; border-bottom: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<!-- titulo -->
<td id="ar__m2_header" style="font-size: 18px; padding-left: 20px; color: #464646;">Entradas Calendario</td>
<!-- btn close -->
<td style="width: 1%;">
<a title="Cerrar" class="arrow-close-modal" onclick="switch_active_modal('ar__m2')">×</a>
</td>
</tr>
</tbody>
</table>
<!-- contenido -->
<div id="ar__m2_html" style="padding: 20px 25px 25px 25px; overflow: auto;">
</div>
<!-- footer -->
<table style="width: 100%; border-top: 1px solid #ccc; border-collapse: collapse;">
<tbody>
<tr>
<td></td>
<td style="width: 1%; padding: 10px">
<input type="button" id="ar__m2_btn_cargar" value="Nueva Entrada" class="btn-white-cal" onclick="switch_active_modal('ar__m2'); cal_nueva_entrada(ar_var['entrada_year'],ar_var['entrada_mes'],ar_var['entrada_dia'],0)" />
</td>
<td style="width: 1%; padding: 10px 10px 10px 0">
<input type="button" id="ar__m2_btn_close" value="Cerrar" class="btn-white-cal" onclick="switch_active_modal('ar__m2')" />
</td>
</tr>
</tbody>
</table>
</section>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- MODAL ALERTA CAL -->
<div id="modal_alerta_cal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999999; background-color: rgba(255, 255, 255, .5);">
<div style="width: 350px; background-color: #fff; border-radius: 10px; padding: 20px 20px 15px 20px; font-family: Arial, Helvetica, sans-serif; color: #464646; box-shadow: 0px 0px 4px #999; margin: auto; clear: both; margin-top: 5px;">
<div style="font-weight: bold; font-size: 16px;">Esta página dice</div>
<div class="modal_alerta_text" style="margin-top: 15px; margin-bottom: 10px; font-size: 14px;">xxx</div>
<div align="right">
<input type="button" value="Aceptar" style="padding: 0px 15px; border: 1px solid #9e9e9e; height: 36px; border-radius: 18px; background-color: #4169e1; color: #fff; font-size: 13px; font-weight: bold;" onmouseover="this.style.backgroundColor='#6585e7'" onmouseout="this.style.backgroundColor='#4169e1'" onclick="switch_alerta_cal()">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- section notas -->
<section id="section_notas" style="display: none;">
<div style="width: 100%; height: 100%; display: table-cell; vertical-align: middle;">
<div class="container_section">
<div><br></div>
<table style="width: 100%; margin: 0; border-collapse: collapse;">
<tbody>
<tr>
<td id="td_notas_count" style="width: 50px;"></td>
<td style="width: 30px;"></td>
<td></td>
<td style="width: 1%; text-align: center;">
<table class="img-add-note" title="Agragar Nota (hasta 40 Notas Rápidas)" onclick="nueva_nota()">
<tbody>
<tr>
<td>
<img src="images/add.png" id="img_add_note" style="height: 14px; opacity: .6; position: relative; bottom: -1px; margin-right: 2px;" />
</td>
<td>
Agregar Nota
</td>
</tr>
</tbody>
</table>
</td>
<td></td>
<td style="width: 1%; text-align: right;">
<input id="in_notas_size" type="text" style="width: 110px; outline: none; border: none; background-color: inherit; font-size: 12px; color: #616161;" value="Usado: 0 KB" readonly>
</td>
<td style="width: 1%;">
<ul style="list-style-type: none; margin: 0; padding: 0; position: relative;">
<li><img src="images/info.png" title="Información útil" style="opacity: .6; position: relative; bottom: -2px; margin-right: 20px; height: 14px;" onmouseover="this.parentNode.nextElementSibling.style.display='block'" onmouseout="this.parentNode.nextElementSibling.style.display='none'"></li>
<li style="display: none; position: absolute; z-index: 10; right: 0; width: 170px; padding: 10px 15px; margin-top: 2px; margin-right: 20px; background-color: #464646; color: #fafafa; border-radius: 5px;">→ Click fuera de la nota para guardar los cambios.<br>→ Doble-click en barra superior para expandir/contraer nota.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<div><br></div>
<ul id="nr_contenedor" class="nr-contenedor"></ul>
</div>
</div>
</section>
<div id="notif_grid_ctrl" data-displayed="0" style="display: none; position: fixed; bottom:10px; left: 10px;">
<div style="background-color: rgba(0,0,0,.5); padding: 8px 12px; border-radius: 5px;">
<div style="color: #fff; padding: 2px 0;">CTRL + <img src="images/arrows_move_white.png" style="position: relative; bottom: -2px; padding:0px 2px;" > : Desplazarse entre celdas</div>
<div style="color: #fff; padding: 2px 0;">CTRL + DEL : Eliminar contenido de fila / columna</div>
</div>
</div>