/* ==========================================================================
   FrogyTV — tema del panel de distribuidores
   Se carga DESPUÉS de bootstrap.min.css y main.css; sólo cambia la estética.
   Paleta tomada del logo: rana verde sobre fondo amarillo sol.
   ========================================================================== */

/* Tipografías locales (no dependen de Google Fonts) */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/frogy/fredoka-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/frogy/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/frogy/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/frogy/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/frogy/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/frogy/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/frogy/nunito-latin-800-normal.woff2") format("woff2"); }

:root {
	--pond:      #0F2420;   /* fondo de página */
	--pond-2:    #12302A;   /* sidebar / cabeceras de tabla */
	--lily:      #173A33;   /* tarjetas */
	--lily-2:    #1D463E;   /* controles */
	--reed:      #2A5A4F;   /* bordes */
	--reed-2:    #3A7564;   /* bordes hover */
	--frog:      #7AC943;   /* verde de marca */
	--frog-lt:   #A6E07A;   /* enlaces */
	--frog-ink:  #1C3A10;   /* texto sobre amarillo */
	--sun:       #FFC72C;   /* acción principal */
	--sun-deep:  #F5A623;
	--ember:     #F28C28;
	--berry:     #F2545B;
	--sky:       #4FB3E8;
	--text:      #EAF4EC;
	--muted:     #A3C1B6;
	--dim:       #6F9186;

	--r-card: 18px;
	--r-ctl:  12px;
	--side-w: 264px;
	--top-h:  68px;
	--gutter: 32px;

	--f-display: "Fredoka", "Baloo 2", "Nunito", system-ui, sans-serif;
	--f-body:    "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------------------------------------------------------- */
html, body { height: auto; min-height: 100%; }

body {
	background-color: var(--pond);
	background-image:
		radial-gradient(900px 520px at 100% -10%, rgba(122, 201, 67, .10), transparent 60%),
		radial-gradient(700px 480px at -10% 110%, rgba(255, 199, 44, .06), transparent 60%);
	background-attachment: fixed;
	color: var(--text);
	font-family: var(--f-body);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--text); letter-spacing: 0; }
h5, h6 { font-family: var(--f-body); color: var(--text); font-weight: 700; }
label, .control-label { color: var(--muted); font-weight: 600; }
p { color: var(--text); }
hr { border-top-color: var(--reed); }
center { text-align: inherit; }

a { color: var(--frog-lt); }
a:hover, a:focus { color: var(--sun); text-decoration: none; }

::selection { background: var(--sun); color: var(--frog-ink); }

:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--reed); border-radius: 10px; border: 2px solid var(--pond); }
::-webkit-scrollbar-track { background: transparent; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Estructura (topbar fija + sidebar fija + contenido) ------------ */
.wrapper { margin: 0; min-height: 0; height: auto !important; }
.push-sticky-footer { display: none; }

.bottom {
	padding: calc(var(--top-h) + 28px) var(--gutter) 8px calc(var(--side-w) + var(--gutter));
	min-height: calc(100vh - 56px);
}
.bottom > .container {
	width: auto;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
}
.bottom > .container > .row { margin: 0; }
.bottom .content-wrapper {
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	min-height: 0;
}
.bottom .content { padding: 0; margin: 0; background: transparent; border: 0; min-height: 0; }
.bottom .main-content { padding: 0; }

/* ---------- Topbar -------------------------------------------------------- */
.fg-topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1030;
	height: var(--top-h);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 var(--gutter) 0 20px;
	background-color: var(--sun);
	background-image:
		radial-gradient(260px 120px at 150px 50%, rgba(255, 240, 170, .75), transparent 70%),
		linear-gradient(180deg, #FFD13F 0%, var(--sun) 55%, var(--sun-deep) 100%);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 10px 24px -14px rgba(0, 0, 0, .7);
}
.fg-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	color: var(--frog-ink);
	text-decoration: none;
}
.fg-brand:hover, .fg-brand:focus { color: var(--frog-ink); }
.fg-brand img { height: 50px; width: auto; display: block; filter: drop-shadow(0 2px 2px rgba(80, 40, 0, .25)); }
.fg-brand-tag {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.15;
	padding-left: 14px;
	border-left: 2px solid rgba(28, 58, 16, .25);
}
.fg-topbar-spacer { flex: 1; }

