/* VoipRed — capa de estilo sobre A2Billing (2026-10-30).
   Misma línea del panel del bot: fondo gris frío, superficies blancas, un
   acento azul. Solo apariencia: se carga después de los CSS originales y se
   quita borrando este archivo y su <link> en header.tpl / index.tpl. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --vr-fondo: #f5f6f8;
  --vr-superficie: #ffffff;
  --vr-borde: #e3e6eb;
  --vr-borde-fuerte: #d3d8df;
  --vr-texto: #1d2433;
  --vr-texto-2: #5b6474;
  --vr-acento: #1f5fd6;
  --vr-acento-oscuro: #184db0;
  --vr-acento-suave: #eef3fd;
  --vr-sombra: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

html, body {
  background: var(--vr-fondo) !important;
  color: var(--vr-texto);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
body, td, th, p, div, span, input, select, textarea, button, font {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
::selection { background: rgba(31,95,214,.18); }

a:link, a:visited { color: var(--vr-acento); text-decoration: none; }
a:hover, a:active { color: var(--vr-acento-oscuro); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4, h5 { color: var(--vr-texto); font-weight: 600; letter-spacing: -0.01em; }

/* ── Barra superior ────────────────────────────────────────────────────── */
#top_menu {
  background: var(--vr-superficie) !important;
  width: auto !important;
  border-bottom: 1px solid var(--vr-borde);
  box-shadow: var(--vr-sombra);
  padding: 4px 16px !important;
  margin-bottom: 18px;
}
#top_menu ul, #menu_horizontal { margin: 0; padding: 0; }
#menu_horizontal li {
  background: none !important;
  border: none !important;
  height: auto !important;
  margin: 2px 4px 2px 0;
}
#menu_horizontal li a, #menu_horizontal li a strong {
  color: var(--vr-texto-2) !important;
  font-weight: 500 !important;
  font-size: 12.5px;
  text-transform: none;
}
#menu_horizontal li > div, #menu_horizontal li > a {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 8px;
}
#menu_horizontal li:hover > div, #menu_horizontal li:hover > a { background: #f1f3f6; }
#menu_horizontal img { opacity: .55; vertical-align: middle !important; }

/* ── Menú lateral ──────────────────────────────────────────────────────── */
#left-sidebar { padding-top: 0 !important; }
#leftmenu-top, #leftmenu-middle, #leftmenu-down { background: none !important; padding: 0 !important; }
#leftmenu-middle {
  background: var(--vr-superficie) !important;
  border: 1px solid var(--vr-borde);
  border-radius: 14px;
  box-shadow: var(--vr-sombra);
  margin: 0 8px 0 12px;
  padding: 8px 6px !important;
}
#nav { padding: 0 !important; margin: 0 !important; }
#nav li { list-style: none; background: none !important; border: none !important; }
#nav li a {
  color: var(--vr-texto-2) !important;
  font-size: 12.5px !important;
  padding: 7px 10px !important;
  border-radius: 8px;
  text-decoration: none !important;
}
#nav li a:hover { background: #f1f3f6 !important; color: var(--vr-texto) !important; }
#nav li a strong { font-weight: 500; }
#menutitlesection, #menutitlesection strong {
  color: var(--vr-texto) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}
.toggle_menu > div { padding: 6px 4px; border-radius: 8px; }
.toggle_menu > div:hover { background: #f5f6f8; }
#menutitlebutton img { opacity: .5; }

#main-content { padding-left: 286px !important; padding-right: 24px !important; }

/* ── Campos ────────────────────────────────────────────────────────────── */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=tel], input:not([type]),
select, textarea, .form_input_text, .form_input_textarea, .form_input_select {
  background: #fff !important;
  border: 1px solid var(--vr-borde-fuerte) !important;
  border-radius: 8px !important;
  color: var(--vr-texto) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 6px 10px !important;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(16,24,40,.03);
  transition: border-color .15s ease, box-shadow .15s ease;
}
select, .form_input_select { padding-right: 26px !important; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(31,95,214,.55) !important;
  box-shadow: 0 0 0 4px rgba(31,95,214,.12) !important;
}
input[type=checkbox], input[type=radio] { accent-color: var(--vr-acento); }

/* ── Botones ───────────────────────────────────────────────────────────── */
input[type=submit], input[type=button], button, input.button,
.form_input_button, .cssbutton, .cssbutton_big, .cssbutton_old, .button_inside {
  background: var(--vr-acento) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
  transition: background-color .15s ease, transform .1s ease;
  text-transform: none !important;
}
input[type=submit]:hover, input[type=button]:hover, button:hover, input.button:hover,
.form_input_button:hover, .cssbutton:hover, .cssbutton_big:hover { background: var(--vr-acento-oscuro) !important; }
input[type=submit]:active, input[type=button]:active, button:active, .form_input_button:active { transform: scale(.98); }
.form_input_button_disabled, input[disabled] { opacity: .5; cursor: not-allowed; }
.cssbutton_big img, .cssbutton img { display: none; }

