/**
 * CPIC Soft Theme - Paleta de Colores Pastel
 * Interfaz limpia y profesional con colores suaves
 */

/* ============================================
   PALETA DE COLORES PASTEL
   ============================================ */
:root {
    /* Colores primarios pastel */
    --cpic-blue-soft: #E3F2FD;      /* Azul pastel muy suave */
    --cpic-blue-light: #90CAF9;     /* Azul pastel claro */
    --cpic-blue-medium: #64B5F6;    /* Azul pastel medio */
    --cpic-blue-text: #1976D2;      /* Azul para texto */

    /* Verdes pastel */
    --cpic-green-soft: #E8F5E9;     /* Verde pastel muy suave */
    --cpic-green-light: #A5D6A7;    /* Verde pastel claro */
    --cpic-green-medium: #81C784;   /* Verde pastel medio */
    --cpic-green-text: #388E3C;     /* Verde para texto */

    /* Naranjas/Amarillos pastel */
    --cpic-orange-soft: #FFF3E0;    /* Naranja pastel muy suave */
    --cpic-orange-light: #FFB74D;   /* Naranja pastel claro */
    --cpic-orange-medium: #FFA726;  /* Naranja pastel medio */
    --cpic-orange-text: #F57C00;    /* Naranja para texto */

    /* Rosas/Rojos pastel */
    --cpic-pink-soft: #FCE4EC;      /* Rosa pastel muy suave */
    --cpic-pink-light: #F48FB1;     /* Rosa pastel claro */
    --cpic-pink-medium: #EC407A;    /* Rosa pastel medio */
    --cpic-pink-text: #C2185B;      /* Rosa para texto */

    /* Turquesas pastel (Info) */
    --cpic-teal-soft: #E0F2F1;      /* Turquesa pastel muy suave */
    --cpic-teal-light: #80CBC4;     /* Turquesa pastel claro */
    --cpic-teal-medium: #4DB6AC;    /* Turquesa pastel medio */
    --cpic-teal-text: #00897B;      /* Turquesa para texto */

    /* Grises suaves */
    --cpic-gray-bg: #F5F7FA;        /* Fondo gris muy suave */
    --cpic-gray-border: #E1E8ED;    /* Bordes grises suaves */
    --cpic-gray-text: #657786;      /* Texto gris */
}

/* ============================================
   PANELES SUAVIZADOS
   ============================================ */