.fg-nav-toggle {
	display: none;
	width: 42px; height: 42px;
	border: 0;
	border-radius: 12px;
	background: rgba(28, 58, 16, .12);
	color: var(--frog-ink);
	font-size: 18px;
	align-items: center; justify-content: center;
	cursor: pointer;
}
.fg-nav-toggle:hover { background: rgba(28, 58, 16, .2); }

.fg-user > .btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 12px 5px 5px;
	border-radius: 999px;
	border: 0;
	background: rgba(28, 58, 16, .12);
	color: var(--frog-ink);
	font-weight: 700;
	box-shadow: none;
}
.fg-user > .btn:hover, .fg-user.open > .btn { background: rgba(28, 58, 16, .2); color: var(--frog-ink); }
.fg-user .fg-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--frog);
	color: var(--frog-ink);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--f-display);
	font-size: 16px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.fg-user .caret { border-top-color: var(--frog-ink); margin-left: 2px; }
.fg-user .dropdown-menu { right: 0; left: auto; margin-top: 10px; }

/* ---------- Sidebar ------------------------------------------------------- */
.fg-sidebar {
	position: fixed;
	top: var(--top-h); bottom: 0; left: 0;
	z-index: 1020;
	width: var(--side-w);
	padding: 18px 14px 28px;
	overflow-y: auto;
	background: var(--pond-2);
	border-right: 1px solid var(--reed);
	float: none;
	min-height: 0;
}
.fg-nav, .fg-nav ul { list-style: none; margin: 0; padding: 0; }
.fg-nav-group + .fg-nav-group { margin-top: 18px; }
.fg-nav-title {
	display: block;
	padding: 0 12px 6px;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 13px;
	color: var(--dim);
}
.fg-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 10px;
	margin: 1px 0;
	border-radius: 12px;
	color: var(--muted);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.fg-nav a .fa {
	flex: 0 0 30px;
	width: 30px; height: 30px;
	border-radius: 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .04);
	color: var(--frog);
	font-size: 14px;
	transition: inherit;
}
.fg-nav a:hover { background: var(--lily); color: var(--text); }
.fg-nav a.is-active {
	background: var(--sun);
	color: var(--frog-ink);
	font-weight: 800;
}
.fg-nav a.is-active .fa { background: rgba(28, 58, 16, .14); color: var(--frog-ink); }

.fg-backdrop { display: none; }

/* ---------- Encabezado de página ----------------------------------------- */
.main-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 16px;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	text-align: left;
}
.main-header center { display: contents; }
.main-header h2 {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.15;
	color: var(--text);
}
.main-header em {
	font-style: normal;
	font-size: 15px;
	color: var(--muted);
	border: 0;
	padding: 0;
	margin: 0;
	top: 0;
}
.main-header em::first-letter { text-transform: uppercase; }

/* ---------- Tarjetas (widgets) ------------------------------------------- */
.widget {
	background: var(--lily);
	border: 1px solid var(--reed);
	border-radius: var(--r-card);
	margin-bottom: 24px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 32px -24px rgba(0, 0, 0, .8);
	overflow: visible;
}
.widget .widget,
.widget.widget-table .widget {
	background: transparent;
	border: 0;
	box-shadow: none;
	margin: 0;
	border-radius: 0;
}
.widget.widget-table { border-color: var(--reed); }

.widget .widget-header {
	display: flex;
	align-items: center;
	gap: 10px;
	height: auto;
	min-height: 0;
	padding: 16px 22px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--reed);
	border-radius: var(--r-card) var(--r-card) 0 0;
}
.widget .widget-header h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	float: none;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	color: var(--text);
}
.widget .widget-header h3 .fa,
.widget .widget-header .fa {
	width: 30px; height: 30px;
	border-radius: 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 199, 44, .14);
	color: var(--sun);
	font-size: 14px;
}
.widget .widget-content {
	padding: 22px;
	background: transparent;
	border: 0;
}
.widget .widget .widget-content { padding: 22px; }
.widget-content::after { content: ""; display: table; clear: both; }

