/* ==========================================================================
   inline-styles.css — clases utilitarias (Wisa 2026-10-25, PR #63)

   POR QUE EXISTE
   ==============
   La CSP de WTS ya no permite 'unsafe-inline' en style-src. Los
   ATRIBUTOS style= quedan bloqueados por el navegador (CSP3 solo los
   admite con 'unsafe-inline' o 'unsafe-hashes'). Para poder quitarlo,
   cada valor de style= del repo se ha trasladado a una clase utilitaria.

   MEDIDO antes del cambio: 196 atributos style= en 47 ficheros
   (100 valores estaticos distintos + 3 dinamicos).

   Los 3 atributos DINAMICOS (valor calculado en PHP) no pueden moverse
   a una clase estatica: se resuelven con data-w-pct (JS) y con las
   clases .wts-display-block / .wts-display-none.
   ========================================================================== */

.wts-s-549af4e4 { background-color: #fff3cd;; }
.wts-s-997c86b5 { background:#003399; color:white;; }
.wts-s-62056b59 { background:#007a55; color:#fff; border:none; padding:8px 16px; cursor:pointer;; }
.wts-s-b7dec0a7 { background:#28a745; color:white;; }
.wts-s-82606074 { background:#28a745; color:white; font-size:10px;; }
.wts-s-d8ccbf9b { background:#4CAF50; color:white;; }
.wts-s-735fcb33 { background:#9C27B0; color:white;; }
.wts-s-d79be2cb { background:#FF9800; color:white;; }
.wts-s-5bc13e9f { background:#f5f5f5; border-left:4px solid #999; padding:0.5rem 1rem;
        margin:0.5rem 0; font-size:0.8rem; color:#666;; }
.wts-s-3f25dcd9 { background:#f5f9ff; border-left:3px solid #1976d2; padding:0.75rem 1rem;
        margin:1rem 0; font-size:0.85rem; color:#333; line-height:1.5;; }
.wts-s-66437d46 { background:#f8f9fa; border:1px solid #dee2e6; border-radius:4px; padding:12px;; }
.wts-s-b55f8cb2 { background:#f8fafc;; }
.wts-s-e3a0ea96 { background:#fd7e14; color:white;; }
.wts-s-a3ce8c31 { background:#fff8e1; border-left:4px solid #ff9800; padding:0.75rem 1rem;
        margin:1rem 0; font-size:0.85rem; color:#333; line-height:1.5;; }
.wts-s-10044444 { background:#fff8e1; border-left:4px solid #ff9800; padding:1rem; margin:0;; }
.wts-s-97bda102 { background:transparent; color:#fff; border:1px solid #fff; padding:8px 16px; cursor:pointer;; }
.wts-s-8f887038 { background:var(--primary-blue); color:white;; }
.wts-s-c3e492e5 { border-top: 4px solid #003399 !important;; }
.wts-s-a4ff9ccc { bottom: 0; z-index: 0;; }
.wts-s-94dbda91 { color: #dc3545;; }
.wts-s-3b81a311 { color:#7af; text-decoration:underline;; }
.wts-s-775c6b7c { color:#ff6b35; font-weight:600;; }
.wts-s-26590802 { cursor: pointer;; }
.wts-s-5427090c { cursor: pointer; color: #3c8dbc;; }
.wts-s-a5432f00 { cursor: pointer; color: #777;; }
.wts-s-9f45f8dd { display: flex; align-items: center;; }
.wts-s-9e9b12d5 { display: flex; gap: 10px; flex-wrap: wrap;; }
.wts-s-9c766357 { display: none;; }
.wts-s-bb4d3d5f { display:block; color: #999;; }
.wts-s-5677b988 { display:inline;; }
.wts-s-cb458930 { display:none;; }
.wts-s-275c70c1 { display:none; position:fixed; bottom:0; left:0; right:0; background:#222; color:#fff; padding:15px 20px; z-index:9999; font-size:14px;; }
.wts-s-6ac8c7fd { flex: 1 1 60%;; }
.wts-s-978cb954 { font-family: monospace;; }
.wts-s-cea31ec8 { font-size: 12px;; }
.wts-s-645e8233 { font-size: 13px;; }
.wts-s-ed198fbb { font-size: 13px; line-height: 1.5;; }
.wts-s-8b685211 { font-size:11px;; }
.wts-s-78e24d54 { font-size:1rem; margin:0 0 0.5rem 0; color:#0d47a1;; }
.wts-s-c6243196 { font-weight:normal; font-size:13px; line-height:1.5;; }
.wts-s-6294b9fc { height: 500px; background: linear-gradient(rgba(0, 51, 153, 0.9), rgba(0, 34, 102, 0.9)), url('/img/cruiser.png'); background-size: cover; background-position: center;; }
.wts-s-9b1ed27c { letter-spacing:0.05em;; }
.wts-s-57e800c6 { margin-bottom: 20px;; }
.wts-s-9ab9bec8 { margin-bottom:15px;; }
.wts-s-b969d09c { margin-left: 0px;; }
.wts-s-12fb8ae2 { margin-right: 10px;; }
.wts-s-854f012a { margin-right: 20px;; }
.wts-s-ab8b868c { margin-right: 8px; font-weight: normal;; }
.wts-s-b87c6413 { margin-right:10px;; }
.wts-s-00c0df93 { margin-right:12px;; }
.wts-s-8ced3aad { margin-top: 10px;; }
.wts-s-a3161db2 { margin-top: 15px;; }
.wts-s-00385d9d { margin-top: 25px;; }
.wts-s-d256d0dc { margin-top: 30px;; }
.wts-s-89b618fe { margin-top: 40px;; }
.wts-s-07c6a71a { margin-top: 4px;; }
.wts-s-3c1f614e { margin-top: 5px;; }
.wts-s-f254cbde { margin-top: 6px;; }
.wts-s-d6b8be3e { margin: 20px 0;; }
.wts-s-1386d503 { margin:0;; }
.wts-s-2b0148b4 { margin:0 0 0.5rem 0;; }
.wts-s-ccc8984a { margin:0 0 0.5rem 0; font-weight:600;; }
.wts-s-d9972f24 { margin:0.25rem 0;; }
.wts-s-b97c9f16 { margin:0.5rem 0 0 0; padding-top:0.5rem; border-top:1px dashed #ccc;; }
.wts-s-e3b1d6d9 { margin:0; font-size:0.875rem;; }
.wts-s-812f136f { margin:1.5rem 0; padding:1rem; background:#f5f9ff; border-left:3px solid #1976d2;
        font-size:0.9rem; line-height:1.5;; }
.wts-s-46e61e6d { max-height: 150px;; }
.wts-s-8bb82a8a { max-height: 300px; overflow-y: auto;; }
.wts-s-83828f6e { max-height: 90px; width: auto;; }
.wts-s-3dcdd9d7 { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px;; }
.wts-s-5dd7b7d3 { max-width: 180px;; }
.wts-s-e52938e0 { max-width: 600px;; }
.wts-s-f715fa01 { max-width: 700px;; }
.wts-s-62a718ae { max-width: 720px; margin-top: 60px; margin-bottom: 60px;; }
.wts-s-c1514ccc { max-width: 820px; margin-top: 40px; margin-bottom: 60px;; }
.wts-s-ae18a06a { max-width:420px;; }
.wts-s-84509485 { opacity:.55;; }
.wts-s-63a7520e { padding-left: 0;; }
.wts-s-eea53017 { padding: 30px;; }
.wts-s-5f7abeb8 { text-transform:uppercase;; }
.wts-s-4ddbe905 { white-space:nowrap;; }
.wts-s-be70d99e { width: 100%;; }
.wts-s-7a3f802b { width: 120px; height: 120px; font-size: 24px;; }
.wts-s-842897c2 { width: 120px; height: 120px; object-fit: cover;; }
.wts-s-b9492f97 { width: 200px; height: 200px; font-size: 48px;; }
.wts-s-55307be0 { width: 200px; height: 200px; object-fit: cover;; }
.wts-s-0cf29cfc { width: 200px; height: 20px;; }
.wts-s-8e0008ec { width: 40%;; }
.wts-s-80722803 { width: 40px; height: 40px;; }
.wts-s-dce577fe { width: 40px; height: 40px; object-fit: cover;; }
.wts-s-250a21b0 { width: 50px; height: 50px;; }
.wts-s-37dc60b6 { width: 50px; height: 50px; object-fit: cover;; }
.wts-s-04a6ba1f { width: 60px; height: 60px;; }
.wts-s-32a56d70 { width: 60px; height: 60px; font-size: 24px; font-weight: bold;; }
.wts-s-db29ee0b { width: 64px; height: 64px;; }
.wts-s-e2d78aee { width: 80px; height: 80px; border: 3px solid white; font-weight: bold; font-size: 24px;; }
.wts-s-45f203e9 { width: 80px; height: 80px; object-fit: cover; border: 3px solid white;; }
.wts-s-51d488e4 { width:40%;; }

/* Wisa 2026-10-25 (PR #63): sustituyen a los atributos style= dinamicos
   que la CSP bloquea. El ancho de las barras de progreso se aplica desde
   js/csp-handlers.js (data-w-pct) porque el valor se calcula en PHP. */
.wts-display-block { display: block; }
.wts-display-none  { display: none; }

/* Clases de los ultimos casos con PHP dentro del tag (no procesables por el
   conversor automatico). Wisa 2026-10-25 (PR #63). */
.wts-s-margin-right-10 { margin-right: 10px; }
.wts-s-avatar-xl { width: 80px; height: 80px; border: 3px solid white; font-weight: bold; font-size: 24px; }