@charset "UTF-8";
/* ============================================================================
   dk-ui.css  -  Hoja de estilos comun de las aplicaciones de gestion DogKing
   Creada 31/08/2026. Lenguaje visual extraido de /agenda2/default.asp.

   REGLA DE ORO (no romper nunca):
   Este fichero se enlaza desde /moduls_asp/head_comun.asp, que incluyen ~87
   paginas. Por eso NO contiene ni un solo selector de elemento (nada de
   "table{}", "input{}", "button{}"): SOLO variables en :root y clases
   prefijadas con .dk-. Asi cargarlo no cambia el aspecto de ninguna pagina
   existente; cada pagina adopta el estilo cuando anade las clases a mano.

   Si alguna vez anades aqui un selector de elemento, restilaras de golpe
   toda la gestion (Cobros, Reimpresion, MA, MF, agendas...). No lo hagas.

   SEGUNDA REGLA (01/09/2026): antes de crear una clase, comprueba que el nombre
   no exista ya en otra pagina. El prefijo .dk- no basta: .dk-fila-h (aqui una
   utilidad flex) choco con la fila HEMBRA del cuadro de precios de Facturacion
   y le apilo las celdas en vertical. Ahora se llama .dk-fila-horiz.
   Comprobacion rapida antes de anadir una clase nueva (desde la raiz del sitio):
     grep -rEoh "\.dk-[a-zA-Z0-9_-]+" --include=*.asp . | sort -u
   Al 01/09/2026 hay 36 nombres .dk- privados de paginas (Facturacion, galeria,
   Cachorros_Disponibles, Socializacion_Cachorros, Contratos): no los pises.
   ========================================================================= */

:root{
	--dk-ground:#F4F7F9;      /* fondo de pagina            */
	--dk-panel:#FFFFFF;       /* fondo de tarjetas          */
	--dk-ink:#1C2830;         /* texto principal            */
	--dk-muted:#5B6B76;       /* texto secundario           */
	--dk-line:#DCE4E9;        /* bordes                     */
	--dk-line-soft:#E9EFF3;   /* separadores y hover        */
	--dk-accent:#0E7AC8;      /* azul de accion             */
	--dk-ok:#18A041;          /* verde correcto             */
	--dk-danger:#C93B3B;      /* rojo error                 */
	--dk-warn:#A04A00;        /* ambar aviso                */
	--dk-warn-bg:#FDE3B0;
	--dk-sombra:0 1px 3px rgba(28,40,48,.08), 0 4px 14px rgba(28,40,48,.06);
	--dk-radio:8px;
	--dk-fuente:14px/1.5 "Segoe UI", system-ui, sans-serif;
}

/* --- Contenedores ------------------------------------------------------- */
.dk{ font:var(--dk-fuente); color:var(--dk-ink); }
.dk-app{
	background:var(--dk-panel); border:1px solid var(--dk-line);
	border-radius:12px; box-shadow:var(--dk-sombra); overflow:hidden;
}
.dk-toolbar{
	display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	padding:10px 14px; border-bottom:1px solid var(--dk-line);
}
.dk-card{
	background:var(--dk-panel); border:1px solid var(--dk-line);
	border-radius:12px; box-shadow:var(--dk-sombra); overflow:hidden;
	margin-bottom:14px;
}
.dk-card-cab{
	display:flex; justify-content:space-between; align-items:center;
	background:var(--dk-accent); color:#fff; font-weight:700; font-size:14.5px;
	padding:8px 14px;
}
.dk-card-cuerpo{ padding:14px; }

/* --- Botones ----------------------------------------------------------- */
.dk-btn{
	background:var(--dk-panel); border:1px solid var(--dk-line);
	border-radius:var(--dk-radio); padding:5px 12px; font:var(--dk-fuente);
	font-size:13.5px; color:var(--dk-ink); text-decoration:none;
	display:inline-block; cursor:pointer;
	margin:3px;              /* que nunca se toquen entre si */
}
.dk-btn:hover{ border-color:var(--dk-accent); color:var(--dk-accent); }
.dk-btn:focus-visible{ outline:2px solid var(--dk-accent); outline-offset:2px; }
.dk-btn[disabled], .dk-btn.dk-off{ opacity:.5; pointer-events:none; }