/* Las tablas con muchas columnas hacen scroll dentro de la tarjeta, no la página */
.widget-content:has(> table),
.widget-content:has(> .table) { overflow-x: auto; }

/* Los <br> sueltos que separaban bloques se sustituyen por espaciado real */
.widget-content > br,
.widget-content > form > br,
.widget > br,
.widget .widget > br,
.main-content > br { display: none; }

/* Botones "Agregar …" centrados que quedaban colgando entre cabecera y tabla */
.widget > .col-sm-12,
.widget .widget > .col-sm-12 {
	float: none;
	width: auto;
	padding: 18px 22px 0;
	text-align: center;
}
.widget .widget > .col-sm-12 + .widget-content { padding-top: 18px; }
.widget .widget > .widget-content + .col-sm-12 { padding: 0 22px 22px; }

/* ---------- Formularios -------------------------------------------------- */
.form-group { display: flow-root; margin: 0 0 14px; }
.form-group > [class*="col-sm-"] { padding-left: 0; padding-right: 0; }
.form-horizontal .form-group { margin-left: 0; margin-right: 0; }

.form-control,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="tel"] {
	height: auto;
	min-height: 44px;
	padding: 10px 14px;
	background-color: var(--lily-2);
	border: 1px solid var(--reed);
	border-radius: var(--r-ctl);
	color: var(--text);
	font-family: var(--f-body);
	font-size: 14px;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
textarea, textarea.form-control { min-height: 110px; line-height: 1.5; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
.form-control:hover, select:hover, textarea:hover, input[type="text"]:hover { border-color: var(--reed-2); }
.form-control:focus, select:focus, textarea:focus, input:focus {
	outline: none;
	border-color: var(--sun);
	box-shadow: 0 0 0 3px rgba(255, 199, 44, .22);
}
.form-control[readonly], .form-control[disabled], input[readonly], input[disabled], select[disabled] {
	background-color: rgba(0, 0, 0, .18);
	color: var(--muted);
	cursor: default;
}

select, select.form-control, select.bootstrap-select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFC72C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
	max-width: 100%;
}
select[multiple] { background-image: none; padding-right: 14px; }
option, optgroup { background: var(--lily); color: var(--text); }
select.bootstrap-select { width: 100%; }

input[type="file"] {
	color: var(--muted);
	padding: 7px 10px;
	min-height: 44px;
	background: var(--lily-2);
	border: 1px dashed var(--reed-2);
	border-radius: var(--r-ctl);
	width: 100%;
}
input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--reed);
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--frog); }

/* Campo = etiqueta + control + icono, unidos en una sola pieza */
.input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
	border-radius: var(--r-ctl);
}
.input-group > .input-group-addon {
	display: flex;
	align-items: center;
	width: auto;
	white-space: normal;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--muted);
	background: var(--pond-2);
	border: 1px solid var(--reed);
	border-radius: 0;
	text-align: left;
}
.input-group > .input-group-addon:first-child {
	flex: 0 0 210px;
	border-radius: var(--r-ctl) 0 0 var(--r-ctl);
	border-right: 0;
}
.input-group > .input-group-addon:last-child {
	flex: 0 0 46px;
	justify-content: center;
	border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
	border-left: 0;
	color: var(--dim);
	padding: 8px 0;
}
.input-group > .input-group-addon:only-child { border-radius: var(--r-ctl); border: 1px solid var(--reed); }
/* addon vacío (login viejo, etc.) */
.input-group > .input-group-addon:empty { display: none; }

.input-group > :not(.input-group-addon):not(.input-group-btn) {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	float: none;
	border-radius: 0;
	margin: 0;
}
.input-group > :not(.input-group-addon):first-child { border-top-left-radius: var(--r-ctl); border-bottom-left-radius: var(--r-ctl); }
.input-group > :not(.input-group-addon):last-child { border-top-right-radius: var(--r-ctl); border-bottom-right-radius: var(--r-ctl); }
.input-group > img,
.input-group > a,
.input-group > div:not([class]) { flex: 0 1 auto !important; }
.input-group > img {
	max-height: 220px;
	width: auto;
	object-fit: contain;
	padding: 8px;
	background: var(--lily-2);
	border: 1px solid var(--reed);
	border-left: 0;
}
.input-group .form-control:focus { position: relative; z-index: 2; }

