/* Pantallas de carga (admin de Django) con el mismo estilo del panel */
:root {
  --primary: #10302e;
  --secondary: #0f8a7e;
  --accent: #ffd166;
  --primary-fg: #fff;
  --body-fg: #1f2937;
  --body-bg: #fff;
  --body-quiet-color: #6b7280;
  --body-loud-color: #111827;
  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: #10302e;
  --header-link-color: #fff;
  --breadcrumbs-fg: #6b7280;
  --breadcrumbs-link-fg: #0f8a7e;
  --breadcrumbs-bg: transparent;
  --link-fg: #0f8a7e;
  --link-hover-color: #0b6b62;
  --link-selected-fg: #0b6b62;
  --hairline-color: #eef0f4;
  --border-color: #e3e7ef;
  --error-fg: #b42334;
  --message-success-bg: #e6f7ec;
  --message-warning-bg: #fff4e6;
  --message-error-bg: #fdecee;
  --darkened-bg: #f8f9fb;
  --selected-bg: #e8f6f3;
  --selected-row: #f0faf8;
  --button-fg: #fff;
  --button-bg: #0f8a7e;
  --button-hover-bg: #0b6b62;
  --default-button-bg: #10302e;
  --default-button-hover-bg: #1d4b47;
  --close-button-bg: #6b7280;
  --close-button-hover-bg: #4b5563;
  --delete-button-bg: #dc3545;
  --delete-button-hover-bg: #b42334;
  --object-tools-fg: #fff;
  --object-tools-bg: #0f8a7e;
  --object-tools-hover-bg: #0b6b62;
  --font-family-primary: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
}

body { background: var(--fondo); font-size: 14px; }
body:has(.app-sidebar) #container { margin-left: var(--ancho-lateral); transition: margin .2s ease; }
body.menu-oculto:has(.app-sidebar) #container { margin-left: 0; }
#container { min-width: 0; }
#container > .app-topbar { width: auto; }

/* Migas de pan y títulos */
div.breadcrumbs { padding: 12px 22px 0; font-size: 12.5px; background: none; color: var(--texto-2); }
div.breadcrumbs a { color: var(--azul); }
#content { padding: 10px 22px 32px; background: none; }
#content h1 { font-size: 21px; font-weight: 600; color: var(--texto); margin: 4px 0 14px; }
#content h2 { font-size: 15px; }
#content-main, #changelist { min-width: 0; }

/* Tarjetas: listas, formularios y módulos */
.module, #changelist .changelist-form-container, fieldset.module, .inline-group {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); border: 0; margin-bottom: 16px;
}
.module h2, .module caption, .inline-group h2 {
  background: #fff; color: #374151; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
  padding: 11px 14px; border-bottom: 1px solid var(--borde);
}
.module caption a { color: #374151; }
#changelist, #changelist.module { display: flex; gap: 16px; align-items: flex-start; background: none; box-shadow: none; }
#changelist .changelist-form-container { flex: 1; min-width: 0; overflow: hidden; }
#changelist-filter { position: static; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); flex: 0 0 230px; }
#changelist-filter h2 { background: #fff; color: #374151; font-size: 13px; text-transform: none; border-bottom: 1px solid var(--borde); border-radius: var(--radio) var(--radio) 0 0; }
#changelist-filter h3 { font-size: 12px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .3px; }
#changelist-filter li.selected a { color: var(--azul); font-weight: 600; }
#toolbar { background: #fff; border-bottom: 1px solid var(--borde); padding: 10px 14px; }
#toolbar #searchbar { height: 32px; border: 1px solid var(--borde); border-radius: 16px; padding: 0 14px; min-width: 260px; }
#toolbar input[type=submit] { height: 32px; border-radius: 16px; padding: 0 14px; }
#changelist .actions { background: #f8f9fb; border-bottom: 1px solid var(--borde); padding: 8px 14px; color: var(--texto-2); }
#changelist .actions select { height: 30px; border-radius: 4px; border: 1px solid var(--borde); }
.paginator { padding: 10px 14px; border-top: 1px solid var(--borde); font-size: 12.5px; color: var(--texto-2); }

/* Tablas */
#result_list { width: 100%; }
#result_list thead th {
  background: #f8f9fb; color: #4b5563; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; border-bottom: 1px solid var(--borde); border-top: 0; padding: 9px 12px;
}
#result_list thead th a { color: #4b5563; }
#result_list td, #result_list th { padding: 8px 12px; border-bottom: 1px solid #f0f2f6; font-size: 13px; vertical-align: middle; }
#result_list tbody tr:hover { background: #f5fbfa; }
#result_list tbody tr.selected { background: var(--selected-row); }