.dk-btn-primary{ background:var(--dk-accent); border-color:var(--dk-accent); color:#fff; }
.dk-btn-primary:hover{ filter:brightness(1.08); color:#fff; border-color:var(--dk-accent); }
.dk-btn-ok{ background:var(--dk-ok); border-color:var(--dk-ok); color:#fff; }
.dk-btn-ok:hover{ filter:brightness(1.08); color:#fff; }
.dk-btn-danger{ background:var(--dk-danger); border-color:var(--dk-danger); color:#fff; }
.dk-btn-danger:hover{ filter:brightness(1.08); color:#fff; }

/* --- Formularios -------------------------------------------------------- */
.dk-campo{ display:flex; flex-direction:column; gap:4px; }
.dk-label{ font-size:12.5px; font-weight:600; color:var(--dk-muted); }
.dk-input, .dk-select, .dk-textarea{
	font:var(--dk-fuente); color:var(--dk-ink); background:var(--dk-panel);
	border:1px solid var(--dk-line); border-radius:var(--dk-radio);
	padding:6px 10px; width:100%;
}
.dk-input:focus, .dk-select:focus, .dk-textarea:focus{
	outline:none; border-color:var(--dk-accent);
	box-shadow:0 0 0 3px rgba(14,122,200,.18);
}
.dk-textarea{ min-height:90px; resize:vertical; }

/* --- Listas y tablas ---------------------------------------------------- */
.dk-lista{ padding:0; margin:0; list-style:none; }
.dk-fila{
	display:flex; gap:9px; align-items:baseline;
	padding:7px 10px; border-bottom:1px solid var(--dk-line-soft); font-size:13px;
}
.dk-fila:last-child{ border-bottom:0; }
.dk-fila:hover{ background:var(--dk-line-soft); }
.dk-fila.dk-atenuada{ opacity:.5; }

.dk-tabla{ width:100%; border-collapse:collapse; font-size:13px; }
.dk-tabla th{
	text-align:left; font-weight:600; color:var(--dk-muted); font-size:12.5px;
	padding:8px 10px; border-bottom:1px solid var(--dk-line); white-space:nowrap;
}
.dk-tabla td{ padding:8px 10px; border-bottom:1px solid var(--dk-line-soft); vertical-align:top; }
.dk-tabla tr:last-child td{ border-bottom:0; }
.dk-tabla tbody tr:hover{ background:var(--dk-line-soft); }

/* --- Etiquetas de estado ------------------------------------------------ */
.dk-badge{
	display:inline-block; padding:2px 9px; border-radius:999px;
	font-size:11.5px; font-weight:700; letter-spacing:.02em;
	background:var(--dk-line-soft); color:var(--dk-muted);
}
.dk-badge-ok{ background:#E4F5E9; color:#0F7A31; }
.dk-badge-danger{ background:#FBEDED; color:#A32222; }
.dk-badge-warn{ background:var(--dk-warn-bg); color:var(--dk-warn); }

/* --- Panel de diagnostico (cajetin "Conector de Google") ---------------- */
.dk-estado{
	background:var(--dk-panel); border:1px solid var(--dk-line);
	border-radius:12px; box-shadow:var(--dk-sombra); padding:10px 14px;
	font-size:13px; min-width:290px;
}
.dk-estado-cab{
	display:flex; justify-content:space-between; align-items:center; gap:10px;
	font-weight:700; margin-bottom:8px;
}
.dk-estado-fila{
	display:flex; align-items:center; gap:8px;
	padding:4px 0; border-bottom:1px solid var(--dk-line-soft);
}
.dk-estado-fila:last-child{ border-bottom:0; }
.dk-estado-fila .dk-eti{ min-width:112px; color:var(--dk-muted); }
.dk-estado-fila .dk-val{ color:var(--dk-ink); }
.dk-punto{
	flex:none; width:9px; height:9px; border-radius:50%;
	background:var(--dk-line); display:inline-block;
}
.dk-punto-ok{ background:var(--dk-ok); }
.dk-punto-danger{ background:var(--dk-danger); }
.dk-punto-warn{ background:var(--dk-warn); }

/* --- Avisos ------------------------------------------------------------- */
.dk-aviso{
	padding:9px 12px; border-radius:var(--dk-radio); font-size:13px;
	border:1px solid var(--dk-line); background:var(--dk-line-soft);
	margin:8px 0;
}
.dk-aviso-ok{ background:#E4F5E9; border-color:#B9E2C6; color:#0F7A31; }
.dk-aviso-danger{ background:#FBEDED; border-color:#E5B6B6; color:#A32222; }
.dk-aviso-warn{ background:var(--dk-warn-bg); border-color:#EEC98A; color:var(--dk-warn); }

/* --- Utilidades minimas ------------------------------------------------- */
.dk-muted{ color:var(--dk-muted); }
.dk-derecha{ margin-left:auto; }
.dk-fila-horiz{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* DK 01/09/2026 - se llamaba .dk-fila-h y chocaba con la fila HEMBRA del cuadro de precios de /Facturacion/default.asp (un <tr> con esa clase se volvia flex y apilaba las celdas). NO reutilizar nombres que ya existan en alguna pagina. */
.dk-nowrap{ white-space:nowrap; }