.input-group-btn > .btn { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; height: 100%; }

/* ---------- Botones ------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 13.5px;
	line-height: 1.2;
	white-space: nowrap;
	text-shadow: none;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); box-shadow: none; }
input.btn { display: inline-block; }
.btn-lg { min-height: 50px; padding: 12px 26px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }

.btn-primary,
.btn-custom-primary,
.btn-success {
	background: var(--sun);
	border-color: var(--sun);
	color: var(--frog-ink);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-custom-primary:hover, .btn-custom-primary:focus,
.btn-success:hover, .btn-success:focus {
	background: #FFD45C;
	border-color: #FFD45C;
	color: var(--frog-ink);
}
.btn-success { background: var(--frog); border-color: var(--frog); }
.btn-success:hover, .btn-success:focus { background: var(--frog-lt); border-color: var(--frog-lt); }

.btn-danger {
	background: rgba(242, 84, 91, .08);
	border-color: rgba(242, 84, 91, .55);
	color: #FF8A8F;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
	background: var(--berry);
	border-color: var(--berry);
	color: #fff;
}
.btn-default, .btn-info, .btn-warning, .btn-link:not(.dropdown-toggle) {
	background: transparent;
	border-color: var(--reed-2);
	color: var(--text);
}
.btn-default:hover, .btn-info:hover, .btn-warning:hover { background: var(--lily-2); border-color: var(--frog); color: var(--text); }
.btn-warning { border-color: rgba(242, 140, 40, .6); color: #FFB067; }

/* ---------- Tablas ------------------------------------------------------- */
.table {
	width: 100%;
	margin: 0;
	background: transparent;
	color: var(--text);
	border-collapse: separate;
	border-spacing: 0;
}
table.table { display: table; }
.table > thead > tr > th,
.table > thead > tr > td {
	padding: 12px 14px;
	background: var(--pond-2);
	border: 0;
	border-bottom: 1px solid var(--reed);
	color: var(--muted);
	font-family: var(--f-body);
	font-weight: 800;
	font-size: 12.5px;
	line-height: 1.3;
	vertical-align: bottom;
	white-space: nowrap;
}
.table > thead > tr > th:first-child { border-top-left-radius: var(--r-ctl); }
.table > thead > tr > th:last-child  { border-top-right-radius: var(--r-ctl); }
.table > tbody > tr > td,
.table > tbody > tr > th {
	padding: 12px 14px;
	border-top: 0;
	border-bottom: 1px solid rgba(42, 90, 79, .55);
	color: var(--text);
	vertical-align: middle;
	background: transparent;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th { background-color: rgba(255, 255, 255, .018); }
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th { background-color: rgba(122, 201, 67, .06); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table td a { font-weight: 700; }
.table td form { display: inline-block; margin: 2px 0; }
.table td .btn { min-height: 34px; padding: 6px 14px; font-size: 12.5px; }
.table td img { max-height: 90px; border-radius: 8px; }

.fg-status { font-weight: 800; white-space: nowrap; }
.fg-status::before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	margin-right: 7px;
	border-radius: 50%;
	vertical-align: 1px;
	background: currentColor;
}
.fg-status-ok  { color: var(--frog); }
.fg-status-bad { color: #FF8A8F; }

/* ---------- Paginación --------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.pagination > li > a,
.pagination > li > span {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	margin: 0;
	border: 1px solid var(--reed);
	border-radius: 10px !important;
	background: transparent;
	color: var(--muted);
	font-weight: 700;
}
.pagination > li > a:hover { background: var(--lily-2); color: var(--text); border-color: var(--reed-2); }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
	background: var(--sun);
	border-color: var(--sun);
	color: var(--frog-ink);
}

/* ---------- Avisos ------------------------------------------------------- */
.alert,
.alert-successful,
.alert-down {
	position: relative;
	padding: 16px 20px 16px 22px;
	margin-bottom: 14px;
	border-radius: 14px;
	border: 1px solid rgba(242, 84, 91, .35);
	background: rgba(242, 84, 91, .10);
	color: var(--text);
	box-shadow: inset 4px 0 0 var(--berry);
	text-align: left;
}
.alert strong { color: #FF9A9E; }
.alert-successful, .alert.alert-successful, .alert-success {
	border-color: rgba(122, 201, 67, .35);
	background: rgba(122, 201, 67, .10);
	box-shadow: inset 4px 0 0 var(--frog);
}
.alert-successful strong, .alert-success strong { color: var(--frog-lt); }
.alert-down, .alert-warning {
	border-color: rgba(255, 199, 44, .35);
	background: rgba(255, 199, 44, .09);
	box-shadow: inset 4px 0 0 var(--sun);
}
.alert-down strong, .alert-warning strong { color: var(--sun); }
.alert-info {
	border-color: rgba(79, 179, 232, .35);
	background: rgba(79, 179, 232, .10);
	box-shadow: inset 4px 0 0 var(--sky);
}
.alert-info strong { color: #8ED0F4; }
.alert-danger { /* = .alert por defecto */ }
.alert .close, .alert .closebtn {
	float: right;
	margin-left: 14px;
	color: var(--muted);
	opacity: 1;
	text-shadow: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.alert .close:hover, .alert .closebtn:hover { color: var(--text); }
.alert a { color: var(--sun); font-weight: 700; }

.link, .link-wh { color: var(--text); font-weight: 700; }
.link:hover { color: var(--sun); }
.link-wh:hover { color: var(--frog-lt); }

/* ---------- Varios ------------------------------------------------------- */
.badge {
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 12.5px;
	background: var(--reed);
	color: var(--text);
}
.element-bg-color-seagreen { background: rgba(122, 201, 67, .18) !important; color: var(--frog-lt) !important; }
.element-bg-color-orange   { background: rgba(255, 199, 44, .18) !important; color: var(--sun) !important; }
.element-bg-color-red      { background: rgba(242, 84, 91, .18) !important; color: #FF9A9E !important; }

.list-group-item {
	background: var(--lily-2);
	border-color: var(--reed);
	color: var(--text);
}
.list-group-item:first-child { border-radius: var(--r-ctl) var(--r-ctl) 0 0; }
.list-group-item:last-child  { border-radius: 0 0 var(--r-ctl) var(--r-ctl); }

.upload-drop-zone {
	border: 2px dashed var(--reed-2);
	border-radius: var(--r-card);
	background: rgba(0, 0, 0, .12);
	color: var(--muted);
}
.upload-drop-zone.drop { border-color: var(--sun); color: var(--sun); background: rgba(255, 199, 44, .06); }

.widget-content img:not(.fg-avatar) { max-width: 100%; height: auto; border-radius: 10px; }

.dropdown-menu {
	padding: 6px;
	background: var(--lily);
	border: 1px solid var(--reed);
	border-radius: 14px;
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .8);
}
.dropdown-menu > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--text);
	font-weight: 600;
}
.dropdown-menu > li > a .fa { color: var(--frog); width: 16px; text-align: center; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--lily-2); color: var(--text); }

.modal-content { background: var(--lily); border: 1px solid var(--reed); border-radius: var(--r-card); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--reed); }
.close { color: var(--muted); text-shadow: none; opacity: .9; }

.loader { border-color: var(--lily-2); border-top-color: var(--sun); }

.datepicker, .daterangepicker { background: var(--lily); color: var(--text); border-color: var(--reed); }
.select2-container .select2-choice, .select2-drop { background: var(--lily-2); color: var(--text); border-color: var(--reed); }

/* ---------- Footer ------------------------------------------------------- */
.footer.fg-footer {
	position: static;
	height: auto;
	padding: 22px var(--gutter) 26px calc(var(--side-w) + var(--gutter));
	background: transparent;
	border: 0;
	color: var(--dim);
	font-size: 12.5px;
	text-align: center;
}
.full-page-wrapper ~ .footer.fg-footer,
.page-auth ~ .footer.fg-footer { padding-left: var(--gutter); }

/* ---------- Login y páginas de aviso (sin sidebar) ----------------------- */
.full-page-wrapper {
	min-height: calc(100vh - 70px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px 0;
}
.full-page-wrapper .inner-page {
	width: 100%;
	max-width: 440px;
	padding: 0;
	margin: 0 auto;
}
.full-page-wrapper .logo { margin: 0 auto 22px; text-align: center; }
.full-page-wrapper .logo img { display: inline-block; }
.full-page-wrapper .logo:empty {
	width: 92px; height: 92px;
	border-radius: 26px;
	background: url("../img/frogy/frogy-mark.png") center / cover no-repeat;
	box-shadow: 0 0 0 4px rgba(255, 199, 44, .18), 0 18px 34px -18px rgba(0, 0, 0, .9);
}
.full-page-wrapper .login-box,
.full-page-wrapper .register-box {
	width: 100%;
	max-width: 440px;
	padding: 28px;
	margin: 0 auto;
	background: var(--lily);
	border: 1px solid var(--reed);
	border-radius: 22px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
	text-align: left;
}
.full-page-wrapper .login-box .title {
	margin: 0 0 18px;
	font-family: var(--f-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--text);
}
.full-page-wrapper .login-box .alert { margin-bottom: 18px; }
.full-page-wrapper .login-box a:not(.btn) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--frog-lt);
}
.full-page-wrapper .login-box a:not(.btn):hover { color: var(--sun); }
.full-page-wrapper .login-box center { display: block; text-align: center; }