/* Botones y campos */
.button, input[type=submit], input[type=button], .submit-row input, a.button { border-radius: 5px; font-weight: 600; }
.object-tools a { border-radius: 16px; padding: 5px 14px; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.object-tools a.addlink { background-image: none; padding-left: 14px; }
.object-tools a.addlink::before { content: "+ "; }
.submit-row { background: #fff; border: 0; border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio) var(--radio); box-shadow: var(--sombra); padding: 12px 14px; }
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel],
textarea, select, .vTextField { border: 1px solid #d5dbe6; border-radius: 4px; padding: 6px 8px; }
input:focus, textarea:focus, select:focus { border-color: #99d5cc; box-shadow: 0 0 0 3px rgba(15, 138, 126, .12); outline: none; }
.form-row { border-bottom: 1px solid #f0f2f6; padding: 10px 14px; }
fieldset .fieldset-heading, fieldset h2 { background: #fff; color: #374151; }
.errornote { border-radius: var(--radio); }
ul.messagelist li { border-radius: var(--radio); margin-bottom: 8px; box-shadow: var(--sombra); }

/* Pantalla de ingreso */
body.login { background: var(--lateral); display: grid; place-items: center; min-height: 100vh; }
body.login #container { width: 360px; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
body.login #header.app-login-header { background: #fff; color: var(--texto); justify-content: center; padding: 22px 16px 6px; }
body.login #branding { display: flex; align-items: center; gap: 8px; }
body.login .app-brand-texto { color: var(--lateral); }
body.login #content { padding: 14px 26px 26px; background: #fff; }
body.login .submit-row { box-shadow: none; border: 0; padding: 12px 0 0; }
body.login .submit-row input { width: 100%; height: 38px; }
body.login .form-row { border: 0; padding: 6px 0; }
body.login .form-row input { width: 100%; height: 36px; }

/* Arreglos de ancho y colores dentro del admin */
body:has(.app-sidebar) #container { width: auto; min-width: 0; }
.app-sidebar a:link, .app-sidebar a:visited { color: var(--lateral-texto); text-decoration: none; }
.app-sidebar a.app-submenu-link:link, .app-sidebar a.app-submenu-link:visited { color: #a9c9c3; }
.app-sidebar a.activo:link, .app-sidebar a.activo:visited,
.app-sidebar a.app-brand:link, .app-sidebar a.app-brand:visited,
.app-sidebar a:hover { color: #fff; }
.app-topbar a:link, .app-topbar a:visited { color: var(--texto); }
#changelist #toolbar form #searchbar { height: 32px; border-radius: 16px; padding: 0 14px; min-width: 280px; font-size: 13px; }
#changelist #toolbar form input[type=submit] { height: 32px; border-radius: 16px; padding: 0 16px; }

/* Impresora en el listado de órdenes de pago */
a.op-imprimir { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 6px; border-radius: 6px; color: var(--texto-2, #6b7280); vertical-align: middle; }
a.op-imprimir:hover { background: #edf2f1; color: #0f8a7e; }
a.op-imprimir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Panel de filtros en el admin */
body.con-filtros:has(.app-sidebar) #container { margin-left: calc(var(--ancho-lateral) + var(--ancho-filtros)); }
body.con-filtros.menu-oculto:has(.app-sidebar) #container { margin-left: var(--ancho-filtros); }
.app-filtros ul li a { color: var(--texto) !important; }
.app-filtros ul li.selected a { color: #0b5e53 !important; }
@media (max-width: 860px) { body.con-filtros:has(.app-sidebar) #container { margin-left: 0; } }
body.login #branding { display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.login .app-login-logo { height: 70px; width: auto; }

/* Consultar ARCA en la ficha del proveedor */
.arca-consulta { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.arca-consulta .boton { height: 30px; padding: 0 12px; }
.arca-consulta .boton[disabled] { opacity: .6; }
.arca-msg:empty { display: none; }
.arca-msg { margin: 8px 0 2px; padding: 8px 12px; border-radius: 6px; font-size: 13px; border: 1px solid; max-width: 640px; }
.arca-info { background: #eef4ff; border-color: #c9d8f7; color: #1d4ed8; }
.arca-ok { background: #e8f6f3; border-color: #b6e2d9; color: #0b5e53; }
.arca-alerta { background: #fff4e6; border-color: #fed7aa; color: #9a3412; }
.arca-error { background: #fdecee; border-color: #f5c2c7; color: #b42334; }
@keyframes arca-destello { from { background: #d7f3ec; } to { background: #fff; } }
.arca-completado { animation: arca-destello 1.6s ease-out; }

/* Registros por página */
.paginacion-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.paginacion-barra .paginator { flex: 1; }
.por-pagina { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--texto-2); padding: 6px 0; }
.por-pagina a { display: inline-block; min-width: 30px; text-align: center; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--borde); color: var(--texto) !important; background: #fff; }
.por-pagina a:hover { background: var(--fondo); text-decoration: none; }
.por-pagina a.actual { background: var(--azul); border-color: var(--azul); color: #fff !important; font-weight: 700; }