/* ============================================================
   iconProtocolos.css
   Protocolo Institucional de Diseño · Laboratorio de Iconografía CSS
   Este archivo define:
   - Colores institucionales
   - Tipografías base
   - Sombras, bordes y radios
   - Normas de composición visual
   - Sistema de coherencia para todos los archivos del recurso

   Reseña educativa:
   Este archivo sirve como referencia para estudiantes y docentes
   que desean comprender cómo se estructura un sistema visual
   coherente en entornos profesionales e institucionales.
   ============================================================ */

/* Paleta institucional */
:root {
    --color-bg: #020617;
    --color-panel: #0b1120;
    --color-border: #1f2937;
    --color-text: #e5e7eb;
    --color-text-secondary: #9ca3af;

    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;

    --color-success: #22c55e;
    --color-success-dark: #16a34a;

    --color-accent: #ec4899;
    --color-accent-dark: #db2777;

    --color-warning: #facc15;
    --color-danger: #ef4444;

    --radius-base: 12px;
    --radius-full: 999px;

    --shadow-soft: 0 0 12px rgba(0,0,0,0.25);
}

/* Tipografía institucional */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

/* Botones institucionales */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-panel);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: var(--color-success);
    color: var(--color-panel);
}

.btn-secondary:hover {
    background: var(--color-success-dark);
}

/* Paneles institucionales */
.panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    padding: 20px;
    margin-bottom: 24px;
}

/* Títulos institucionales */
h1, h2, h3 {
    margin: 0 0 12px 0;
    font-weight: 700;
}

p {
    margin: 0 0 12px 0;
    color: var(--color-text-secondary);
}

/* Área de demostración */
.demo-area {
    padding: 16px;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    background: var(--color-panel);
    box-shadow: var(--shadow-soft);
}