/* Login FrogyTV */
.fg-login-logo {
	width: 168px;
	height: 168px;
	border-radius: 40px;
	display: block;
	margin: 0 auto;
	box-shadow: 0 0 0 6px rgba(255, 199, 44, .14), 0 26px 50px -20px rgba(0, 0, 0, .9);
}
.fg-login-sub { margin: -10px 0 22px; color: var(--muted); }
.fg-field { margin-bottom: 14px; }
.fg-field label { display: block; margin-bottom: 6px; font-size: 13px; }
.fg-field .form-control { width: 100%; min-height: 48px; }

/* ---------- Principal (index) -------------------------------------------- */
.fg-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 24px;
}
.fg-stat {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 24px;
	background: var(--lily);
	border: 1px solid var(--reed);
	border-radius: var(--r-card);
}
.fg-stat-icon {
	flex: 0 0 56px;
	width: 56px; height: 56px;
	border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	background: rgba(255, 199, 44, .14);
	color: var(--sun);
}
.fg-stat-demo .fg-stat-icon { background: rgba(122, 201, 67, .14); color: var(--frog); }
.fg-stat-value {
	display: block;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 38px;
	line-height: 1;
	color: var(--text);
}
.fg-stat-label { display: block; margin-top: 6px; color: var(--muted); font-weight: 600; }
.fg-stat.is-empty .fg-stat-value { color: #FF8A8F; }

.fg-section-title {
	margin: 30px 0 14px;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 20px;
	color: var(--text);
}

.fg-apps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.fg-app {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px;
	background: var(--lily);
	border: 1px solid var(--reed);
	border-radius: var(--r-card);
}
.fg-app img {
	flex: 0 0 auto;
	width: 96px; height: 96px;
	border-radius: 22px;
	object-fit: cover;
}
.fg-app-body { flex: 1; min-width: 0; }
.fg-app-body h4 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.fg-app-body p { margin: 0 0 12px; color: var(--muted); }
.fg-app-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-app-actions .btn { min-height: 36px; padding: 6px 16px; }
.btn-whatsapp { background: transparent; border-color: rgba(122, 201, 67, .6); color: var(--frog-lt); }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: var(--frog); border-color: var(--frog); color: var(--frog-ink); }