/* ── Tablas y bloques ──────────────────────────────────────────────────── */
.tableBody, .tableBodyRight { font-size: 12.5px !important; padding: 8px 10px !important; border-color: var(--vr-borde) !important; }
.bgcolor_001, .bgcolor_003 { background-color: #f8f9fb !important; }
.bgcolor_005, .bgcolor_006, .bgcolor_007, .bgcolor_008 { background-color: var(--vr-acento-suave) !important; }
.bgcolor_004, .bgcolor_019 { background-color: #1d2433 !important; }
.form_head, .form_head_red, .form_invoice_head, TD.formAreaTitle {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
TABLE.formArea, .dashbox, .infoBox, .forgetpassword_maintable, .pp_error_maintable, .callhistory_maintable, .callback_maintable {
  background: var(--vr-superficie) !important;
  border: 1px solid var(--vr-borde) !important;
  border-radius: 12px;
  box-shadow: var(--vr-sombra);
}
.dashbox { padding: 14px !important; }
.dashtitle { font-weight: 600; color: var(--vr-texto); }
.dashbox_news, .dashbox_news2 { background: #fff !important; border-radius: 8px; }
.dashbox_news:hover, .dashbox_news2:hover { background: #f8f9fb !important; }

/* ── Mensajes ──────────────────────────────────────────────────────────── */
.msg_error, .msg_info, .msg_success, .msg_warning, .error_message, .infoBoxNotice {
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 12.5px;
}
.msg_success { background: #ecfdf3 !important; border: 1px solid #abefc6 !important; color: #067647 !important; }
.msg_error, .error_message { background: #fef3f2 !important; border: 1px solid #fecdca !important; color: #b42318 !important; }
.msg_warning { background: #fffaeb !important; border: 1px solid #fedf89 !important; color: #b54708 !important; }
.msg_info { background: var(--vr-acento-suave) !important; border: 1px solid #c7d7fb !important; color: var(--vr-acento-oscuro) !important; }

/* ── Login ─────────────────────────────────────────────────────────────── */
#login-wrapper, div#login-wrapper {
  background: var(--vr-superficie) !important;
  border: 1px solid var(--vr-borde) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.12) !important;
  position: static !important;
  height: auto !important;
  width: 380px !important;
  max-width: calc(100% - 32px);
  margin: 24px auto 0 !important;
  padding: 18px 8px 10px !important;
}
.login-border-up, .login-border-down, .login-border-center { background: none !important; }
.login-title { color: var(--vr-texto) !important; font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.01em; }
#login-wrapper img[src*="lock_bg"] { width: 44px; opacity: .25; }
#login-wrapper font, #login-wrapper b { color: var(--vr-texto-2) !important; font-weight: 500 !important; font-size: 12.5px !important; }
#login-wrapper input[type=text], #login-wrapper input[type=password] { width: 150px; box-sizing: border-box; }

/* ── Pie ───────────────────────────────────────────────────────────────── */
#footer, #footer_index, .version { background: none !important; border: none !important; color: #98a2b3 !important; font-size: 11px !important; }
#footer_index { margin: 28px auto 24px !important; text-align: center; }
#footer a, #footer_index a, .version a { color: #98a2b3 !important; }

/* ── Listados (ViewHandler: clientes, troncales, tarifas, CDR…) ─────────── */
/* La tabla de datos es la que tiene una fila .form_head como encabezado. */
table:has(> tbody > tr.form_head) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--vr-superficie);
  border: 1px solid var(--vr-borde);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--vr-sombra);
}
tr.form_head, tr.form_head > td { background: #f8f9fb !important; }
tr.form_head > td {
  border: 0 !important;
  border-bottom: 1px solid var(--vr-borde) !important;
  padding: 10px 12px !important;
  white-space: nowrap;
}
tr.form_head font, tr.form_head a, tr.form_head strong {
  color: var(--vr-texto-2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-decoration: none !important;
}
tr.form_head a:hover font, tr.form_head a:hover { color: var(--vr-acento) !important; }
tr.form_head img { vertical-align: middle; opacity: .55; margin-left: 2px; }

/* Filas: fondo blanco, solo divisores horizontales (el bgcolor/onmouseover del HTML queda tapado) */
table:has(> tbody > tr.form_head) > tbody > tr[bgcolor] { background: #fff !important; transition: background-color .12s ease; }
table:has(> tbody > tr.form_head) > tbody > tr[bgcolor]:hover { background: #f5f8ff !important; }
table:has(> tbody > tr.form_head) > tbody > tr[bgcolor] > td {
  border: 0 !important;
  border-bottom: 1px solid #eef0f3 !important;
  padding: 9px 12px !important;
  vertical-align: middle !important;
  color: var(--vr-texto);
  font-size: 12.5px !important;
  font-variant-numeric: tabular-nums;
}
/* Filas de relleno vacías (el listado siempre pinta mínimo 7) y la línea divisoria final */
table:has(> tbody > tr.form_head) > tbody > tr[bgcolor]:has(> td.tableBodyRight:last-child):not(:has(a, img, input, select)) { display: none; }
table:has(> tbody > tr.form_head) > tbody > tr:has(> td.tableDivider) { display: none; }
table:has(> tbody > tr.form_head) > tbody > tr[bgcolor]:nth-last-child(1 of [bgcolor]) > td { border-bottom: 0 !important; }

/* Columna de acciones: íconos alineados con área de toque */
td.tableBodyRight { white-space: nowrap; }
td.tableBodyRight a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; border-radius: 7px; margin: 0 1px;
  text-decoration: none !important;
}
td.tableBodyRight a:hover { background: #eef1f6; }
td.tableBodyRight a img { opacity: .75; transition: opacity .12s ease; }
td.tableBodyRight a:hover img { opacity: 1; }
td.tableBodyRight .cssbutton { padding: 3px 8px !important; font-size: 11px !important; border-radius: 6px !important; }

/* Barra de filtro y título del listado */
.viewhandler_filter_td1 {
  background: var(--vr-superficie) !important;
  border: 1px solid var(--vr-borde) !important;
  border-radius: 12px;
  box-shadow: var(--vr-sombra);
  padding: 10px 14px !important;
  height: auto !important;
}
.viewhandler_filter_td1 > span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.viewhandler_filter_on { color: var(--vr-texto-2) !important; font-weight: 500 !important; font-size: 12px !important; }
.viewhandler_table2_td3 { padding: 14px 2px 8px !important; height: auto !important; }
.viewhandler_span1 { color: var(--vr-texto-2) !important; font-size: 12px !important; font-weight: 500 !important; }
.tdstyle_002 { background: none !important; padding: 0 0 10px !important; }

/* Paginación como botones */
.viewhandler_span2 { color: var(--vr-texto-2) !important; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 10px 0; }
a.pagenav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--vr-borde); background: #fff;
  color: var(--vr-texto) !important; font-size: 12.5px; text-decoration: none !important;
}
a.pagenav:hover { border-color: var(--vr-acento); color: var(--vr-acento) !important; }

/* Secciones plegables (BUSCAR / ACTUALIZACIÓN MASIVA) */
div.toggle_hide2show { margin: 6px 0; }
div.toggle_hide2show a.toggle_menu {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--vr-superficie); border: 1px solid var(--vr-borde);
  text-decoration: none !important;
}
div.toggle_hide2show a.toggle_menu:hover { border-color: var(--vr-borde-fuerte); background: #f8f9fb; }
div.toggle_hide2show a.toggle_menu font { color: var(--vr-texto) !important; font-weight: 600 !important; font-size: 12px !important; }
div.toggle_hide2show a.toggle_menu img { opacity: .5; }

/* ── Íconos de acción de los listados (reemplazan los GIF/PNG viejos; generados por iconos.py) ── */
td.tableBodyRight a img { width: 16px !important; height: 16px !important; }
td.tableBodyRight img[src$="/info.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/edit.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/delete.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d92d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/money.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23079455' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/book_add.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M9 15h6M12 12v6'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/email.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/icon-viewdetails.gif"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/lock.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/page_white_gear.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/cancel.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d92d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/accept.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23079455' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/link.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/comment_edit.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/dl.gif"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/icon-release.gif"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/icon-restore.gif"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/brick_add.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E"); }
td.tableBodyRight img[src$="/icon-sip.gif"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Crect x='.5' y='.5' width='29' height='17' rx='5' fill='%23eef3fd' stroke='%231f5fd6' stroke-opacity='.35'/%3E%3Ctext x='15' y='12.6' text-anchor='middle' font-family='Inter,Arial,sans-serif' font-size='9' font-weight='700' fill='%231f5fd6'%3ESIP%3C/text%3E%3C/svg%3E"); width: 30px !important; height: 18px !important; }
td.tableBodyRight img[src$="/icon-iax.gif"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Crect x='.5' y='.5' width='29' height='17' rx='5' fill='%23f1f3f6' stroke='%235b6474' stroke-opacity='.35'/%3E%3Ctext x='15' y='12.6' text-anchor='middle' font-family='Inter,Arial,sans-serif' font-size='9' font-weight='700' fill='%235b6474'%3EIAX%3C/text%3E%3C/svg%3E"); width: 30px !important; height: 18px !important; }

/* ── Formularios de edición (EditForm: datos del cliente, cuentas SIP, troncales…) ── */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) {
  width: min(880px, calc(100% - 32px)) !important;
  margin: 8px auto 0 !important;
  background: var(--vr-superficie) !important;
  border: 1px solid var(--vr-borde);
  border-radius: 14px 14px 0 0;
  border-bottom: 0;
  box-shadow: var(--vr-sombra);
  border-collapse: separate !important;
  border-spacing: 0 !important;
  padding: 6px 24px 4px !important;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.form_head,
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.form_head_red {
  width: 34% !important;
  background: none !important;
  color: var(--vr-texto-2) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  padding: 14px 16px 14px 0 !important;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle !important;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.form_head_red { color: #b42318 !important; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight {
  background: none !important;
  background-image: none !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle !important;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr:last-child > td { border-bottom: 0; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) input[type=text], :is(table.editform_table1, table.addform_table1, table.tablestyle_001) input[type=password],
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) input:not([type]), :is(table.editform_table1, table.addform_table1, table.tablestyle_001) select, :is(table.editform_table1, table.addform_table1, table.tablestyle_001) textarea {
  width: 100% !important;
  max-width: 440px;
  box-sizing: border-box;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) .liens { display: block; color: #b42318; font-size: 12px; margin-top: 4px; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) .liens:empty { display: none; }
/* Pie con el botón: continúa la tarjeta */
table.editform_table8 {
  width: min(880px, calc(100% - 32px)) !important;
  margin: 0 auto 24px !important;
  background: #f8f9fb !important;
  border: 1px solid var(--vr-borde);
  border-top: 1px solid var(--vr-borde);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--vr-sombra);
  border-collapse: separate !important;
}
table.editform_table8 td { padding: 12px 24px !important; background: none !important; }
table.editform_table8 .tableBodyRight { color: var(--vr-texto-2); font-size: 12px; }
@media (max-width: 640px) {
  :is(table.editform_table1, table.addform_table1, table.tablestyle_001) { padding: 4px 16px !important; }
  :is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.form_head,
  :is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.form_head_red,
  :is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight { display: block; width: auto !important; }
  :is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.form_head, :is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.form_head_red { border-bottom: 0; padding: 12px 0 4px !important; }
  :is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight { padding: 0 0 12px !important; }
  table.editform_table8 td { display: block; width: auto !important; text-align: center; padding: 10px 16px !important; }
  table.editform_table8 input[type=submit] { width: 100%; }
}

/* ── Selector de idioma (ES / EN / PT) bajo el menú lateral ─────────────── */
.vr_idiomas {
  display: flex; gap: 2px;
  margin: 12px 8px 16px 12px; padding: 3px;
  background: var(--vr-superficie); border: 1px solid var(--vr-borde);
  border-radius: 10px; box-shadow: var(--vr-sombra);
}
.vr_idiomas a, .vr_idiomas a:visited {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 4px; border-radius: 7px;
  color: var(--vr-texto-2) !important; font-size: 12px; font-weight: 600; letter-spacing: .03em;
  text-decoration: none !important; transition: background-color .12s ease, color .12s ease;
}
.vr_idiomas a:hover { background: #f1f3f6; color: var(--vr-texto) !important; }
.vr_idiomas a.activo { background: var(--vr-acento-suave); color: var(--vr-acento) !important; }
.vr_idiomas img { width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(16,24,40,.08); }

/* ── Login nuevo (admin y clientes): sin candado, textos en ES/EN/PT ─────── */
#login-wrapper .vr_login { padding: 6px 22px 6px; text-align: left; }
#login-wrapper .vr_login h1 { margin: 2px 0 20px; text-align: center; font-size: 18px; font-weight: 600; color: var(--vr-texto); letter-spacing: -0.01em; }
#login-wrapper .vr_login label { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 500; color: var(--vr-texto-2); }
#login-wrapper .vr_login label input { display: block; width: 100% !important; box-sizing: border-box; margin-top: 6px; padding: 9px 12px !important; font-size: 14px !important; }
#login-wrapper .vr_login_btn { width: 100%; padding: 10px 14px !important; font-size: 14px !important; margin-top: 4px; }
#login-wrapper .vr_login_error { margin-bottom: 14px; text-align: center; }
#login-wrapper .vr_login_links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 4px; font-size: 12.5px; }
.vr_idiomas.vr_idiomas_login { max-width: 240px; margin: 16px auto 0; }
#footer_index > div { border: 0 !important; }
#login-wrapper .vr_login_links a { display: inline-flex; align-items: center; gap: 6px; }
#login-wrapper .vr_login_links svg { color: #25d366; }

/* ── EditForm: sub-listas (CallerID, números restringidos, historial…) ───── */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) { table-layout: fixed; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td[background] { background: none !important; }
/* Títulos de sección ("CALLERID / CUSTOMER HISTORY") */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight[colspan="2"] {
  background: none !important; padding: 26px 0 10px !important; border-bottom: 1px solid var(--vr-borde) !important;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight[colspan="2"] i {
  font-style: normal; font-weight: 600; font-size: 13px; color: var(--vr-texto); letter-spacing: .02em;
}
/* Lista existente y bloque "Agregar" como tarjetas */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table.editform_table2,
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.text > table {
  width: 100% !important; max-width: 520px; height: auto !important;
  margin: 6px 0 !important; background: #fff !important;
  border: 1px solid var(--vr-borde) !important; border-radius: 10px;
  border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.text { text-align: left !important; padding: 6px 0 !important; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.text > br, :is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.editform_table1_td1 > br { display: none; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.editform_table1_td1 { background: none !important; padding: 6px 0 !important; text-align: left !important; }
/* Encabezado de cada tarjeta */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table td.form_head, :is(table.editform_table1, table.addform_table1, table.tablestyle_001) table td[bgcolor] {
  background: #f8f9fb !important; color: var(--vr-texto-2) !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em;
  padding: 9px 12px !important; border: 0 !important; border-bottom: 1px solid var(--vr-borde) !important; height: auto !important;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table table td.form_head { padding: 0 !important; border: 0 !important; }
/* Barras grises vacías */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table td.form_head:has(> img[src*="clear.gif"]),
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) tr.bgcolor_016 { display: none !important; }
/* Filas de la lista */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table.editform_table2 tr[bgcolor] > td {
  background: #fff !important; padding: 9px 12px !important; border-bottom: 1px solid #eef0f3; font-size: 12.5px !important;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table.editform_table2 tr[bgcolor] font { font-family: inherit !important; font-size: 12.5px !important; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table .liens { display: block; color: var(--vr-texto-2) !important; font-weight: 400 !important; font-size: 12.5px; padding: 6px 0; }
/* Contenido del bloque "Agregar" */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.editform_table4_td1 { background: #fff !important; padding: 12px !important; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.editform_table4_td1 table { width: 100% !important; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.editform_table4_td1 td.tableBody {
  width: 32% !important; border: 0 !important; color: var(--vr-texto-2); font-size: 12.5px !important; padding: 0 10px 0 0 !important; vertical-align: middle;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.editform_table4_td1 td > div { text-align: left !important; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.editform_table4_td1 td[colspan="2"] { text-align: right !important; padding-top: 10px; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) td.editform_table4_td1 .cssbutton { display: inline-block; padding: 7px 14px !important; }
/* Pie del formulario: mismo ancho que la tarjeta */
table.editform_table8 { table-layout: fixed; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table.editform_table3 { width: 100% !important; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) table.editform_table2 tr[bgcolor]:last-child > td { border-bottom: 0 !important; }
/* Textos de ayuda bajo cada campo: gris, normal y con salto de línea */
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight {
  font-weight: 400 !important; color: var(--vr-texto-2); font-size: 12px !important; line-height: 1.5;
  white-space: normal !important; overflow-wrap: anywhere;
}
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight input[type=radio] { margin: 0 4px 0 6px; vertical-align: -2px; }
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight input, :is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight select,
:is(table.editform_table1, table.addform_table1, table.tablestyle_001) > tbody > tr > td.tableBodyRight textarea { margin-bottom: 4px; }

/* ── Opciones Sí/No (radios de los formularios) como interruptor ─────────── */
.vr_opciones { display: inline-flex; gap: 2px; padding: 3px; background: #eef0f3; border-radius: 10px; margin-bottom: 4px; }
.vr_opcion { position: relative; cursor: pointer; margin: 0; }
.vr_opcion input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 !important; pointer-events: none; }
.vr_opcion span {
  display: inline-block; min-width: 44px; text-align: center; padding: 5px 14px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--vr-texto-2); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vr_opcion:hover span { color: var(--vr-texto); }
.vr_opcion input:checked + span { background: #fff; color: var(--vr-acento); box-shadow: 0 1px 2px rgba(16,24,40,.1), 0 0 0 1px rgba(16,24,40,.04); }
.vr_opcion input:focus-visible + span { outline: 2px solid rgba(31,95,214,.45); outline-offset: 1px; }

/* ── Botón "Ir a la cuenta del cliente" ─────────────────────────────────── */
.vr_ir_cliente { text-align: right; padding: 0 16px; margin: 4px 0 8px; }
a.vr_btn_portal, a.vr_btn_portal:visited {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9px;
  background: #fff; border: 1px solid #c7d7fb; color: var(--vr-acento) !important;
  font-size: 12.5px; font-weight: 600; text-decoration: none !important; box-shadow: var(--vr-sombra);
  transition: background-color .15s ease, border-color .15s ease;
}
a.vr_btn_portal:hover { background: var(--vr-acento-suave); border-color: var(--vr-acento); }

/* ── Buscar (SearchHandler: clientes, troncales, CDR…) ───────────────────── */
table.searchhandler_table1 {
  width: min(1180px, calc(100% - 32px)) !important; margin: 10px auto 0 !important;
  background: var(--vr-superficie) !important; border: 1px solid var(--vr-borde) !important; border-radius: 14px;
  box-shadow: var(--vr-sombra); border-collapse: separate !important; border-spacing: 0 !important; padding: 6px 20px 10px !important;
}
table.searchhandler_table1 > tbody > tr > td { background: none !important; border-bottom: 1px solid #eef0f3; padding: 7px 0 !important; vertical-align: middle; }
table.searchhandler_table1 > tbody > tr:last-child > td { border-bottom: 0; }
table.searchhandler_table1 > tbody > tr > td:first-child { width: 170px; padding-right: 14px !important; }
table.searchhandler_table1 font.fontstyle_003, table.searchhandler_table1 > tbody > tr > td:first-child font {
  color: var(--vr-texto-2) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .03em;
}
table.searchhandler_table1 td.fontstyle_searchoptions, table.searchhandler_table1 table td {
  background: none !important; font-size: 12px !important; color: var(--vr-texto-2) !important; white-space: nowrap; padding: 0 4px !important;
}
table.searchhandler_table1 table { width: auto !important; }
table.searchhandler_table1 input[type=text] { width: 180px !important; }
table.searchhandler_table1 input[type=radio] { margin: 0 3px 0 0; vertical-align: -2px; }
table.searchhandler_table1 select { margin: 3px 4px 3px 0; }
table.searchhandler_table1 > tbody > tr:last-child > td:last-child { text-align: right !important; padding-top: 12px !important; }
.vr_btn_buscar { min-width: 120px; }
center > b { display: inline-block; font-weight: 500; color: var(--vr-texto-2); font-size: 12.5px; margin: 6px 0 2px; }

/* ── Actualización por lotes (clientes) ─────────────────────────────────── */
.tohide > center > table {
  width: min(880px, calc(100% - 32px)) !important; margin: 10px auto 18px !important;
  background: var(--vr-superficie) !important; border: 1px solid var(--vr-borde); border-radius: 14px;
  box-shadow: var(--vr-sombra); border-collapse: separate !important; border-spacing: 0 !important; padding: 6px 20px 12px !important;
}
.tohide > center > table > tbody > tr > td.bgcolor_001 {
  background: none !important; border-bottom: 1px solid #eef0f3; padding: 9px 4px !important; font-size: 12.5px; color: var(--vr-texto); vertical-align: middle;
}
.tohide > center > table > tbody > tr > td.bgcolor_001:first-child { width: 28px; text-align: center; }
.tohide > center > table > tbody > tr > td.bgcolor_001 input[type=checkbox] { width: 16px; height: 16px; }
.tohide > center > table > tbody > tr > td.bgcolor_001 > br { display: none; }
.tohide > center > table > tbody > tr > td.bgcolor_001 input[type=text], .tohide > center > table > tbody > tr > td.bgcolor_001 select { margin: 2px 6px 2px 4px; }
.tohide > center > table > tbody > tr > td.bgcolor_001 font { font-size: 12px !important; color: var(--vr-texto-2) !important; }
.tohide > center > table > tbody > tr:last-child > td { border-bottom: 0; padding-top: 14px !important; }
.tohide > center > b { display: block; max-width: 880px; margin: 12px auto 0; padding: 10px 14px; border-radius: 10px;
  background: #fffaeb; border: 1px solid #fedf89; color: #b54708; font-weight: 600; font-size: 12.5px; }
table.searchhandler_table1 input[type=text][size="10"] { width: 110px !important; }

/* ── Buscar: listas en varias líneas, acciones a la izquierda, etiqueta de búsqueda activa ── */
table.searchhandler_table1 table td:has(> select) { white-space: normal !important; }
table.searchhandler_table1 > tbody > tr:last-child > td:last-child { text-align: left !important; }
table.searchhandler_table1 > tbody > tr:last-child > td:last-child > * { vertical-align: middle; }
a.vr_btn_quitar, a.vr_btn_quitar:visited {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--vr-borde-fuerte); background: #fff; color: var(--vr-texto) !important;
  font-size: 12.5px; font-weight: 600; text-decoration: none !important;
}
a.vr_btn_quitar:hover { border-color: var(--vr-acento); color: var(--vr-acento) !important; }
a.vr_btn_peligro, a.vr_btn_peligro:visited {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 8px 12px; border-radius: 8px;
  color: #b42318 !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important;
}
a.vr_btn_peligro:hover { background: #fef3f2; }
/* "(búsqueda activada)": se ocultan los paréntesis sueltos y queda una etiqueta */
div.toggle_hide2show > center { font-size: 0; }
div.toggle_hide2show > center > a.toggle_menu { font-size: 12.5px; vertical-align: middle; }
div.toggle_hide2show > center > font {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  background: #fffaeb; border: 1px solid #fedf89; color: #b54708 !important; font-size: 11.5px !important; font-weight: 600;
}

/* ── Pie de los listados: "Ver N" a la izquierda, exportar a la derecha ──── */
td.vr_pie_lista { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 2px 6px !important; }
td.vr_pie_lista .vr_pie_etq { font-size: 12.5px; font-weight: 500; color: var(--vr-texto-2); text-transform: capitalize; }
td.vr_pie_lista select { width: auto !important; min-width: 74px; }
td.vr_pie_lista .vr_btn_ir {
  background: #fff !important; color: var(--vr-texto) !important; border: 1px solid var(--vr-borde-fuerte) !important;
  box-shadow: none !important; padding: 7px 14px !important;
}
td.vr_pie_lista .vr_btn_ir:hover { border-color: var(--vr-acento) !important; color: var(--vr-acento) !important; }
a.vr_btn_export, a.vr_btn_export:visited {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px;
  background: #fff; border: 1px solid var(--vr-borde-fuerte); color: var(--vr-texto) !important;
  font-size: 12.5px; font-weight: 600; text-decoration: none !important;
}
a.vr_btn_export:hover { border-color: var(--vr-acento); color: var(--vr-acento) !important; }
a.vr_btn_export svg { color: var(--vr-acento); }
a.vr_btn_export.vr_export_1 { margin-left: auto; }

/* ── Cabecera de los listados: acciones como botones y título con conteo ─── */
.vr_acciones_lista { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
a.vr_btn_prim, a.vr_btn_prim:visited, a.vr_btn_sec, a.vr_btn_sec:visited {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease;
}
a.vr_btn_prim { background: var(--vr-acento); color: #fff !important; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
a.vr_btn_prim:hover { background: var(--vr-acento-oscuro); }
a.vr_btn_sec { background: #fff; color: var(--vr-texto) !important; border: 1px solid var(--vr-borde-fuerte); }
a.vr_btn_sec:hover { border-color: var(--vr-acento); color: var(--vr-acento) !important; }
.vr_titulo_lista { font-size: 15px; font-weight: 600; color: var(--vr-texto); text-transform: capitalize; }
.vr_conteo { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #eef0f3; color: var(--vr-texto-2); font-size: 11.5px; font-weight: 600; vertical-align: 2px; }
.viewhandler_filter_on { text-transform: none; }

/* ── Formularios de agregar (addform) y de confirmar borrado (delform) ──── */
/* Celdas de valor del formulario de borrado (allí no son tableBodyRight) */
table.tablestyle_001 > tbody > tr > td.tablestyle_001 {
  background: none !important; padding: 10px 0 !important; border-bottom: 1px solid #eef0f3;
  vertical-align: middle !important; color: var(--vr-texto-2); font-size: 12.5px;
}
table.tablestyle_001 > tbody > tr:last-child > td.tablestyle_001 { border-bottom: 0; }
/* Pie del formulario de borrado: igual al de editar, botón en rojo */
table.delform_table5 {
  width: min(880px, calc(100% - 32px)) !important; margin: 0 auto 24px !important; table-layout: fixed;
  background: #fef3f2 !important; border: 1px solid #fecdca; border-radius: 0 0 14px 14px;
  box-shadow: var(--vr-sombra); border-collapse: separate !important;
}
table.delform_table5 tr:first-child { display: none; }
table.delform_table5 td { padding: 12px 24px !important; background: none !important; }
table.delform_table5 .tableBodyRight { color: #b42318; font-size: 12.5px; font-weight: 500; }
table.delform_table5 .cssbutton_big { background: #d92d20 !important; display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; }
table.delform_table5 .cssbutton_big:hover { background: #b42318 !important; }
table.delform_table5 .cssbutton_big img { display: none; }
/* Aviso de registros relacionados antes de borrar */
table.delform_table2 { width: 100% !important; border-radius: 10px; overflow: hidden; border: 1px solid #fecdca !important; }
table.delform_table2 td.delform_table2_td1 { background: #fef3f2 !important; color: #b42318 !important; font-weight: 600; padding: 9px 12px !important; }
table.delform_table2 td.bgcolor_006 { background: #fff !important; }
table.delform_table3 { width: min(880px, calc(100% - 32px)) !important; margin: 8px auto !important; }
.textnegrita { font-weight: 600; color: var(--vr-texto); }
/* Campos de solo lectura (confirmar borrado): gris para que no parezcan editables */
input[readonly], textarea[readonly], select:disabled { background: #f8f9fb !important; color: var(--vr-texto-2) !important; cursor: default; }

/* ── Botón de selección (antes la flechita amarilla) y ventana flotante ─── */
a[onclick*="window.open"] > img[src$="icon_arrow_orange.gif"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fd6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  width: 16px; height: 16px; vertical-align: middle;
}
a[onclick*="window.open"]:has(> img[src$="icon_arrow_orange.gif"]) {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 6px;
  border: 1px solid var(--vr-borde-fuerte); border-radius: 8px; background: #fff; vertical-align: middle;
  transition: border-color .15s ease, background-color .15s ease;
}
a[onclick*="window.open"]:has(> img[src$="icon_arrow_orange.gif"]):hover { border-color: var(--vr-acento); background: var(--vr-acento-suave); }
.vr_modal_fondo { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 4vh 16px; background: rgba(16,24,40,.45); }
.vr_modal_fondo.abierto { display: flex; animation: vr_modal_in .15s ease-out; }
@keyframes vr_modal_in { from { opacity: 0; } to { opacity: 1; } }
.vr_modal_caja { width: min(980px, 100%); height: min(760px, 92vh); background: #fff; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 24px 60px -12px rgba(16,24,40,.35); }
.vr_modal_cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--vr-borde); }
.vr_modal_cab span { font-size: 15px; font-weight: 600; color: var(--vr-texto); }
.vr_modal_x { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--vr-texto-2) !important;
  font-size: 24px !important; line-height: 1; padding: 2px 10px !important; border-radius: 8px !important; }
.vr_modal_x:hover { background: #f1f3f6 !important; }
.vr_modal_marco { flex: 1; width: 100%; border: 0; background: var(--vr-fondo); }
@media (max-width: 640px) { .vr_modal_fondo { padding: 0; } .vr_modal_caja { width: 100%; height: 100%; border-radius: 0; } }
/* Dentro de la ventana flotante: sin márgenes del menú lateral */
html.vr_en_modal #main-content { padding-left: 16px !important; padding-right: 16px !important; }
html.vr_en_modal #left-sidebar, html.vr_en_modal #top_menu { display: none !important; }
/* Etiqueta con la troncal junto a los campos de cliente (que guardan el id interno) */
.vr_cuenta_chip { display: inline-flex; align-items: center; margin-left: 8px; padding: 4px 10px; border-radius: 999px;
  background: var(--vr-acento-suave); color: var(--vr-acento); font-size: 12px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.vr_cuenta_chip_mal { background: #fef3f2; color: #b42318; }

/* ── Historial de llamadas del admin (call-log-customers.php) ────────────── */
/* Formulario de búsqueda */
table.bar-status {
  width: min(1180px, calc(100% - 32px)) !important; margin: 10px auto 8px !important;
  background: var(--vr-superficie) !important; border: 1px solid var(--vr-borde) !important; border-radius: 14px;
  box-shadow: var(--vr-sombra); border-collapse: separate !important; border-spacing: 0 !important; padding: 6px 20px 10px !important;
}
table.bar-status > tbody > tr > td { background: none !important; border-bottom: 1px solid #eef0f3; padding: 8px 0 !important; vertical-align: middle !important; }
table.bar-status > tbody > tr:last-child > td { border-bottom: 0; }
table.bar-status > tbody > tr > td:first-child { width: 170px; padding-right: 14px !important; }
table.bar-status font.fontstyle_003 { color: var(--vr-texto-2) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .03em; }
table.bar-status table td, table.bar-status td.fontstyle_searchoptions { background: none !important; color: var(--vr-texto-2) !important; font-size: 12px !important; padding: 2px 4px !important; }
table.bar-status input[type=text] { width: 180px !important; }
table.bar-status input[type=radio], table.bar-status input[type=checkbox] { margin: 0 3px 0 0; vertical-align: -2px; }
/* Tabla de resultados (tiene la fila de título bgcolor_021 y encabezado bgcolor_008) */
table:has(> tbody > tr > td.bgcolor_021) {
  width: calc(100% - 32px) !important; margin: 10px auto !important; background: var(--vr-superficie);
  border: 1px solid var(--vr-borde); border-radius: 14px; box-shadow: var(--vr-sombra); overflow: hidden;
  border-collapse: separate !important; border-spacing: 0 !important;
}
td.bgcolor_021 { background: #fff !important; padding: 14px 16px 10px !important; height: auto !important; }
td.bgcolor_021 .fontstyle_003 { color: var(--vr-texto) !important; font-size: 14px !important; font-weight: 600 !important; }
tr.bgcolor_008 > td { background: #f8f9fb !important; border-bottom: 1px solid var(--vr-borde); padding: 10px 8px !important; }
tr.bgcolor_008 > td, tr.bgcolor_008 > td a, tr.bgcolor_008 .liens, tr.bgcolor_008 strong {
  color: var(--vr-texto-2) !important; font-size: 11px !important; font-weight: 600 !important; text-decoration: none !important; letter-spacing: .03em;
}
table:has(> tbody > tr.bgcolor_008) > tbody > tr[bgcolor] { background: #fff !important; }
table:has(> tbody > tr.bgcolor_008) > tbody > tr[bgcolor]:hover { background: #f5f8ff !important; }
table:has(> tbody > tr.bgcolor_008) > tbody > tr[bgcolor] > td {
  border: 0 !important; border-bottom: 1px solid #eef0f3 !important; padding: 9px 8px !important;
  font-size: 12.5px !important; color: var(--vr-texto); font-variant-numeric: tabular-nums; vertical-align: middle !important;
}
/* Paginación bajo la tabla */
table:has(> tbody > tr > td.bgcolor_021) > tbody > tr > td.bgcolor_005 { background: #fff !important; padding: 10px 16px !important; }
table:has(> tbody > tr > td.bgcolor_021) td.bgcolor_005 .fontstyle_003 { color: var(--vr-texto-2) !important; font-size: 12.5px !important; font-weight: 500; }
table:has(> tbody > tr > td.bgcolor_021) td.bgcolor_005 img { display: none; }
/* Resumen de tráfico */
td[bgcolor="#000000"] { background: none !important; }
td[bgcolor="#000000"] > table { background: var(--vr-superficie); border: 1px solid var(--vr-borde); border-radius: 12px; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden; }
td.bgcolor_019, td.bgcolor_020, tr.bgcolor_019 > td { background: #f8f9fb !important; padding: 9px 10px !important; border-bottom: 1px solid var(--vr-borde); }
td.bgcolor_019 .fontstyle_003, td.bgcolor_020 .fontstyle_003, tr.bgcolor_019 .fontstyle_003 { color: var(--vr-texto-2) !important; font-size: 11px !important; font-weight: 600 !important; }
td.sidenav { background: #fff !important; padding: 8px 10px !important; }
font.fontstyle_006 { color: var(--vr-texto) !important; font-size: 12.5px !important; font-variant-numeric: tabular-nums; }
td[bgcolor="#e22424"] { background: var(--vr-acento) !important; border-radius: 3px; }
/* Historial del admin: el botón de lupa queda al lado de su campo */
table.bar-status td:has(> a[onclick*="window.open"]) { white-space: nowrap !important; }
table.bar-status td:has(> a[onclick*="window.open"]) input[type=text] { width: 150px !important; }

/* ── Barra superior del admin (Inicio · Dashboard · Notificación · Salir) ── */
#top_menu {
  position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
  margin: 12px 24px 18px 286px !important; padding: 6px 8px !important;
  background: var(--vr-superficie) !important; border: 1px solid var(--vr-borde); border-bottom: 1px solid var(--vr-borde) !important;
  border-radius: 12px; box-shadow: var(--vr-sombra);
}
ul#menu_horizontal { display: flex !important; align-items: center; gap: 4px; }
ul#menu_horizontal li, ul#menu_horizontal li.topmenu-left-button, ul#menu_horizontal li.topmenu-right-button {
  float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
ul#menu_horizontal li.topmenu-right-button { margin-left: auto !important; }
ul#menu_horizontal li > div { width: auto !important; height: auto !important; padding: 0 !important; }
ul#menu_horizontal li > div > a {
  display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 14px !important; border-radius: 8px;
  color: var(--vr-texto-2) !important; text-decoration: none !important; background: none !important;
}
ul#menu_horizontal li > div > a:hover { background: #f1f3f6 !important; color: var(--vr-texto) !important; }
ul#menu_horizontal li > div > a strong, ul#menu_horizontal li > div > a b { font-weight: 600 !important; font-size: 13px !important; text-transform: capitalize; }
ul#menu_horizontal li > div > a img { order: -1; width: 17px; height: 17px; opacity: 1 !important; }
ul#menu_horizontal img[src$="house.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E"); }
ul#menu_horizontal img[src$="chart_bar.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M8 16v-5M13 16V8M18 16v-9'/%3E%3C/svg%3E"); }
ul#menu_horizontal img[src$="email.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
ul#menu_horizontal img[src$="logout.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d92d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
/* "NEW" de notificaciones como etiqueta; el espacio vacío cuando no hay nuevas se oculta */
ul#menu_horizontal strong[style*="font-size:8px"] { display: none; }
ul#menu_horizontal strong[style*="color:red"] {
  display: inline-block !important; padding: 1px 7px; border-radius: 999px; background: #d92d20; color: #fff !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: none;
}
ul#menu_horizontal li.topmenu-right-button a font, ul#menu_horizontal li.topmenu-right-button a b { color: #d92d20 !important; }
ul#menu_horizontal li.topmenu-right-button > div > a:hover { background: #fef3f2 !important; }
@media (max-width: 900px) { #top_menu { margin-left: 16px !important; margin-right: 16px !important; } }
ul#menu_horizontal, ul#menu_horizontal li { list-style: none !important; }
/* Encabezados de tablas con texto directo en la celda (ej. notificaciones): se ven grises */
tr.form_head > td { color: var(--vr-texto-2) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em; }
/* Notificaciones: aviso nuevo resaltado y etiqueta "NEW" moderna */
tr.newrecord > td { font-weight: 600; background: #f5f8ff !important; }
tr.newrecord strong[style*="B00000"] { background: #d92d20 !important; color: #fff !important; border: 0 !important; border-radius: 999px; padding: 2px 6px; font-size: 10px !important; }
/* Notificaciones: ícono de enlace moderno */
tr[id] img[src$="/link.png"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  width: 14px; height: 14px; vertical-align: -2px !important;
}

/* ── Íconos de mostrar/ocultar (antes lupas viejas) ─────────────────────── */
/* Recuadro de ayuda: "×" redonda en la esquina para ocultarlo */
.msg_info { position: relative; padding-right: 44px !important; }
.msg_info a.hide_help {
  position: absolute; top: 8px; right: 8px; float: none !important;
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  text-decoration: none !important; transition: background-color .15s ease;
}
.msg_info a.hide_help:hover { background: rgba(31,95,214,.12); }
img[src$="toggle_hide2show_on.png"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184db0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  width: 14px !important; height: 14px !important;
}
/* Botones "Buscar cliente" / "Actualización por lotes": ícono de filtro */
img[src$="toggle_hide2show.png"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54L22 3z'/%3E%3C/svg%3E");
  width: 15px !important; height: 15px !important; opacity: 1 !important;
}

/* ── Pie con el aviso de licencia de A2Billing (AGPL 3: debe seguir visible) ──
   Se deja discreto: una línea pequeña, sin recuadro. */
#footer, #footer_index { margin: 28px auto 18px !important; text-align: center; }
#footer > div, #footer > div > div, #footer_index > div { border: 0 !important; background: none !important; padding: 0 !important; }
#footer, #footer *, #footer_index, #footer_index * { font-size: 10.5px !important; font-weight: 400 !important; color: #b0b7c3 !important; line-height: 1.5; }
#footer a, #footer_index a { text-decoration: none !important; }
#footer br, #footer_index br { display: none; }

/* ── Menú lateral del admin más ancho, flechas y cambio de contraseña ────── */
#left-sidebar { width: 262px !important; }
#left-sidebar #leftmenu-middle { margin: 0 4px 0 12px !important; padding: 10px 8px !important; }
#nav li a { font-size: 13px !important; padding: 8px 12px !important; }
#menutitlesection, #menutitlesection strong { font-size: 12.5px !important; }
.toggle_menu > div { display: flex; align-items: center; gap: 10px; padding: 9px 10px !important; }
/* flechas de abrir/cerrar sección: chevron moderno */
#menutitlebutton img[src$="plus.gif"], #menutitlebutton img[src$="minus.gif"] { width: 14px; height: 14px; opacity: .7 !important; transition: transform .15s ease; }
#menutitlebutton img[src$="plus.gif"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
#menutitlebutton img[src$="minus.gif"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fd6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); opacity: 1 !important; }
/* Cambiar contraseña: enlace con candado, separado del resto */
a.vr_cambiar_clave {
  display: flex !important; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px !important; border-top: 1px solid var(--vr-borde);
  color: var(--vr-texto-2) !important; font-size: 13px !important; font-weight: 500; text-decoration: none !important; border-radius: 0 0 8px 8px;
}
a.vr_cambiar_clave:hover { color: var(--vr-acento) !important; background: #f8f9fb; }
.vr_idiomas { margin-right: 4px !important; }
ul:has(> li > a.vr_cambiar_clave), ul:has(> li > a.vr_cambiar_clave) > li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* ── Cerrar sesión (portal de clientes): fila separada, ícono de salida y rojo suave ── */
#nav a[href^="logout.php"] {
  display: flex !important; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 12px !important;
  border-top: 1px solid var(--vr-borde); border-radius: 0 0 8px 8px; text-decoration: none !important;
}
#nav a[href^="logout.php"]:hover { background: #fef3f2 !important; }
#nav a[href^="logout.php"] font, #nav a[href^="logout.php"] strong { color: #d92d20 !important; font-weight: 600 !important; font-size: 13px !important; text-transform: none; }
#nav a[href^="logout.php"] img[src$="logout.png"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d92d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E");
  width: 16px; height: 16px; opacity: 1 !important;
}
#nav ul:has(> li > a[href^="logout.php"]), #nav ul:has(> li > a[href^="logout.php"]) > li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* ── Ficha del cliente (A2B_card_info.php) ──────────────────────────────── */
/* Título de cada tarjeta (th con colspan): a la izquierda, sin barra gris */
:is(table.editform_table1) th {
  background: none !important; background-image: none !important; text-align: left !important;
  padding: 14px 0 10px !important; border-bottom: 1px solid var(--vr-borde);
  font-size: 13.5px !important; font-weight: 600 !important; color: var(--vr-texto) !important; letter-spacing: .01em;
}
/* Títulos "Pagos recientes", "Recargas recientes", "Llamadas recientes" */
table.toppage_maintable { width: calc(100% - 32px) !important; margin: 22px auto 4px !important; background: none !important; border: 0 !important; }
table.toppage_maintable td { text-align: left !important; background: none !important; padding: 0 2px !important; height: auto !important; }
font.toppage_maintable_text { font-size: 15px !important; font-weight: 600 !important; color: var(--vr-texto) !important; }
font.toppage_maintable_text br { display: none; }
/* Botón "Lista de clientes" */
.cssbutton_big { text-decoration: none !important; }

/* VoipRed 5-nov-2026: la barra de idiomas del login va centrada debajo del recuadro
   (la regla ".vr_idiomas { margin-right: 4px !important }" la empujaba a la derecha). */
.vr_idiomas.vr_idiomas_login { margin: 18px auto 28px !important; max-width: 240px; }