/* Panel Principal (Primary) - Azul Pastel */
.cpic-registro-index .panel-primary {
    border-color: var(--cpic-blue-medium);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cpic-registro-index .panel-primary > .panel-heading {
    background: linear-gradient(135deg, var(--cpic-blue-soft) 0%, var(--cpic-blue-light) 100%);
    border-color: var(--cpic-blue-medium);
    color: var(--cpic-blue-text);
    font-weight: 600;
}

.cpic-registro-index .panel-primary h2,
.cpic-registro-index .panel-primary h3 {
    color: var(--cpic-blue-text);
}

/* Panel Éxito (Success) - Verde Pastel */
.cpic-registro-index .panel-success {
    border-color: var(--cpic-green-medium);
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cpic-registro-index .panel-success > .panel-heading {
    background: linear-gradient(135deg, var(--cpic-green-soft) 0%, var(--cpic-green-light) 100%);
    border-color: var(--cpic-green-medium);
    color: var(--cpic-green-text);
    font-weight: 600;
}

/* Panel Info - Turquesa Pastel */
.cpic-registro-index .panel-info {
    border-color: var(--cpic-teal-medium);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cpic-registro-index .panel-info > .panel-heading {
    background: linear-gradient(135deg, var(--cpic-teal-soft) 0%, var(--cpic-teal-light) 100%);
    border-color: var(--cpic-teal-medium);
    color: var(--cpic-teal-text);
    font-weight: 600;
}

.cpic-registro-index .panel-info h2,
.cpic-registro-index .panel-info h3 {
    color: var(--cpic-teal-text);
}

/* Panel Advertencia (Warning) - Naranja Pastel */
.cpic-registro-index .panel-warning {
    border-color: var(--cpic-orange-medium);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cpic-registro-index .panel-warning > .panel-heading {
    background: linear-gradient(135deg, var(--cpic-orange-soft) 0%, var(--cpic-orange-light) 100%);
    border-color: var(--cpic-orange-medium);
    color: var(--cpic-orange-text);
    font-weight: 600;
}

.cpic-registro-index .panel-warning h2,
.cpic-registro-index .panel-warning h3 {
    color: var(--cpic-orange-text);
}

/* Panel Peligro (Danger) - Rosa Pastel */
.cpic-registro-index .panel-danger {
    border-color: var(--cpic-pink-medium);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cpic-registro-index .panel-danger > .panel-heading {
    background: linear-gradient(135deg, var(--cpic-pink-soft) 0%, var(--cpic-pink-light) 100%);
    border-color: var(--cpic-pink-medium);
    color: var(--cpic-pink-text);
    font-weight: 600;
}

.cpic-registro-index .panel-danger h2,
.cpic-registro-index .panel-danger h3 {
    color: var(--cpic-pink-text);
}

/* ============================================
   BADGES/LABELS SUAVIZADOS
   ============================================ */

/* Label Primary - Azul Pastel */
.cpic-registro-index .label-primary {
    background-color: var(--cpic-blue-medium);
    color: white;
    font-weight: 500;
    padding: 4px 10px;
}

/* Label Info - Turquesa Pastel */
.cpic-registro-index .label-info {
    background-color: var(--cpic-teal-medium);
    color: white;
    font-weight: 500;
    padding: 4px 10px;
}

/* Label Warning - Naranja Pastel */
.cpic-registro-index .label-warning {
    background-color: var(--cpic-orange-medium);
    color: white;
    font-weight: 500;
    padding: 4px 10px;
}

/* Label Danger - Rosa Pastel */
.cpic-registro-index .label-danger {
    background-color: var(--cpic-pink-medium);
    color: white;
    font-weight: 500;
    padding: 4px 10px;
}

/* Label Success - Verde Pastel */
.cpic-registro-index .label-success {
    background-color: var(--cpic-green-medium);
    color: white;
    font-weight: 500;
    padding: 4px 10px;
}

/* ============================================
   BOTONES SUAVIZADOS
   ============================================ */

/* Botón Success - Verde Pastel */
.cpic-registro-index .btn-success {
    background: linear-gradient(135deg, var(--cpic-green-light) 0%, var(--cpic-green-medium) 100%);
    border-color: var(--cpic-green-medium);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.cpic-registro-index .btn-success:hover {
    background: linear-gradient(135deg, var(--cpic-green-medium) 0%, var(--cpic-green-text) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Botón Primary - Azul Pastel */
.cpic-registro-index .btn-primary {
    background: linear-gradient(135deg, var(--cpic-blue-light) 0%, var(--cpic-blue-medium) 100%);
    border-color: var(--cpic-blue-medium);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.cpic-registro-index .btn-primary:hover {
    background: linear-gradient(135deg, var(--cpic-blue-medium) 0%, var(--cpic-blue-text) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Botón Warning - Naranja Pastel */
.cpic-registro-index .btn-warning {
    background: linear-gradient(135deg, var(--cpic-orange-light) 0%, var(--cpic-orange-medium) 100%);
    border-color: var(--cpic-orange-medium);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.cpic-registro-index .btn-warning:hover {
    background: linear-gradient(135deg, var(--cpic-orange-medium) 0%, var(--cpic-orange-text) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Botón Danger - Rosa Pastel */
.cpic-registro-index .btn-danger {
    background: linear-gradient(135deg, var(--cpic-pink-light) 0%, var(--cpic-pink-medium) 100%);
    border-color: var(--cpic-pink-medium);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.cpic-registro-index .btn-danger:hover {
    background: linear-gradient(135deg, var(--cpic-pink-medium) 0%, var(--cpic-pink-text) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Botón Info - Turquesa Pastel */
.cpic-registro-index .btn-info {
    background: linear-gradient(135deg, var(--cpic-teal-light) 0%, var(--cpic-teal-medium) 100%);
    border-color: var(--cpic-teal-medium);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.cpic-registro-index .btn-info:hover {
    background: linear-gradient(135deg, var(--cpic-teal-medium) 0%, var(--cpic-teal-text) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ============================================
   ALERTAS SUAVIZADAS
   ============================================ */

.cpic-registro-index .alert-warning {
    background-color: var(--cpic-orange-soft);
    border-color: var(--cpic-orange-light);
    color: var(--cpic-orange-text);
}

.cpic-registro-index .alert-info {
    background-color: var(--cpic-teal-soft);
    border-color: var(--cpic-teal-light);
    color: var(--cpic-teal-text);
}

.cpic-registro-index .alert-danger {
    background-color: var(--cpic-pink-soft);
    border-color: var(--cpic-pink-light);
    color: var(--cpic-pink-text);
}

.cpic-registro-index .alert-success {
    background-color: var(--cpic-green-soft);
    border-color: var(--cpic-green-light);
    color: var(--cpic-green-text);
}

/* ============================================
   TABLAS Y GRIDS
   ============================================ */

.cpic-registro-index .table-hover > tbody > tr:hover {
    background-color: var(--cpic-blue-soft);
}

.cpic-registro-index .table-condensed > tbody > tr > td {
    padding: 5px;
}

/* ============================================
   MEJORAS GENERALES DE INTERFAZ
   ============================================ */

/* Panel body con padding mejorado */
.cpic-registro-index .panel-body {
    padding: 20px;
    background-color: #ffffff;
}

/* Panel heading con mejor tipografía */
.cpic-registro-index .panel-heading {
    padding: 12px 20px;
    border-radius: 4px 4px 0 0;
}

.cpic-registro-index .panel-heading strong {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Bordes redondeados suaves */
.cpic-registro-index .panel {
    border-radius: 8px;
    overflow: hidden;
}

/* Espaciado entre paneles */
.cpic-registro-index .row > div > .panel {
    margin-bottom: 20px;
}

/* ============================================
   MODAL SUAVIZADO
   ============================================ */

.cpic-registro-index .modal-header {
    background: linear-gradient(135deg, var(--cpic-blue-soft) 0%, var(--cpic-blue-light) 100%);
    border-bottom: 2px solid var(--cpic-blue-medium);
    color: var(--cpic-blue-text);
}

.cpic-registro-index .modal-header h4 {
    color: var(--cpic-blue-text);
    font-weight: 600;
}

/* ============================================
   ICONOS Y GLYPHICONS
   ============================================ */

.cpic-registro-index .glyphicon {
    margin-right: 5px;
}

/* ============================================
   FORMULARIOS DE BÚSQUEDA
   ============================================ */

.cpic-registro-index .form-control:focus {
    border-color: var(--cpic-blue-medium);
    box-shadow: 0 0 8px rgba(100, 181, 246, 0.3);
}

/* ============================================
   KRTV GRID VIEW SUAVIZADO
   ============================================ */

.cpic-registro-index .kv-panel-primary > .kv-panel-before {
    background: linear-gradient(135deg, var(--cpic-blue-soft) 0%, var(--cpic-blue-light) 100%);
    border-color: var(--cpic-blue-medium);
}

.cpic-registro-index .kv-panel-primary > .kv-panel-before .kv-panel-heading {
    color: var(--cpic-blue-text);
}

/* ============================================
   BREADCRUMBS SUAVIZADOS
   ============================================ */

.cpic-registro-index .breadcrumb {
    background-color: var(--cpic-gray-bg);
    border: 1px solid var(--cpic-gray-border);
}

.cpic-registro-index .breadcrumb > li + li:before {
    color: var(--cpic-gray-text);
}

/* ============================================
   MEJORAS DE ACCESIBILIDAD
   ============================================ */

.cpic-registro-index .panel-heading,
.cpic-registro-index .btn {
    text-shadow: none;
}

/* Mejorar contraste de texto */
.cpic-registro-index .text-muted {
    color: var(--cpic-gray-text) !important;
}

/* ============================================
   ANIMACIONES SUAVES
   ============================================ */

.cpic-registro-index .panel {
    transition: all 0.3s ease;
}

.cpic-registro-index .panel:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ============================================
   RESPONSIVE MEJORAS
   ============================================ */

@media (max-width: 768px) {
    .cpic-registro-index .panel-body {
        padding: 15px;
    }

    .cpic-registro-index .panel-heading {
        padding: 10px 15px;
    }
}