/* Filtro de clientes: botón Buscar */
.fg-search { width: 100%; }

/* ---------- Responsivo --------------------------------------------------- */
@media (max-width: 1199px) {
	:root { --gutter: 24px; --side-w: 240px; }
	.input-group > .input-group-addon:first-child { flex-basis: 180px; }
}

@media (max-width: 991px) {
	:root { --gutter: 16px; }
	.fg-nav-toggle { display: inline-flex; }
	.fg-topbar { padding: 0 16px 0 12px; gap: 10px; }
	.fg-brand-tag { display: none; }
	.fg-sidebar {
		width: 280px;
		transform: translateX(-100%);
		transition: transform .25s ease;
		box-shadow: 20px 0 40px -20px rgba(0, 0, 0, .9);
	}
	body.fg-nav-open .fg-sidebar { transform: none; }
	body.fg-nav-open .fg-backdrop {
		display: block;
		position: fixed;
		inset: var(--top-h) 0 0 0;
		z-index: 1010;
		background: rgba(5, 15, 13, .6);
	}
	.bottom { padding: calc(var(--top-h) + 20px) var(--gutter) 8px; }
	.footer.fg-footer { padding-left: var(--gutter); }
	.fg-user .fg-user-name { display: none; }
}

@media (max-width: 767px) {
	.main-header h2 { font-size: 24px; }
	.widget .widget-header { padding: 14px 16px; }
	.widget .widget-content, .widget .widget .widget-content { padding: 16px; }
	.fg-stats, .fg-apps { grid-template-columns: 1fr; }
	.fg-stat-value { font-size: 32px; }
	.widget-content [class*="col-sm-"] { margin-bottom: 8px; }

	.input-group { flex-wrap: wrap; }
	.input-group > .input-group-addon:first-child {
		flex: 1 0 100%;
		border-radius: var(--r-ctl) var(--r-ctl) 0 0;
		border-right: 1px solid var(--reed);
		border-bottom: 0;
		padding: 8px 14px;
	}
	.input-group > .input-group-addon:first-child + :not(.input-group-addon) { border-radius: 0 0 0 var(--r-ctl); }
	.input-group > .input-group-addon:first-child + :not(.input-group-addon):last-child { border-radius: 0 0 var(--r-ctl) var(--r-ctl); }
	.input-group > .input-group-addon:last-child:not(:first-child) { border-radius: 0 0 var(--r-ctl) 0; }
	.input-group > img { border-left: 1px solid var(--reed); }
	.fg-app img { width: 76px; height: 76px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation-duration: .01ms !important; }
}

/* ---------- Ajustes de filtros ------------------------------------------- */
.widget-content h5 {
	margin: 12px 0 6px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.35;
}
.widget-content .row + .row { margin-top: 12px; }
.fg-filter-btn { margin-top: 4px; }
.table > tbody > tr > td:first-child { min-width: 140px; }

/* ---------- Normalización de layouts heredados -------------------------- */
/* Formularios que venían a media pantalla y desplazados (col-sm-1 + col-sm-6): ahora todos a lo ancho */
.bottom .content > .main-content[class*="col-"] { float: none; width: auto; padding: 0; margin: 0; }
.bottom .content > [class*="col-sm-1"]:not(.main-content):not(:has(*)) { display: none; }

/* Catálogos donde la tabla quedó dentro de la cabecera de la tarjeta */
.widget .widget-header:has(> .widget-content) {
	display: block;
	padding: 0;
	border-bottom: 0;
}
.widget .widget-header:has(> .widget-content) > center,
.widget .widget-header:has(> .widget-content) > h3 {
	display: block;
	padding: 16px 22px;
	margin: 0;
	border-bottom: 1px solid var(--reed);
}
.widget .widget-header:has(> .widget-content) > center > h3 { margin: 0; }
.widget .widget-header > .col-sm-12 {
	float: none;
	width: auto;
	padding: 0 22px 22px;
	text-align: center;
}

/* Casillas que venían con class="form-control" */
input[type="checkbox"].form-control,
input[type="radio"].form-control,
.input-group > input[type="checkbox"],
.input-group > input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px;
	min-height: 0;
	padding: 0;
	margin: 0 8px 0 16px !important;
	align-self: center;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}
.input-group:has(> input[type="checkbox"]),
.input-group:has(> input[type="radio"]) {
	align-items: center;
	flex-wrap: wrap;
	row-gap: 6px;
	min-height: 44px;
	background: var(--lily-2);
	box-shadow: inset 0 0 0 1px var(--reed);
	color: var(--text);
	font-weight: 600;
}
.input-group:has(> input[type="checkbox"]) > .input-group-addon,
.input-group:has(> input[type="radio"]) > .input-group-addon { align-self: stretch; }
.input-group:has(> input[type="checkbox"]) > .input-group-addon:last-child,
.input-group:has(> input[type="radio"]) > .input-group-addon:last-child { margin-left: auto; }